【HTML/CSS】クラスとIDの使い分け方、違い

ウェブサイトの見た目は通常、HTMLにCSSのファイルを読み込んで、タグやclassやidによる指定で装飾を施して成り立っています。

HTMLで構造を記述
CSSで装飾を指定

という具合。

その際に、classとidはどう違って、どう使い分けるべきなのか。

Webデザイン勉強中の方が迷うところだと思うので、解説したいと思います。

classとidの違い、使い分け方

classとidの違いと使い分け方について、それぞれ詳しく見ていきましょう。

同じ名前のidはページ内に１つだけ

idは特定の要素に対して、他の要素のid名と重複しない名前でつけられます。

これによってページ内にそのidの要素は1つだけになるので、HTMLでページ内リンクとして使われたりもします。

ラジオボタンやチェックボックスなどでlabelタグとidで紐付けて連動させたりすることもあります。

また、JavaScriptで要素を取得する際に直接指定出来るなど様々な使い所があります。

classは同じ名前で何度も使いまわせる

特定の要素のみに適用するidと異なり、classは同じ名前のものを何度でも繰り返し使い回せます。

また、1つの要素に複数のclassを適用出来ます。

これによって文字の装飾だけを変えるclassや、背景だけのclassなど、使い勝手の良いclassを作ってサイトを効率よく装飾しやすくなります。

BootstrapなどのCSS フレームワークと呼ばれるものは、使い勝手の良いclassをあらかじめ用意してくれてる便利なものです。

classは同じ名前のものがページ内に複数存在し得るので、完全に1つの要素だけを特定しようとすると、他のタグなどのセレクタと組み合わせて指定する必要がある場合がほとんどです。

まとめるとidは識別名、classは分類名

それぞれの使える回数の違いから、役割として

idは特定の要素を識別する名前
classは要素を分類する名前

といえるかと思います。

CSSのセレクタの優先順位

cssには優先順位というものがあります。

指定したはずの装飾がうまく反映されない時なんかはだいたいこの優先順位が原因です。

基本的には

｢よりタグに近い、より後から読み込まれたスタイルが優先される｣

スタイルの優先順位－CSSの基本

とされています。

さらに詳しくいうと優先順位の点数というものが存在します。

そして、classよりid指定の方がその優先順位の点数が高くなります。

CSSセレクタの優先順位の計算方法 - Qiita

CSSの命名規則の原則に従う

仕事でチーム制作などされるような現場ではclass名にばらつきが出ないよう一般的に普及している命名規則というものがあります。

BEM (Block Element Modifier)
OOCSS (Object Oriented CSS)
SMACSS (Scalable and Modular Architecture for CSS)

これらは命名規則、つまり名前つけのルールですが、基本的にclassを用いる事を原則としています。

理由として

「詳細度が上がり、スタイルを上書きするのが難しくなる、ページ内に1つしか使用出来ないためCSSのモジュール化に向かない」

BEM(MindBEMding)によるCSS設計

styleguide/how-to-bem.md at master · manabuyasuda/styleguide · GitHub

などとされています。

先ほどの優先順位を理由としているわけですね。

idを使ってCSSで装飾していくと優先度の順位つけがどんどん頭打ちになってしまいます。

最終的に｢!important｣を多用してしまう羽目になったりしないようなるべくclassで装飾していきましょうということです。