id属性とclass属性はいずれも要素に"名前"をつけますが、その違いが特に初心者の方には分かり難いようです。
本記事では、id属性とclass属性がどう違うのかについて、制作者なりに解説させていただきます。
id属性はその名の通りID、すなわちHTML文書内に高だか一つしか存在し得ない要素に与える識別名です。
文書中に存在したとしても絶対に二つ以上ある事はあり得ない要素に対して、その要素である事が明確に識別出来るようにするための属性と言えます。
そのため、以下のような使い道があります。
<a>要素などのhref属性でリンク先を指定出来ますが、その際にIDをフラグメント名(切片名)として文書内の特定の箇所を参照出来るようになります。
例えば、見出しなどにidを与える事で、文書内の特定の箇所のみを参照したい方はその見出しに与えられたIDをフラグメント名として参照出来るようになります。
ソフトコンタクトレンズを着けている堀北真希うさぎ<h2 id="ID_ATTR">id属性とは</h2> のセクションを参照したいなら href="http://www.marguerite.jp/Nihongo/WWW/Columns/IDvsClass.html#ID_ATTR" 属性を与えた<a>要素などで参照出来るようになります。JAVAスクリプトなど、クライアントサイドスクリプトで特定の要素を処理したい場合、それが文書中に高だか一箇所しか存在し得ない場合は、その要素に適切なIDを与えておけば、document.getElementById()メソッドで直ちにその要素を取り出す事が可能になります。
勿論、特定の要素の抽出方法は他にもいろいろありますが、現在のところこの方法が最も簡単な方法です。
CSSでも、IDをセレクタにする事が出来ます。
特定の一要素と言う事から、IDセレクタは外部スタイルシートや<style>要素で記述出来る最も強いセレクタとなっております。
id属性を与えるべき箇所は以下のような箇所でしょう。
この他、クライアントサイドスクリプトでの操作を前提としている要素や、クライアントサイドスクリプトが動作しない場合に必要な代替テキスト類などにid属性を与えると、スクリプトが書き易くなります。
蛇足ですが、クライアントサイドスクリプトが動作しない場合
とは、
などを指します。
一方、class属性は要素に与えるクラス名、すなわちその要素の"タイプ", "特徴"或いは"性格"を表わした名前です。
例えば、出典と定義されている<cite>要素はしばしば言及の有無に拘らず文書名や作品名などに適用されますが、その際に例えば以下のように当該内容が書籍とかウェブサイトなどと言った区別を付けられるようにclass属性を用いる事が出来ます。
<cite class="website">しらぎくさいと</cite><cite class="magazine">月刊明星平成○年○月号</cite>もう一つの例として、コンピュータが出力するテキスト例である<samp>要素について、正常な入力に対するレスポンス例と、不正な入力に対するエラーメッセージ例を区別したい場合には、それぞれに適切なクラス名を与えてやる事が可能です。
<p><kbd>5/2</kbd> と入力すると、<samp class="response">5÷2 の値は 2.5です。</samp> と答えが表示されます。</p><p>一方、<kbd>5/<em>0</em></kbd> と入力すると、<samp class="error">0で割る事はできません！</samp> と言うエラーメッセージが表示されます。</p>
適切なクラス名を与える事で、HTMLでの要素をどのように扱ったかを明示出来るようになります。
またクラス名は固有の識別名ではないので、文書中にいくつ同じクラス名の要素があっても全く問題はありません。
ですが、そのため、あっても一つしか存在し得ないと言う前提がないと使えない使い方は出来ません。
具体的には、以下のようになります。
文書中にいくつも存在し得るので、フラグメントとして指定しようとしてもどの要素か特定出来ません。
従ってフラグメントとして参照に使う事は出来ません。
文書中にいくつも存在し得るので、特定の一要素の抽出は不可能です。
勿論、getAttribute('class') メソッド(インターネットエクスプローラでは、getAttribute('className') メソッド)で要素ノードからクラス名を取得する事が出来ますので、それをチェックする事で特定のクラス名を持った要素をスクリプトでの処理対象とする事は可能です。
CSSでは、クラスセレクタが定義されているので、それを用いて特定のクラス名の要素に特定のスタイルを与える事が出来ます。
但し、特定の一要素と言うものではないため、クラスセレクタはIDセレクタほど強いセレクタではありません。
以上を纏めますと、
であり、従ってこの原則に則れば、どちらを使うべきかは明らかになるでしょう。
id属性とclass属性に関してありそうな誤解を挙げておきます。
勿論、そんな事はありません。
大まかな性格をclass属性として与え、文書中に於ける要素の識別名としてid属性を与えると言う事は全く問題はありません。
これも間違いです。
寧ろ、スタイルセレクタのための属性と言う考え方こそ問題があると思います。
と言うのも、好ましくないクラス名を与えるケースが散見するからです。
class属性には、複数のクラス名を半角空白で区切って列挙する事で、複数のクラス名を与える事が可能です。
例えば、<dfn>堀北真希</dfn> 要素に、actress と idol と my_favorite の三つのクラス名を与えたい場合には、
<dfn class="actress idol my_favorite">堀北真希</dfn>と記述します。
但し、複数のclass属性を一つの要素に加えてはいけません。上記の例で言えば、
<dfn class="actress" class="idol" class="my_favorite">堀北真希</dfn>としてはいけません。
一部のブラウザで一つの要素に複数クラス名を与えられた要素にスタイルを適用出来ないとか、同じ要素に複数のクラス名を与えたセレクタを認識出来ないと言うのはありますが、そもそもclass属性はCSSのための属性ではありません。
尚、id属性については現在のところ一つの要素に複数のIDを与える事は出来ません。
class属性の値はCDATA、すなわち任意の文字列と定義されており、従って仮名漢字なども利用する事が可能です。
或いは文字参照を用いてキーボードから打ち込めなかった文字を入れる事も可能です。
因みに、CSSでのセレクタとして日本語クラス名を用いる事は全く問題はありません。
また、スクリプトでもクラス名の評価には文字列定数を用いる筈ですので、こちらも殆ど問題はありません。
尚、id属性については、文書型に依り使える文字が異なります。id属性の値をご覧ください。
某大手サイトの質問コーナでの回答の中で、しらぎくのウェブサイト作成入門のある記事が挙げられていたのですが、その質問がclass属性とid属性の違いについてでした。
その記事を拝見して、やはりこの二つは区別が付き難い面があるのかなと思い、今回この記事を書いた次第です。
