スタイルシート ID と Class
ID とは、identification の略、「識別」を意味する。
IDカードなどでお馴染みだが、同じ番号のIDカードがあっては機能しないように、(閉じられた)世界に1つだけでなければならない。
Class とは、「種類」という意味である。
スタイルシートについて言えば、
まずホームページを作るときに、各パーツ（部分）ごとに名前をつけよう。
例えば、親フレーム、子フレーム１、子フレーム２、ヘッダー、本文、フッター、メニューグループ１、メニューグループ２、といった具合に。
オブジェクト指向の作業である。
これらはスタイルシートのIDになる。
次に、必ず使うであろう文字の種類を決めよう。
中サイズ赤文字、大サイズ赤文字、
中サイズ青文字、大サイズ青文字、
中サイズ黒文字、大サイズ黒文字、
これらはスタイルシートのClassになる。
あと、主なHTMLタグの書式も決めておくと、全てに適用されるので、ID と Class の扱いが楽になる。
例えば、このように。
/* Basic TAG */
h1 {font-size:15px; line-height:120%; display:inline; color:#0000ff}
p {font-size:12px; line-height:120%}
IDについてはこんな感じ。
/* ID */
#header1 {width:800px; height:50px; margin:0 auto; padding:0}
Classについてはこんな感じ。
/* Class */
.f_red16 {color:#ff0000; font-size:16px;}
.f_red20 {color:#ff0000; font-size:18px;}
そうして、HTMLの本文中は、このように使う。
<h1>～</h1> <div id="header1">～</div> <p class="f_red20">～</p>