初心者のスタイルシート(CSS)講座：classとidの使い方
スタイルシート(CSS)の『class』と『id』の具体的な使い方について学んでみましょう！ ここも見ておいたほうがいいので、まだ目を通していない方はコチラから目を通してください→スタイルシート(CSS)外部リンクについて
ちょっと復習です。『class』と『id』は外部リンクやheadなどにスタイルシート(CSS)を設定するときに使います。head部分にスタイルシート(CSS)を設定することで、そのページ全体にスタイルシート(CSS)が適用されます。また、スタイルシート(CSS)を外部リンクで設定するとホームページ全体にスタイルシート(CSS)を適用することが出来ます。それにより、スタイルシート(CSS)の変更が一括で出来るというメリットが生じます。
では、『class』と『id』をどのように使うか見てみましょう！『class』はピリオド(.)を『id』はシャープ(#)を使うということを覚えていてくださいね。
例えば下記のようなスタイルシート(CSS)を設定したとします。
.red{color:red;}
#yellow{background-color:yellow;}
上のredが『class』で下のyellowが『id』ですね。上記の二つのスタイルシート(CSS)設定をbody要素内で適用するためには以下のようにタグ内に書き込みます。
タグ内に上記のスタイルシート(CSS)設定の「red」と「yellow」を記入する場合。(spanタグで試します)
<span id="red">スタイルシート(CSS)赤</span>→スタイルシート(CSS)赤
<span class="yellow">スタイルシート(CSS)黄色</span>→スタイルシート(CSS)黄色
このようにhtmlタグのすぐそばに『class』や『id』をおいて、『="値"』でどのスタイルシート(CSS)設定を使うのかを指定します。そして、あらかじめhead内や外部リンクで設定したスタイルシート(CSS)に適用されます。ちなみに‘値'の部分に来る名前は半角英数字なら勝手につけて大丈夫です！
なるべくわかりやすいように‘値'をつけましょう！
スタイルシート(CSS)の『class』と『id』の使い方についてなんとなくでも分かってきたでしょうか!? ホームページの実践講座のほうでテンプレートを使って、実際に使っているスタイルシート(CSS)の解説もしているので、是非参考にしてみてください！
初心者のホームページ実践講座へgo！