「class」と「id」は役割が異なる

classとid、どちらを使う?

class属性とid属性、どちらを使う?

スタイルシート(CSS)を記述する際、「ある要素すべて」を一括して装飾するのではなく、「ある要素のうち一部だけ」を装飾したい場合、HTML側に付加する属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けていますか?

この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回は、「class」と「id」の使い分けについてご紹介致します。

class属性を使ったスタイルの適用例

スタイルを適用する方法として「class」を使う場合は、次のようなソースになります。

■HTML:
<p class="sakura">クラスを使った例</p>
■スタイルシート:
p.sakura { color: red; }
対象の要素名とclass名との間に「.」(ドット)記号を記述します。要素名は省略することもできます。

id属性を使ったスタイルの適用例

スタイルを適用する方法として「id」を使う場合は、次のようなソースになります。

■HTML:
<p id="tomoyo">アイディーを使った例</p>
■スタイルシート:
p#tomoyo { color: red; }
対象の要素名とid名との間に「#」(シャープ)記号を記述します。この場合も、要素名は省略することもできます。

class属性とid属性の違いと、使い分け方法

上記のサンプルソースは、スタイルシートの適用に「class」を使うか「id」を使うかの差だけで、ブラウザ上での表示効果は全く同じです。どちらも、対象の文字が赤色になります。

では、「class」と「id」の違いは何でしょうか?
実は、両者の役割には大きな差があります。また、スタイルが適用される優先順位にも差が付けられています。

次のページから、「class」と「id」の違いと使い分け方法について詳しくご紹介致します。