W-0045 class と id の違いとは？

意味の違い

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

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

PageTop

使い分け

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 を使い分けましょう。現在の実装的にはそれぞれに大きな違いがなくても、コードが多少冗長になっても、きちんと使い分けることが重要です。

参考までに、 class と id の意味を。

class

（人・物の）分類，種類（ kind ）

identity(id)

身元，正体

個性；独自性，固有性，主体性

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

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

PageTop

Back