P-0045 class と id の違いとは?

意味の違い

CSS では class セレクタも id セレクタも似たような使い方で利用できますが、そのせいか、 class と id を全く同じ意味だと思って混同していたり、「文字数が少なくて済む」からと id だけに統一している人がたまにいます。しかし、 class と id は全くの別物です

class はその要素の分類を、 id はその要素の固有の名前を意味します。あなたの家で飼っているを、より細かな分類で雑種犬と呼ぶか、唯一無二の名前でポチと呼ぶか、そういう違いなのです。

使い分け

id 属性は、「その要素に固有の名前を付ける」場合に使います。例えば、日記では以下のように使うことができるでしょう。

<ul>
    <li id="date20010819">2001/8/19 (Sun) 今日はお休み。</li>
    <li id="date20010820">2001/8/20 (Mon) 今日は仕事。</li>
    <li id="date20010821">2001/8/21 (Tue) 今日も仕事。</li>
</ul>

class 属性は、「その要素のより細かな分類を示す」場合に使います。同じく日記で使うなら、以下のようになるでしょう。

<ul>
    <li class="holiday">2001/8/19 (Sun) 今日はお休み。</li>
    <li class="weekday">2001/8/20 (Mon) 今日は仕事。</li>
    <li class="weekday">2001/8/21 (Tue) 今日も仕事。</li>
</ul>

気を付けなければならないのは、要素の登場回数ではなく、目的によって class を指定するか id を指定するかを使い分けるという点です。ページ内に1回しか出てこないものは全部 id で良しなんてのは大きな間違いです。

なお、その要素が分類と固有名の両方を持っている場合、同時に二つとも指定するというやり方もあります。

<h2 class="index" id="total-index"> 総目次</h2>
<h2 class="index" id="main-index"> 本文目次</h2>

併用もできるわけですから、無理にどちらか一方で全てをカバーするのではなく、それぞれの属性の役目を考えて class と id を使い分けましょう。現在の実装的にはそれぞれに大きな違いがなくても、コードが多少冗長になっても、きちんと使い分けることが重要です。

参考までに、 classid の意味を。

class
(人・物の)分類,種類( kind )
identity(id)
身元,正体
個性;独自性,固有性,主体性

この違いさえ理解していれば、混同することはないはずです。

尚、 class 名の付け方・考え方については別項でも解説していますので、参考にしてください。

HTML では一ファイル中に同名の id が複数あってはいけないことになっていますが、だからといって、 IE や NN などのブラウザがエラーで止まってしまうなどということはありません。これをして ブラウザがちゃんと動くんだから、 class の代わりに id を使っても全然オッケー と言う人がいますが、それは大きな間違いです。

複数の同名 id があってもエラーにならないのは、あくまで、その程度のエラーでブラウザが止まっては困るからです。つまり、非常時のエラー対策の結果、表面上問題なく動いているように見せているに過ぎないのです。イタズラで非常ベルを鳴らしても誰も死にはしませんが、ベルはイタズラで押すためのものではない、そういうことです。