idとclassの使い分け

idとclassの使い分けに関するメモ

id=”ID“

特定の要素に固有の名前(識別子)をつけるための属性です。一つの文書中で複数の要素に同じ名前をつ けることはできません。また、a要素やform要素のname属性で名前をつけるときは、id属性と同じ値を指定しなければなりませ ん。id属性はHTML中で様々な役割を果たします。 

id属性が設定された要素に対しリンクすることができます。

<p id="MYID">…</p>

と、p要素に名前をつけておけば、<a href=”URI#MYID“> とすることでHTML中のp要素をリンク先にすることができます。

また、id属性はスタイルシートのセレクタになります。上記のp要素であればCSSを使いp#MYID { color: red; }と 指定し、デザインを変えることができます。

そのほか、スクリプトから特定の要素を参照する際などに利用されます。

class=”ク ラス“

特定の要素に分類上の名前をつけるための属性です。id属性とは異なり、一つの文書中で複数の要素に同じクラスを設定 することができます。また、スペースで区切って一つの要素に複数のクラスを設定できます。 

class属性は主にスタイルシートのセレクタとして利用されます。

<p class="MYCLASS">…</p>

と、指定しておけば、CSSでp.MYCLASS { font-weight: bold; }と するなどして、デザインを変更することができます。

id属性を与えるべき箇所は以下のような箇所でしょう。

* 文書全体に於けるヘッダやフッタの部分
* (文書に一つしかない)ナヴィゲーションバーや関連文書へのリンクリスト
* 各見出しへのフラグメント

この他、クライアントサイドスクリプトでの操作を前提としている要素や、クライアントサイドスクリプトが動作しない場合に必要な代替テキスト類などにid属性を与えると、スクリプトが書き易くなります。

idとclassの使い分け: http://wp.me/pE8Pi-ii

— MOTO-HAL Japan (@advernya) July 16, 2010