idとclassの使い分け

idとclassの違い

スタイルを適用させる範囲の指定によくidやclassを使います。 しかしidとclassのどちらを使うのが適正かは中々難しい問題です。 まずは両者の違いから考えてみましょう。

idはページに一つ、classはいくつでも可

idはページ内に一つしか記述できません。
対してclassはいくつでも記述することができます。

ただしページに１つしか出てこないからといって、idを使わなければいけない訳ではありません。 idの使用に制約があるだけです。

idとclassでスタイルが競合した場合、idが優先される

以下のスタイルの競合を例に見てみましょう。

lt;p id="red" class="blue">idとclass競合時の文字色</p>

red{color:red;}
.blue{color:blue;}

実行結果

文字色をidは赤、クラスは青を指定して競合した結果、idが優先されて赤くなりました。idはclassよりも強いのです。

idに対してページ内ジャンプができる

idに対してリンクを貼れば、該当のid位置にジャンプすることができます。

lt;a name="#アンカー名">idへジャンプ</a> 
<!-- ～略～ -->

これを利用してページ先頭にジャンプ機能を設置する手法がよく使われています。

idを使うべきところ

まず大前提として、classの使用に制約はありませんがidにはあります。 率直に言ってしまうと、idを全く使わずにclassで記述してしまっても問題ありませんし、そうすることも多いです。 なので使い分けをどうするか考えるより、どこにidを使うべきかを考えましょう。

idを使う箇所は「一意にする必要がある」もしくは「一意にした方がいい」箇所です。

ページ内ジャンプ機能を付けたい場合

ページ内ジャンプ機能を使う場合、classでは実現できないのでidを使います。

一意に設定できる箇所に使う

ヘッダー、コンテンツ、サイドバー、フッターなどのページセクションは基本的にページ内に一つしかありません。 こういったものはidを振ってやった方が分かりやすくなります。

共通部をクラスでまとめ、idでスタイルを上書きする

idがclassよりも優先されるCSSの仕様を利用した手法です。

ウェブページはページによってある程度レイアウトに幅がありますが、しかし似通っている部分が多いです。 基準スタイルをclassで書いて、各ページの特徴となる部分はidで書いてやればCSSを圧縮することができます。

セレクタのマッチング処理はidの方が早い

jQueryなどでセレクタのマッチング処理を行う場合、idを指定した方が速度が速くなります。 これはid指定であればページ内で見つかればそこで処理が終わるのに対し、class指定だと最後まで走査しなければならないためです。

HTMLとCSSのみで構築する場合はあまり関係ありませんが、これも頭の隅に入れておきましょう。