id属性とclass属性

iwaimさまよりCSS Nite Vol.3に寄せていただいたご質問にお答えしたいと思います。

id 属性と class 属性はまったく別の性質を持つ属性なので使い分けが必要です。木達さんが考える使い分けの指針のようなものがあれば教えてください。

使い分けを行う前提として、id属性とclass属性のどちらも利用できる場面、すなわちスタイルシートのセレクタとしてid属性とclass属性のいずれかが必要な場面を想定します。なぜなら、たとえばハイパーリンクを生成するという目的に限定してしまうと、選択の余地なくid属性を使うことになるからです。

仕様書に示されているように、id属性はある要素に固有の識別子を付与する一方、class属性は複数の値を付与することができます。これを活かすよう、あるプレゼンテーションを一括して指定するのではなく、モジュール化して実装していた場合には、必然的にclass属性を用いることになります。

たとえば、スタイルシートで前景色を「赤く」指定するのと文字を「太く」指定するのを、別個のclass属性値と異なる規則集合で記述しておくことで、文字を「赤く太く」するのに新たな規則集合を用意することなく、既存のclass属性値の組み合わせだけで対応することができるようになります（これはあくまでも例え話であって、すべての場面に有効とは限りません）。

またclass属性では、複数の要素間で値を共有することが可能です。たとえば、同じ位置づけの情報が複数併存しているなかで、その最後に登場する情報に対し特定のプレゼンテーションを適用するニーズは少なからずあります。そのようなとき、個々の情報がどの要素でマークアップされていようと、同じ「lastItem」という名前を付与しておくことで、「最後に登場する」という属性を（要素を問わず）使いまわすことができます。

スタイルシートを記述するうえでの指針とも絡むため、一義的に使い分けの方針を明確化することは難しいのですが、以上をまとめますと、共通の属性に基づいて文書内の情報をグループ化する必要がある/したほうが良い場合にclass属性を、それ以外の場合にはid属性を用いることになります。実際には他の規則集合におけるセレクタの詳細度（specificity）の高低との兼ね合い等も考慮しなければなりませんが、概ねそのような使い分けをしています。

HTML 文書の body 要素の内容には、ヘッダーやフッターと呼ばれるような領域が存在することが多いと考えます。このとき「 header 」や「 footer 」と名前を振ることになりますが、これは id でしょうか? それとも class なのでしょうか?

最初のご質問と同様、スタイルシートのセレクタとしてid属性とclass属性のいずれかが必要との前提のうえでお答えします。

上述のとおり、class属性を用いることが多いのは共通の属性に基づいて文書内の情報をグループ化する必要がある/したほうが良い場合です。従い、文書作成者が呼ぶところのヘッダーやフッターといった領域が、文書中にそれぞれ複数併存するような特殊な場合を除き、id属性を用いることになります。

ただしもちろん、この使い分けが絶対的な解というわけではありません。文書内に存在する情報が構成するコンテキストに依存する問題ですし、文書作成者の定義次第かと思います。

HTML に存在する要素では、あらゆる文書の論理構造を表現するためには力不足であることは否めません。そのため、論理構造を明確化するために必然的に class や id を付与することとなります。
一方、効果的なプレゼンテーションを実現するために、スタイルシートやスクリプトのために class や id を付与せざるを得ないという現実があります。
このとき、HTML 文書内には、スタイルシートやスクリプトでは用いない id や class が存在します。最終的な成果物では、これらの一見不要である id や class は残しておくべきでしょうか。それとも、転送量削減のために削除した方がよいのでしょうか。

論理構造を明確化するという理由がある以上、それを転送量削減のために削除してしまう必要性は低いと思います。たとえば、microformatsを実装した場合、その仕様上必要とされるclass属性値は必ずしもスタイルシートのセレクタやスクリプトからの制御に用いるとは限りませんが、しかしユーザエージェントによる適切な処理を期待することはできます。ですから、たとえスタイルシートやスクリプトで利用しないid属性やclass属性であっても、それを付与するに足る十分な理由があれば、積極的に残しておくべきと考えます。

コメント

id は　identity　の略であるので
class　は　クラス　かな？

英語本来の意味頭に入れとけば
使い分け、応用が簡単になるはず

soさま、コメントありがとうございます。W3Cの仕様書が英語で記述されており、またそのなかで定義されている要素や属性も英語に基づいていますから、ご指摘の点は仰るとおりかと思います。