ホームページ作成

【ホームページ作成】スタイルシートの class と id の使い分け

HTML・スタイルシート（CSS）の基礎

更新日：2006年09月10日

スタイルシートの class と id の使い分け

西村文宏

HTMLでスタイルシート（CSS）を適用する際class属性を使う方法とid属性を使う方法の2種類があります。この「class」と「id」は役割が明確に違います。正しく使えているかチェックしましょう。

特定のHTML要素すべてに対してスタイルを適用するのではなく、一部だけに適用したい場合、 2つの記述方法がありますね。「class」と「id」です。
この「class」と「id」、使い分けていますか？

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

スタイルの適用に「class」を使う場合、次のようなソースになります。

●HTML

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

●スタイルシート

p.sakura { color: red; }

おそらく、この記述がスタイルを適用する際に最も使われる方法でしょう。

スタイルの適用に「id」を使う場合、次のようなソースになります。

●HTML

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

●スタイルシート

p#tomoyo { color: red; }

idを使う場合は、「HTML要素名」と「id名」との区切り文字として、「.」（ドット）ではなく「#」（シャープ）を使います。

上記のサンプルは、スタイルの適用にclassを使うかidを使うかの差だけで、実際の表示効果は全く同じです。（対象の文字が赤色で表示されます。）

では、classとidの違いは何でしょうか？
実は、両者の利用目的に大きな差があります。

人気ホームページ作成ランキング