idとclassの違いと使い分け！スタイルシート(CSS)適用法

「id」と「class」の違いと使い分け

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

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

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

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

■HTML：

<p class="sakura">クラスを使った例</p>

■スタイルシート：

p.sakura { color: red; }

対象の要素名とclass名との間に半角の「.」(ドット)記号を記述します。要素名は省略することもできます。上記では「p」が要素名で「sakura」がclass名です。
 

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

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

■HTML：

<p id="tomoyo">アイディーを使った例</p>

■スタイルシート：

p#tomoyo { color: red; }

対象の要素名とid名との間に半角の「#」(シャープ)記号を記述します。この場合も、要素名は省略できます。上記では「p」が要素名で「tomoyo」がid名です。

※備考：ここで使うのは[Shift]＋[3]キーなどで入力可能な「#」です。「シャープ」とも読まれますが、音楽記号のシャープ「♯」とは形が異なります。「#」は「ハッシュ」と読まれることもありますが、Unicodeで定義されている名称は「NUMBER SIGN(番号記号)」です。
 

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

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

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

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