【必修知識】id と class の違いと使い分け方の基本

アイキャッチ画像（id / classの違いと使い分け方）

いまやWEBページを構築する上において欠かせないHTMLとCSSではド定番の id属性 と class属性。

idもclassも任意の名称をつけて作り放題なので、CSSでスタイルをかける目印として非常に使い勝手が良いですよね。

しかし、HTML / CSS初心者の方が書いたページを見ると、idとclassの使い分け方が甘く、メンテナンスをしづらいことが多々あります。

idとclassの使い道には明確なルールと違いがあるので、まず基本をおさえてマスターしましょう。

結論からいえば、CSSによるデザインにはclassを使い、idは目印として使うとメンテナンスが非常に楽になります。

idとclassの違い

似ているようで非なるid属性とclass属性の最大の違いは、

  • id：ひとつのidはページ内で1度しか使えない。また、1要素に複数のidはつけられない。
  • class：ひとつのページ内で同じclassをいくつでも使える。また1要素に複数のclassをつけて良い。

点にあります。

idは複数使う＆複数付与がNG

同じidは同ページ内で二度使われてはいけないルールです。

下記がOK例とNG例。

<div id="firstID">OK：通常のid指定</div>

<div id="secondID thirdID">NG：ひとつの要素に複数、二つ以上のidを付与してはいけない</div>
<div id="firstID">NG：firstIDは1行目でもう使ったでしょおじいちゃん</div>

どうしてもidを複数つけたい場合は、下記のようにidをひとつずつつけた要素を入れ子にする方法もあります。

<div id="firstID">
<div id="secondID">
OKっちゃOK：入れ子にすれば実質的に複数のidをつけることは可能
</div>
</div>

しかし、classならひとつの要素に複数つけられるので、入れ子にしてまでidを使う必要がありません。

入れ子構造はCSSのデザイン上の挙動で細かい部分で気を遣う必要があるうえ、視認性・メンテナンス性も悪くなるデメリットがありオススメしません。

classは複数付与可能

<div class="firstCLASS">OK：通常のclass指定</div>
<div class="secondCLASS thirdCLASS">OK：半角スペースで区切ることでひとつの要素に複数のclassを指定可能</div>
<div class="firstCLASS">OK：何回でも同じclassを食べてもいいのよ、おじいちゃん</div>

classなら、idではできない同じページ内での複数回使用、ひとつの要素への複数class付与も全く問題なく可能です。

実際の例としてWordPressのメディア機能を使って挿入する画像には、classがこれでもかというほど付与されます。

idとclassの使い分け

結論から申し上げれば、CSSによるデザインにはclassを使い、idはスタイルには絡まないただの目印とする使い分け方がオススメ。

ひとつの要素にid属性とclass属性が同時に存在しても問題ないし、classはいくつあっても問題ありません。

反対にいえば特定のidと対で使う専用のclassがあってもいいわけです。

で、classでは代わりが効かずidが必要な具体例としては、下記が挙げられます。

idの主な使い方 1：JavaScriptをかける目印

たとえば、JavaScriptなどでひとつしかないはずの特定の要素を指定したい場合は、1ページに一度しか使えないidが安全で確実です。

JavaScript・jQueryなどでは要素を指定・取得するため、idやclassがセレクタとしてよく使われます。

JavaScriptならgetElementByIdメソッド / getElementsByClassNameメソッド、jQueryなら $(“#ID") / $(“.CLASS") など。

そこで、ひとつしかないはずの要素の指定にはページ内にひとつしかないはずのidを目印として設定すると安全なのです。

反対にclassで指定した場合、複数の要素が取得されてしまう可能性があります。

（というか、JavaScriptのclass取得メソッドは複数要素を取得する前提の仕様）

たとえいま現在はひとつしか存在しないclassでも、今後の更新によって同じページ内にもう一度登場する可能性もあります。

そうなるとJavaScriptが正常に動作しなくなる可能性大。

反対に、idは1ページに一度しか使えないため、複数の要素を全てまとめて指定・取得するためにつける使い方には対応できません。

なので、ひとつしかないはずの特定の要素をJavascriptなどで指定したい場合、目印としてIDを使う方が確実なのです。

idの主な使い方 2：ページ内リンクのアンカーとして

idはページ内リンクの座標としても機能します。

HTMLのルール上、ひとつのページに同じidは複数存在してはいけません。

反対にいえばidは1ページ上にひとつしか存在しないはずなので、特定の要素や場所を指定する目印として最適なのです。

使い方としては以下のようなイメージ。

<a href="#inPageLink">クリックで同じページ内のid属性inPageLinkが付与された場所に飛ぶ</a>
<a href="https://example.com/example.html#inPageLink">指定ページ内のid属性inPageLinkが付与された場所に飛ぶ</a>

昔のHTMLでは、name属性をページ内リンクの目印として使っていました。

が、いまはページ内リンクはname属性では動作しません。ページ内リンクにはid属性をお使いください。

CSSの詳細度（優先度）はclassよりもidの方が高い

HTMLやJavaScriptはさておき、CSSだけで考えればidもclassも同じように使えそうなものです。

しかし残念。CSS上でもidとclassには詳細度に大きな違いがあります。

詳細度とはCSSに存在する優先度のような仕様。idとclassでバッティングするスタイルを指定した場合、詳細度の高いidのスタイル指定が優先されるのです。

詳細度の例

下記HTMLではdivボックスに背景の色を緑にするidと背景の色を青にするclassの両方を指定しました。

片や緑にしろ、片や青にしろとする矛盾する指定ですが、実際どのように出力されるでしょう？

HTML / CSS

<div id="idGreen" class="crassBlue">緑になるか、青になるか？</div>
#idGreen{
     background: #ccffcc; /* 背景を緑に */
}
.classBlue{
     background: #ff0000; /* 背景を青に */
}

実際の描画出力

上記htmlとcssを実際に出力し描画させたのが下記。緑になるか、青になるか？

緑になるか、青になるか？

実際には緑色の背景で出力・描画されました。これはidの方がclassよりも詳細度が高いため。

あとに書かれたclass指定で上書きされるはず！ と思ったあなたは立派なプログラマー脳。

詳細度の仕様のため結果的には不正解でしたけれど、基本的なができていてうらやましい限りです。

詳細度の習性を利用し、classでのスタイル指定をidのスタイル指定で上書きする使い方もできます。

ただ、後述するようにidにはデザインのためのスタイル指定はせず、スタイル指定はclassで統一する方がオススメです。

ここまでを踏まえてオススメのidとclassの使い分け方

繰り返しにはなりますが、CSSによるスタイル指定はすべてclassで行い、idにはCSSスタイル指定をしないことをオススメします。

idにスタイル指定をするにしても、ヘッダー、フッターやカラム設定など滅多にほかのスタイルで上書きしない部分のみにとどめた方が良いでしょう。

基本的に詳細度ではclassがidを超えることはできないので、idにスタイルを詰め込むとあとでスタイル上書きでの変更が難しくなっていきます。

「 えっ、じゃあidが入った要素のデザインは？ 」と思うかもしれませんが、その要素にclassをつけてあげればいいだけ。

<div id="contents">このdivボックスのようにidだけつけてidにスタイルを指定するよりも</div>
<div id="content1" class="contents">idはただの目印でスタイルは指定せず、classでスタイルを指定した方がシンプルでメンテナンスも楽</div>

HTML上やCSS上でidとclassを取り違えたために指定したかったスタイルがきちんと反映されないケアレスミス防止策にもなります。

詳細度はidとclass以外にも、セレクタの種類や!important指定によっても変わるもの。

サイトの構造が大きく複雑になるほど詳細度によるスタイル指定とデザインのコントロール・レギュレーションがややこしくなります。

いずれにしても、CSSでスタイル指定する場合、idとclassの使い分けはなるべくシンプルにしておくことをオススメします。

まとめ：id と class の違いと使い分け方の基本

  • id と classの最大の違いは、ひとつのページで使える回数とひとつの要素に付与できる数。
  • id は一意のもので、ひとつのページ上に同じidは複数使えない。また、ひとつの要素にidはひとつしかつけられない。
  • classの使用数に制限はない。同じページ上に複数回使われても大丈夫。また、ひとつの要素に複数つけることも可能。
  • idは一意的の目印にするだけ、CSSによるデザイン設定はclass、などと使い分けると管理・メンテナンスが楽でオススメ。

製作上の細かいルールやレギュレーションは製作するチーム・プロジェクトごとに変わるかと思います。

が、そうしたルールやレギュレーションを決めるときはもちろん、WordPressブログなど個人でサイトを運営・カスタマイズするにおいてもidとclassの違いをきちんを理解しておかないと、のちのち後悔することに。

個人サイトレベルであまり細かくルール決めをする必要はありませんが、ある程度意識して使い分けることをオススメします。

本記事は姉妹サイトJillToneBlogより移植したコンテンツです。

HTML / CSSclass,CSS,HTML,id,コーディング