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

classとidの役割の違い

スタイルシートで、スタイルを一部にだけ適用させる場合、classだけを使っている方々も多いでしょう。 それはそれで特に問題ありません。
ただ、HTMLの構造からidを使った方が望ましい場合には、idも使うようにすると、ソースが分かりやすくなります。

「class」と「id」の違いは、次の通りです。

「id」は、ページ中で一意に特定できる場所を示すために使われます。 ですから、1ページ中に1度しか使えません。

同じ id 名は1ページ中に1度だけ

たとえば、div要素などを用いて、ページを「上部」「サイドバー」「本文領域」「下部」の4ブロックに区切ってレイアウトする場合を考えます。 この場合、idを使って次のようにHTMLを（div要素を）記述するのが適しているでしょう。

この場合、上部（header）も、サイドバー（sidebar）も、1ページ中に2度以上登場することはありません。 かならず1度だけです。 このような場合に、idを使います。

同じ classは1ページ中に何度でも登場できる

idに対してclassは、特に場所を一意に特定する役割はありませんから、ページ中に何度でも登場できます。
ですから、ページ中に何度も登場するデザインを記述する場合は、classを使います。

巨大にしたい文字はページ中に何度あってもおかしくありませんし、枠を付けたい段落がいくつあってもおかしくありません。 補足説明もいくつあってもおかしくありませんね。
こういう場合は、classを使います。

classとidを使い分けよう

スタイルを適用する際の「class」と「id」の違いについては、お分かり頂けたでしょうか。
1ページ中に1度しか登場しないものには「id」を、1ページ中に何度でも登場できるものには「class」を使うのが基本です。

もちろん、全部にclassを使っても（スタイルを適用するという）目的は達成できます。 しかし、ウェブサイトの規模が大きくなってデザインが複雑になってくると、 「どういう目的のスタイルか？」「どこに適用されるべきスタイルなのか？」といったことが分かりにくくなります。 そんなとき、classとidを適切に使い分けていれば、ソースが（全部classだけで書かれているよりは）理解しやすくなります。

idの用途はスタイルシートだけではない

そもそも「id」は、スタイルシートを適用するためだけに用意された属性ではありません。 JavaScriptからも利用されますし、HTMLだけでも意味があります。

「id」は、場所を一意に特定するため、「ページ内リンク」を作る際にも活用できるのです。

idはページ内リンクにもなります。 詳しくは次のページで！ >>