idとclassの使い分け

idとclassの違い

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

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

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

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

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

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

実行結果

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

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

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

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

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

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

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

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

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

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

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

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