【必修知識】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要素に複数のidをつけて良い。

点にあります。

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

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

<div id="secondID thirdID">NG:ひとつの要素に複数、二つ以上のidを付与してはいけない</div>

<div id="firstID">NG:firstIDは1行目でもう使ったでしょおじいちゃん</div>

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

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

しかし実際に複数つけることで期待される効果とは挙動が違います。

指定できることに制限ができるので、ひとつの要素に複数付与できるclassを使うべきです。

classは複数付与可能

<div class="firstID">OK:通常のclass指定</div>

<div class="secondID thirdID">OK:半角スペースで区切ることでひとつの要素に複数のclassを指定可能</div>

<div class="firstID">OK:同じページ内で同じclassが何回使われても問題ない</div>

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

たとえばWordPressの画像だとclassがこれでもというほど付与されています。

idとclassの使い分け

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

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

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

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

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

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

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

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

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

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

昔はname属性をページ内リンクの目印として使っていましたが、現在はname属性では動作しません。

idの主な使い方 2:JavaScriptをかける目印

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

JavaScriptならgetElementByIdメソッドやgetElementsByClassNameメソッド、jQueryなら $(“#ID”) や $(“.CLASS”) といった具合。

たとえば、特定の要素をひとつだけを指定したい場合は一意の要素となるidが断然便利で安全です。

反対にclassで指定した場合、複数の要素が取得されてしまう可能性があります。(というか、JavaScriptではclass取得メソッドが複数取得する前提の仕様です)

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

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

反対に、特定のclassがついている複数の要素を全てまとめて指定・取得するためにclassをつける使い方はidでは対応できません。

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

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

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

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

詳細度の例

HTML

以下では背景の色を赤くするidと背景の色を青にするclassの両方を入れました。

あとに書かれた青で上書きされるのかと思うプログラマー脳な方もいらっしゃるかもしれません。

しかし実際にはより詳細度の高いidのidRedが優先され、divボックスの背景は赤で表示されます。

この習性を利用し、classによるスタイル指定をidのスタイル指定で上書きしてしまう使い方もできます。

<div id="idRed" class="crassBlue"></div>

CSS

#idRed{
     backgrond: #ff0000; /* 背景を赤に */
}

.classBlue{
     backgrond: #0000ff; /* 背景を青に */
}

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

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

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

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

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

<div id="contents">このdivボックスのようにidだけつけてidにスタイルを指定するよりも</div>
<div id="content1" class="contents">classでスタイルを指定し、idは必要なときにただの目印とした方がCSS構造がシンプルになり、メンテナンスが楽</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の違いをきちんを理解しておかないと、のちのち後悔することに。

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