#19ゼロからwebの基本「HTML」「CSS」編 〜19日目〜 『リンクについてやってみる2』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は同じページ内でリンクを貼って行きましょう。
- HTMLファイル内にリンクを指定する
以前使ったもう一つの方のHTMLファイルを使いましょう。（second.html）?
下の画像のようにやっていってみてください。
まずボックスが短いと上手く飛べたかわからないので、長くします。
.longBox { /*単に縦長のボックスを作るための指定です*/
height:120em;
}
です。
リンク元を作ります。
<p>
<a href="#profile">作者の紹介</a> <!--ここがリンク元です-->
</p>
そして同じファイル内にリンク先を作ります。
<hr> <!--hrは区切り線です-->
<h2 id="profile">ゆーたろ（1999年～）</h2> <!--ここがリンク先-->
<p class="longBox"> <!--単に縦長のボックスを作る
ためにクラス指定しています--> お金がなく独学を強いられている可哀想な人
</p>
- 説明
結構色々追加したのですが、大切なのは62行目と68行目です！
<h2 id="profile">ゆーたろ（1999年～）</h2> （同じページ内にリンクさせようとしている）
<h2 id="profile">ゆーたろ（1999年～）</h2>
リンクさせたい要素（リンク先）に id属性で id名 を付け、リンク元の <a>要素の href属性では、 id名 を「#（ハッシュ）」付きで指定してやれば、この id がついた要素にジャンプできるんです。
- プレビューしてみる
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
- 最後に
今回話はここまでにしましょう
次回は →もう一日リンク関係のことをやって行きましょう。
#18ゼロからwebの基本「HTML」「CSS」編 〜18日目〜 『リンクについてやってみる』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は前回のリンクを少しCSSを使っていじってみましょう。
- 今回使用するCSSプロパティ
今回はリンクのテキストの色を変えたりしてみます。
ブラウザにはデフォルトのスタイル設定があるみたいです。
ブラウザは、特に指定がなければデフォルトスタイルで表示します。HTML文書側でスタイルの指定があれば、それで表示する仕組みです。
| 使用するCSSプロパティ | font-size font-weight color text-decoration font-style |
|---|
font-sizeプロパティ→文字のサイズを指定します。
font-weightプロパティ→文字の太さ。bold や normal などを指定します。
colorプロパティ→文字の色を指定します。
text-decorationプロパティ→文字の装飾。アンダーライン・オーバーライン・取り消し線などがあります。
font-styleプロパティ→テキストの italic や normal などを指定します。イタリックは斜体ですね。
今回は、これらの CSSの指定について 初歩的なことを説明しています。
- 文字の大きさ・色・太さを変えてみよう
前回リンクを作った〇〇.html を開いて、<head>部分のCSSを編集します。
<a>要素の指定を、下の画像の指定してあるところの様に入力してみてください。
出来たら保存してプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
リンクが青になって大きさも変わっていますね！
ちなみに基本リンクの下には線が入るのが普通らしいのですが、なしにしました。
- マウスオーバーした時に色が変わるように指定しよう
次はリンクにマウスオーバーした時の文字色を変えてみましょう。
※マウスオーバー →カーソルがリンクの上にいる、クリックする前の状態
これは PCサイトのみに使えます。スマホ用だと「マウスオーバー」できないからね。
下記のように「a:hover」を指定します。
※hover→「ホバー」と読みます。
次は文字の色を紫にして下線を入れてみました。
早速、保存してプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
出来ていますね！
- 最後に
今日はここまでにしましょう。
リンクまで作れるようになって最初とは見違えるようですね。笑
次回は→同じページ内でリンクをしてみます。
#17ゼロからwebの基本「HTML」「CSS」編 〜17日目〜 『リンクについてやってみる』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回はリンクについてやって行きましょう。
- 使用する要素と属性
| 使用する要素 | <a> 〜 <a> |
|---|
| 使用する属性 | <a href="URL"> |
|---|
属性の href は「Hyper Text Reference」の略で、エイチレフとか読みます。
「Reference（リファレンス）」は「参照」って意味らしいです。
<a>要素は href属性が必須で、この属性でリンク先のURLを指定します。
<a>にはその他いろいろ属性がありますが、覚えておいた方がいいのは title属性。
これを使えば、リンク先の表題や説明を書く事ができるみたいです。
| 使用する属性 | <a href="URL" title="テキスト"> |
|---|
<a>要素にはこの他たくさん属性があるけど、今回の内容には「href属性」「title属性」だけで十分。
この他の属性は、下の方の <a>要素で使える属性一覧に書いておきますので、興味のあるかたはご覧ください。
- リンクさせるHTMLファイルを用意
前回作ったHTMLファイルの複製を作り、 名前を変えて保存します。
自分は「雨とコーヒー.html」という練習用のファイルがあるのでそれを使用します。
このファイルを、前回のファイルと同じ場所に保存しましょう。
いつものが「ゆーたろ.html」リンクさせるファイルが「雨とコーヒー.html」です。
- <a>要素を使用してリンクを指定しよう
こんな感じですね
保存してプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここでは相対URLを使ってます。
「ゆーたろ.html 」と 「雨とコーヒー.html 」は同じ場所にあるので、URLはファイル名だけ大丈夫です。
- リンク先のファイルに戻るリンクをつけよう
リンク先の 雨とコーヒー.html にも、リンクの指定をしてゆーたろ.html に戻れるようにしてみましょう。
下の画像
ゆーたろ.html へのリンク部分に title属性も加えてみました。
これでマウスオーバーしたときに、titleに書いたテキストが表示されます。
では、ファイルを保存して、ブラウザでプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
こんな感じですね。
- 最後に
今回はここまでにしましょう。
かなり進歩した感じがしますね、この調子で頑張って行きましょう。
次回 →CSSを使ってリンクをいじってみよう
#16ゼロからwebの基本「HTML」「CSS」編 〜16日目〜 『絶対URLと相対URL』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
前回リンクをやると言ったと思うのですが先に絶対URLと相対URLをやりましょう。
- URLとは
URL（ユーアールエル）とは、ファイルの住所みたいなもので、
例として、画像を表示させたい時はその画像ファイルの位置をHTML上で指定する必要があります。
リンクを貼って他のページに飛ぶときも、そのHTMLファイルがある位置を指定してあげないといけません。
このファイルの位置を表すのがURLです。
※ちなみにURL「Uniform Resource Locator」の略で直訳すると（リソースの位置を示す形式）になるっぽいです。
そして、URLには 絶対URL と 相対URL の2通りがあり、「絶対パス」「相対パス」もここでは同じ意味になります。
- 絶対URL
これは「http://」で始まる指定形式です。（「https://」もある）
※httpは、Hypertext Transfer Protocol の略。ブラウザとサーバの間の通信の作法のようなものです。
httpsは、httpが暗号化されているヤツね。Googleが推奨してるので今後これが主流になりそう。
別サーバにあるファイルへリンクするときには、この絶対パスを使うみたいです。
もちろん同じサーバ内のHTMLファイル同士や画像ファイルなどを、この絶対パスで指定しても大丈夫。
絶対パスの使用例はこんなかんじです。
絶対URLのメリット
-
- ファイル間の相対的な位置関係を考えずに書けて間違いが少ない。
- ビジターがサイトのアーカイブを取った時にも表示がわかりやすい。
- 絶対URLのデメリット
-
- オフライン（ネットが接続してない）のとき表示されない。
- ドキュメント相対URL
こちらは同じサイト内のファイルの位置関係を相対的に示す形式で、
説明が難しいのですが、現在のHTMLファイルを起点にして、階層が上か下か、どんな名前の階層か、その中のどの名前のファイルかを書きます。
階層はディレクトリとも言うのでフォルダだと思っ見てください。
起点になるファイル（現在編集しているファイル）がいる階層を、カレントディレクトリと言い、「./（ピリオドとスラッシュ）」で表します。
この「./」は省略できます。
階層は「/（スラッシュ）」で区切ります。
現在のファイルより下の階層は、/で区切ってディレクトリ名を書いていきます。
現在のファイルより上の階層を示すには「../（ピリオド2つとスラッシュ）」を使います。
まだ現時点では図を入れる技術がないのですみません。
- ドキュメント相対URLのメリット
-
- オフライン状態でも自分のPC内で指定でき、ブラウザ表示できる
- ドキュメント相対URLのデメリット
-
- ファイル間の相対的な位置関係を考えて書くのでややこしい
- サイトルート相対URL
これは「絶対URL」「ドキュメント相対URL」のイイとこ取りのような書き方です。
サイトルート（サイトの第一階層。トップページの index.html を置く階層）を「/（スラッシュ）」で表し、そこから絶対パスのように書きます。
- 絶対パスと同じようにルートからのパスなのでわかりやすい
- ローカル環境でのブラウザ表示がむずかしい
- 結果どれを使うのがいいのか
ローカルでの作業なら ドキュメント相対パス が基本。
で、同じサーバ内に無い、別ドメインにあるファイルへのリンクなら、絶対パスで貼る。
みたいです。笑
- 最後に
今回はここまでにしましょう。
わかりにくいかも知れないのですが、最後まで見ていただきありがとうございます。
次回 →今回の内容を踏まえてページリンクをやりましょう。
#15ゼロからwebの基本「HTML」「CSS」編 〜1５日目〜 『CSSをちょっと編集』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は前々回やったCSSを少しだけいじってみましょう！
- CSSをちょいと編集
今回は自分が最近覚えた本文のテキストが画像の横に来るようにする
ってやつをやってみましょう。
CSSの floatプロパティを使います。
「float: left」と指定された要素は左に配置され、それ以降に書かれた要素はその右側に配置されます。
「float: right」ならその逆で、指定された要素は右に、それ以降の要素は左側に配置されます。
では早速前々回のファイルのCSSの部分に、下の画像のように指定要素を追加しよう。
それでは早速ファイルを保存してブラウザでプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
画像の右側に本文が回っているのですがこれでは変だし見難いですね。
これをさらにいじって見やすくしましょう。
- さらに編集
画像と本文の間を少し離してみましょう。
下の画像のようにCSSにマージンの指定を追加します。
※ marginとは、要素の4辺（上下左右）の間隔・マージン領域を設定するプロパティのことです。 要素間の間隔をとりたいときに使われるらしいです。
marginプロパティを使えば、要素にマージンを指定でき、隣接する要素との間隔を作る事ができます。
ちなみに上のコードで使っている「1em」とは、1文字分って意味です。
また保存してプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
さっきより読みやすくなりますたね。
- フローと指定の解除仕方
一度floatを指定するとそれ以降の要素が永遠に影響を受けることになるので、
指定を効かせたくない要素のところで解除しないといけません。
解除するには、clearプロパティを使います。
今回は 2番目の段落から回り込まなくて良いので、2番目の<p>に clearプロパティを使いましょう。
まず、2番目の <p>要素に クラス名を付けます（42行目）。ここでは「clear」という名前にしました。
※ちなみに名前はなんでも大丈夫です
そして CSSのほうで そのクラス名を呼出しましょう（28行目）。
自分で付けたクラス名を呼び出すには、先頭に「.（ドット）」を付けます。
これは CSS のルールのようで、
自分で要素につけた ID名を呼び出すときは、先頭に「#（ハッシュ）」を付ける決まりの様です。
そして このクラス名に対して「clear: both」と指定します（28〜30行）。
clear: both は、右も左も両方のフロート解除する指定です。
では、保存してプレビューしてみましょう。
ちゃんと指定した所で解除されていますね。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
- 最後に
今回はここまでにしましょう。
ちょっと文字が多くて長かったですね。
次回は →ページリンクについてやって行きましょう。
#14ゼロからwebの基本「HTML」「CSS」編 〜1４日目〜 『HTML内のコメントについて』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は前回やったCSSを少しだけいじってみようと思ったのですが、先にHTML内にコメントを入れてみましょう。
- コメントを入れてみよう
※コメントはブラウザに表示されません
HTMLの中にコメントを入れたいときは、コメント文を <!-- と --> で囲みます。
ではやってみましょう。
下の様に<div>要素の始まりと終わりに<!--ここから本文スタート-->と<!--ここで本文終わり-->というコメントを入れてみました。
一応ファイルに保存し、ブラウザでプレビューしてコメントが表示されていないか確認しときましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
表示されていないので大丈夫ですね。
- コメントタグの使いどころ
コメントは主に（自分宛てや他の人宛ての）メモに使います。
そしてもう一つはコメントアウトとして使います。
まず 人から人へのメモとして の使い方は、
・自分以外の人が編集する可能性がある場合、第三者に「ここは何を記述している箇所か」とかを説明するためにコメントを残します。
・後で編集する可能性がある箇所を、自分や人が見つけやすいようにコメントで目印を付けておくとか。
ですね。
次に、コメントアウトとして の使い方は、
・今は表示したくないけど後日使うことなどを「<!--」「-->」で囲んでおくことをコメントアウトと言います。
・コメントタグの「ソースコードは存在するけどブラウザがプレビューしない」という性質を利用した使い方で、後から「<!--」と「-->」を外すだけでソースコードを表示させる事ができるので......便利ですね。笑
- 最後に
今回はここまでにしましょう。
次回 →次回こそ前回やったCSSをいじってみましょう
#13ゼロからwebの基本「HTML」「CSS」編 〜1３日目〜 『画像を貼ってみよう２』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は前回説明していなかった、src属性やalt属性などについて説明して行きます。
- src属性
まずsrc属性は必須です。
src属性で、画像の格納場所（URL）をブラウザに教えます。
※ブラウザは指示どおりの画像を表示するので、コレがないと画像は表示されません。
URLの書き方で、フォルダとファイル名の間を「/（スラッシュ）」で区切るのを覚えてください。
そしてURLの書き方には「絶対URL」と「相対URL」があり、前回使ったのは「相対URL」ってやつです。
URLについての詳細は、またそのうちやりましょう。←まだ勉強してない、笑
- alt属性
alt属性の役割は、画像表示がされないブラウザ用に「代替えの文字」を入れます。
通信環境などの影響で ブラウザが画像を読み込めない時に、何の画像なのかがわかるためのテキストなで、アクセシビリティ的に重要。
特に、画像にリンクがあった場合、画像が読み込まれなかったら
ユーザはリンクをたどれないけど、alt のテキストがあればそれをポチッとできるらしく、やっぱり大事みたいです。
なので、単なる装飾用の画像じゃないなら alt属性は必須。
本文内容と関係ない装飾用の画像なら <img>要素ではなく CSS（カスケーディング スタイルシート）で表示させます。←勉強してないので詳しくはまた近々。
- width属性・height属性
width属性・height属性で表示する幅と高さをピクセルサイズで指定します。
そしてこの2つの属性は省略可能です。
もはや幅や高さはCSSで指定するやり方が標準になっているらしく、この属性はあんまり使われないみたいです。
今回は一応基本みたいなのでやってみました。知ってて損はないかと。
- 最後に
キリがいいので今回はここまでにしましょう。
画像が無くてつまらないかも知れないですが最後まで見ていただきありがとうございます。
次回 →画像使ってちょっと応用してみましょう。
