モノノフ日記

普通の日記です

noobでもわかるスタイルシート講座 NO.2

最近ブログの更新サボり気味です。仕事が忙しいってのがデカいですなぁ。
ゲームはほどほどにやってるんですけどね。

今日は「classとID」の違いについて。
スタイルシート上で

.title
{
text-align: center;
}

とか、

#et
{
text-align: right;
color: #0000FF;
}

のような感じにピリオドやシャープがついてる要素を見たことがあると思いまふ。
スタイルシートではピリオドが「class」、シャープが「id」を表します。
こうやって記述されたクラスやIDをHTMLのタグにくっつけてやれば、そのタグでは
クラスやID内で記述されたスタイルが有効になるっつー感じです。

上のスタイルシートを組み込んだサンプルHTMLはこんな感じ。

<h1 class="title">Enemy Territory</h1>
<div id="et">フリーのFPSです。Pub鯖ヘボすぎてつまらんです。</div>

上記のHTMLは実際に表示すると、こう。

Enemy Territory


フリーのFPSです。Pub鯖ヘボすぎてつまらんです。

スタイル揃えたいときとかにクラスやIDを有効に活用すると非常に便利です=)
クラスとIDは性能的にはほぼ同じなのですが、w3cで定められてるルールによると

「同じIDは同ページ内で1回しか使えない、クラスは何回でもおk」

となっています。例にするとID=名前、クラス=学年、みたいな感じと思ってもらえればいいかと。
まぁ、実際のところ同じIDを同ページ内で何回使っても動いてしまうんですけどねw
IE7ではちゃんと修正されるかもしれませんので規約通りに使いましょ。