HTMLのid属性とclass属性の正しい使用方法を教えます
2014/08/14
HTMLの基本的文法に慣れてくると今度はCSSを活用し、デザインに凝りたくなるものです。
そこで登場するのがHTMLのid属性とclass属性です。これらの属性を指定することでHTMLとCSSを関連付けることができるのはご存知ですよね。知らなくてもその辺りの知識はある前提で話を進めていきます。ご了承ください。
この記事の目次
同一idは必ずページ内に一つだけ。重複してはならない
id属性とclass属性の一番の違いは、id属性には同一ページ内で一箇所にしか使用してはならないという制限があり、class属性は無制限に使用することができるということです。
「それでは無制限に指定可能なclass属性だけを使えばいいのでは？」という疑問が浮かぶかと思います。そこで重要になってくるのが本記事の主題である「id属性とclass属性の正しい使用方法」です。id属性とclass属性の正しい使用方法はその単語の意味を考えればおのず分かってきます。
余談ですが、最近はブログを活用する人が増えたためあまり見なくなりましたが、以前はidの重複するサイトが山のようにありましたね。酷いのはプロが作った企業サイトでもそういったケースが珍しくなかったことです。長いこと仕事をしていると他の制作会社が作ったサイトを改修する機会があるわけですが、そういった酷いサイトに出遭うとメンタルが擦り切れます（笑）
一つしか存在しないものに闇雲にidを指定すればよいわけではない
idはidentityの略で「本人であること」を表します。つまり要素を特定する為のものなので1箇所にしか使ってはいけないのです。
classは種類や分類を意味します。例えばAグループ、Bグループというものがありますよね。これは種類・分類です。Aグループには1人が所属し、Bグループには4人が所属するようなケースが想定されます。これはつまり、同一のclassはHTML上に1つだけ存在する場合もあれば、複数存在する場合もあるということです。
よく初心者にありがちなのが「この要素は一箇所にしかないからidを付けよう」という考えです。どの程度の頻度でidを指定するかはその人のさじ加減にもよりますが、基本的にはidの指定は要素を特定しなければならない場合に限定したほうがよいでしょう。その理由は以下のとおりです。
- idは一意なものだから同一ページ内で使いまわせない（非効率）
- 使いまわせないので多くの名前を考える手間が増える（英単語に慣れていない人は適切な名前を辞書で引く手間もありますね）。
- やたらとidを指定するとソースコードが読みにくくなる（メンテナンス性の低下）
- 数が増えると知らぬ間にidが競合するリスク（特にJavaScriptで不具合を生じる可能性が高まる）。
といった感じです。
とにかく、「一つかそれ以上か」でidを指定するか、classを指定するかの判断をしてしまっている初心者が多い気がします。それは間違いです。idは「個々を特定したい場合」に利用するようにしましょう。
id、class指定の定石を知り、効率の良いコーディングを心がける
HTMLやCSSの設計には個人差があるので、あくまで私の理想になりますが以下のような設計が優れていると思います。
- idもclassも指定せずに済む箇所は何も指定しない
- スタイルの適用が必要な箇所はclassを指定する
- header、footerなど明らかにページ内に一つだけしか存在しない要素、ページ内リンクやプログラム制御で必要な箇所にはidを指定する
こんな感じでしょうか。
また、idとclassを両方指定することも珍しくありません。class側で汎用的なスタイルを指定し、id側でその要素ならではのスタイルを指定するといった具合です。そのほうが効率、メンテナンスといった側面でも有効です。
あとは、idはclassよりもスタイルが適用される優先度が高いので、最初からidでガチガチにスタイル設定してしまうと、あとからclassでスタイルを調整したい場合に色々と不都合が出てきます。そういう側面でも最初はclassで緩くスタイル設定するのが吉です。
id、classの命名のベストプラクティス
また、idやclassを指定する際、誰もが一度は悩むのが「命名」です。ある程度経験を積めば「こういうケースはこういう名前をつける」という感覚が身に付きますが、慣れるまでは名前を考えるの余計な時間を浪費してしまいます。
命名のルールは特別決まっているわけではなく、下記の要件を満たせば自由に指定可能です。
- 使用可能な文字は英字、数字、ハイフン、アンダーバー
- 一文字目は英字である必要がある
例えば、極端な話idやclassを「a」という名前にすることも可能です。いい加減な名前でも一意であること、もしくは種類・分類を示すことが出来れば一応正しいことになります。しかし、そうすることはオススメできません。意味の無い名称はあとから見て何を意味するか分からなくなりメンテナンス性が著しく低下するからです。
idやclassにはその要素がどういう役割を持っているか分かる名前をつけましょう。例えば以下のようなものがあります。
- header
- footer
- gnav（global-navi）
- lnav（local-nav）
- contents
- sub-contents
こんな感じですね。gnavなど一般的に省略されることが多いケースを除き、基本省略はしません。何故なら他の人が見て意味が分からない可能性があるからです。これは仕事では大きな問題になります。私の場合は単語の間をハイフンで区切る形式をよく採用しています。
上記では文書の構造に着目して命名していますが、視覚に着目した命名も可能です。例えば以下のようなものがあります。
- red（フォント色を赤に指定）
- bg-red（背景色を赤に指定）
- margin10（マージンを10pxあける）
こんな感じです。XHTMLが主流だった頃は文書とスタイルを分離させることを強く言われていたので、視覚的な情報をそのまま名前にしてしまうことはあまり好ましくないのですが、どのように運用するかによってそのあたりのルールは大きく変わってきます。
ちなみにclassは以下のようにスペースで区切ると複数適用することが可能です。重要な部分なので覚えましょう。
<div class="red margin10">テキストテキスト</a>
まとめ
あれこれ書きましたが、まとめると最低限のルールを守れば自由に指定して問題ないということです。大切なのは運用が容易に出来るように設計・構築することです。また、チームで作業をする際は周りのルールに沿って作業をしましょう。 Webの分野はまだ成長途中ですから正解はありません。切磋琢磨して知識・技術を身につけましょう。