ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
セレクタ
セレクタの「id」や「class」を指定することで、特定の要素を選択できます。
特定の要素だけにCSSで装飾したい時に便利です。
id
まずは「id」について。
＜ソースコード（抜粋）＞
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> #miso { color:brown; } </style> </head> <body> <p>ひつまぶし</p> <p id ="miso">味噌カツ</p> <p>カレーうどん</p> </body> |
属性の書き方は、開始ダクの中に以下のように書きます。
|
1 |
<p id ="miso">味噌カツ</p> |
ここで付けたid名はこのファイルでは1つしか付けることができません。
identification（身分証明書）の略ですからそのHTMLソース中では唯一の要素に付けます。
あなたと全く同じ免許証やパスポートを持っている人がいないように、id名は１つのサイトで唯一無二のものになります。
idをスタイルで指定するにはid名の先頭に「#」をつけます。
|
1 |
#miso |
それにより、<p>の中の味噌カツの文字色だけを変更することができました。
id名をつけることでHTMLの特定の要素を選択することができるようになりました。
しかし、この機能はJavaScriptでプログラミングする際に活きるのです。
HTML単体ではあまり活躍の場はありません。
HTMLでは主として以下のClassを使うことが一般的です。
class
次に「class」です。
＜ソースコード＞
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .content { text-align: center; } </style> </head> <body> <ul> <li class="content">ひつまぶし</li> <li class="content">味噌カツ</li> <li class="content">カレーうどん</li> </ul> </body> |
属性の書き方は、開始ダクの中に以下のように書きます。
|
1 |
<li class="content"> |
“class”は先ほどの“id”とは違い、
ファイル内に同じclass名を複数付けることができます。
学校のクラスにも色々な人がいてもいいようにクラスには複数の要素が属することができますね。
classをスタイルで指定するにはclass名の先頭に「.」をつけます。
|
1 |
.content |
それにより、同じクラスの文字を中央揃えにすることができました。
div
次に「div」です。
＜アウトプット＞
＜ソースコード（一部抜粋）＞
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> #content { width: 500; height:300; background-color: gray }</style> </head> <body> <div id = content> <ul> <li>ひつまぶし</li> <li>味噌カツ</li> <li>カレーうどん</li> </ul> </div> </body> |
幅と高さを指定してバックグラウンドの色をグレイにしています。
<div>はこのように要素を囲うために使われます。
また、<div>にidを振ってスタイルを適用させることもよくあります。
ちなみに“div”はdivision（部分）の略です。
単体では特に意味を持たないタグですが、囲った部分をブロックレベル要素としてグループ化することができるタグです。
ブロックレベル要素とはその名の通りブロックのような要素です。
ブロックのように縦に積み重ねることができます。
次の<span>と比較してください。
span
最後に<span>です。
＜ソースコード＞
|
1 2 3 4 5 |
<ul> <li>ひつまぶし</li> <li>味噌カツ</li> <li><span style="color:yellow" >カレー</span>うどん</li> </ul> |
「カレーうどん」の“カレー”という３文字だけを黄色にしています。
<span>も単体では特に意味を持たないタグですが、
囲った部分をインライン要素としてグループ化することができるタグです。
一部分の見た目を変えたいときなどに使います。
インライン要素とは、その名の通りブロックレベル要素内で使われる要素です。
ブロックのようには積み重ねることはできない要素です。
以上、今回は「id, class, div, span」について学びました。
次回は「リンクを張って回遊性を高める」方法について学びます。
【今回の復習Youtube】
