今さら人に聞けない「idとclassの使い分け」

5月もゴールデンウィークを過ぎてしまいましたが、この4月から新たな生活を始めた方もいらっしゃるのではないかと思います。「これからコーディングの仕事を始めるよ！」という方もいらっしゃるかもしれません。そこで、今回は、基本に立ち返って、idとclassの使い分けについて考えます。

idとclassの定義

id

この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。

class

この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

このように定義することが出来ます。
つまり、簡単に言うと、idはその文章中で一回のみ使うことができ、また同じclassは複数回使ってもよい、ということになります。

例えて言うならば、bodyを部屋、idを名札と考えます。一つの部屋に同じ名札を持つ人がいると、その人たちを呼ぶ時に混乱してしまいますね。それを避けるために、同じ部屋（body）の中では名札（id）は一回限りしか使えない、ということになります。

classについては、それぞれが一つのグループだと考えます。タグ要素にclassを付けると言うことは、そのタグ要素をグループ分けすると言うことです。つまり、「このタグ要素はこういう書式のグループである」ということを定義しているのです。

例えば、以下のようなHTMLがあったとします。

この場合、「普通の文字です」の部分は無グループなので、この要素の親要素の書式を受け継ぎます。「赤い文字です」「赤い文字その2です」は”red”のグループに入っています。「青い文字です」は”blue”のグループに入っています。
文章中、”blue”のグループは一つしか登場しませんが、今後グループが増える可能性があるので、idでは指定しません。

ここまでidとclassの違いについて説明してきましたが、ここまで読んで、「classは一つでも複数でも使えるなら、idを使う必要はないのではないか」とお思いになるかもしれません。
実はその通りであり、実際にclassのみを使用しても問題はありません。では、なぜidを使うのか。それは、「わかりやすさ」の面から使用するのではないでしょうか。
idとclassを分けることで、「大まかなレイアウトの部分」と「その他」で分類し、修正や変更をしやすくするという、メンテナンス性の向上が図れるのです。
例えば、レイアウトから文字の色まですべてclassで指定すると、レイアウト部分を修正しようとした時に、どこの要素でそのレイアウトを指定しているのか、探さなければなりません。
それを、「idで大まかなレイアウトを指定、classでそれ以外を指定」という風に使い分けることで、「レイアウトを指定しているのはidだから、ヘッダーのレイアウトを変更するのなら#headerを探せばいいな」というように、一見してメンテナンスのしやすさが大きく変わり、修正や変更の効率が上がります。加えて、コメントも併用するとさらにソースが見やすくなります。

ここでの「大まかなレイアウト」についての定義ですが、
＊複数ページで共通に存在し、そのページ内で一つだけのもの（ヘッダー・サイドバー・フッターなど）
＊それ以外で、そのページ内のレイアウトを形作るものというように定義します。

idとclassを上手く使い分けて、効率的なコーディングを心がけてみてください。