HTML idとclassを間違いなく使い分けるために理解しておくべきこと

HTMLで要素をマークアップするときに指定する方法に「id」や「class」の属性をつけて指定する方法があります。

HTML側で指定したidとclass属性の値はCSSのセレクタに使われる部分になるので、ただ要素に属性を指定するだけではなくて、使い分けるための理解をしておきたい。

今までclass指定しだしたら、ずっとclassばかり使うって変なクセがついてるのでidとclassの使い分けを間違いなく指定できるように必要な知識を理解しておこうと思います。

HTMLのidとclassは何が違うのか

HTMLのidとclassは要素の属性として使いますが、この2つの属性は何が違うのだろうか？どちらでもスタイルはあてられるのだからいいのではないか？と思っていましたが、それでは後々に困ることになるのですね。

HTMLにおけるidとclassの違いは、意味も違えば使い分け方も違います。まずidとclassの大枠をぼんやりとでもいいので理解します。

というようなidとclassの違いなのですが、HTMLに関わり始めたばかりだと、この説明では意味が理解できない。検索すればどこにでも書いてある説明ですが私が初心者の頃は全く理解できませんでした。

それなのでidとclassの違いを理解して間違いなく使い分けるためには、idとclassを別々に知ることで見えてくることがありました。

idとは要素を識別するための固有のID名

HTMLの要素に指定するidは、id属性なので属性値も記述します。

このときの属性値がid名になります。上のサンプルのHTMLならhogeがid属性の属性値です。

そして上記で登場した属性値のhogeは「固有のid名」で一意でなければいけないのです。

一つの要素に固定して指定するidが一意(一つの意味)を持つ指定になるのですね。

そもそもidとは識別子として使われます。何か一つのものを識別するためにid名をつけおく名札のようなもので、その一つだけを特定することができます。

たとえばマイナンバーカードが登録してる人の情報を特定できるのもidの識別子なのだと思います。これをHTML要素に置き換えてみると理解しやすくなるかもしれませんね。

classとは分類や区別をするためのもの

HTMLのclassは何か一つだけにしか指定できないid指定とは違い、複数のHTML要素を「分類」「区別」するためのものです。

<div>　
	<p class="hoge">hogeあり</p>　
	<p>hogeなしの</p>　
	<p class="hoge">hogeあり</p>
</div>

.hoge {
    color: pink
}

HTML側で3つあるp要素の2つだけに対してCSSでカラーをピンクで適用したい。という極端な例ですが、class属性の値をhogeとして、pの2つだけの要素にclass属性hogeを指定することで2つのp要素はhogeクラスに分類されています。

pタグだけの要素は。たとえclassの間に挟まれていてもhoge指定がないので分類されず区別されるのですね。

という感じでHTMLのid指定ではできない使い方をして要素を分類したり区別することができるのがHTMLのclass指定です。

idとclassの役割で違いを理解する

ここではHTMLのidとclassを役割分担してみようかと思います。

idは先述の説明のように要素を識別するための固有のid名を指定する識別子となる指定ができます。

そのためHTML要素に関連付けする何かとid指定した要素を1対1の関係で使うためにピッタリなのがidの役割です。

たとえば、HTMLでラジオボタンを複数作成するときにidとlabelを関連させることがあります。このときに複数のlabelの一つずつに対してidも一つずつ固有に記述する必要があります。

もっと簡単な役割なら、同じページ内のある要素から要素までジャンプするためにidを識別してスクロールさせるようにidは役割を果たしてくれます。。ブログの目次もid指定で見出しまでジャンプしますね。

idはピンポイントで指定する役割です。

そしてclassの役割はというと、CSSでスタイルを適用するときの役割が大きいいです。

class指定は複数の要素を分類することができるのが特徴なため、スタイルを適用するときに柔軟な指定で適用ができます。複数ある同じHTMLの要素が存在しても区別して指定ができるので、スタイル担当にピッタリです。

直球勝負なidに対してclassは柔軟なのだという違いからなのか、自然とCSSではclassを使うことが多くなるのですね。

HTMLのidとclassを間違いなく使い分ける

直球勝負しかできないid、いつも柔軟な対応をするclass。

2つの属性指定するときに間違いなく使い分けできるようにするためにはCSSのセレクタにする前のHTMLの書き方も理解しておきたいことです。

HTMLの書き方の時点でCSSの適用される優先順位が使い分けられていれば、スムーズになります。

HTMLの書き方を理解する

CSSのセレクタにするときを考えてHTMLの書き方を理解するようにしたい。

そのためのHTMLでidとclassの書き方です。「それは知ってるよ」ってこともありますが復習を兼ねて。

HTMLで使うidとclassの違いを活かしてHTMLを書くならid属性はHTML構造の骨組みをid指定で目印にします。

idで指定

上記のようにHTML構造、骨組み部分はid属性で指定するようにします。この指定方法は調べて覚えたのですが、確かに骨組みは1ページ内に何度も使用するものでもないので固有の要素にするのもベストだと思いました。

idで指定することを何故か苦手としてきた私としても、これからはHTMLで自信を持って取り入れて行く気になれたのです。

そしてclassはHTML構造の中の骨組み以外の要素に指定します。

コンテンツのdiv要素に

<div class=”hoge”></div>

とかp要素に

<p class=”geho”></p>

のように属性と値を指定して、idを使った骨組みも加えてあげると

<div id=“main”>　
	<h2>見出し</h2>　
	<div class=”hoge”>ほげ</div>　
	<p class=”geho”>げほ</p>
</div>

単純な構造ですが上記の書き方になるわけです。このときのidとclassを間違いなく使い分けるためにはスタイルを適用するときのid対classの優先順位の理解が必要です。

idとclassの優先順位も理解が必要

HTMLで要素にidやclass属性を指定したら、cssでセレクタとして使います。

そしてセレクタ指定でidセレクタやclassセレクタにはスタイルが適用される優先順位があります。

優先順位は主にcss側で関係することが多いですが、HTMLでマークアップする段階でスタイルを適用するときの優先順位を間違えないように理解できていれば、スタイルしたデザインが表示できないとうことを減らせます。

スタイル適用の優先順位は、たとえば以下のようなHTMLを書いたとします。

divのボックスの中にp要素を用意してid=”hoge”とclass=”geho”を書いたHTMLです。このHTMLに対してCSSのセレクタを書きます。

CSSをブラウザは上から下に読み込みをします。そのため上記のpセレクタで適用させたい背景カラーは下のブルーが適用されます。これがタイプセレクタでスタイルを適用した優先順位です。

このことを頭に入れつつ先ほどのidのhogeとclassのgehoでスタイル適用の優先順位を競ってもらいます。

タイプセレクタのときと同じなら、下でclass属性で指定している値の.gehoのセレクタの背景カラー「ブルー」になるのですが、idとclassセレクタでは違います。

HTMLでid属性の値をセレクタにした#hogeの背景カラー「レッド」が適用されます。

idとclassがCSSで被ってるパターンは、スタイル適用の優先順位がclassよりもidで指定したスタイルが優先される。そして上から下に読み込みをするのも、おかまいなしに優先される。

もしidとclassのスタイルの優先順位の理解不足のために、id指定ばかりでHTMLを記述してしまうとclassよりも優先順位が上なので、後々になってclass属性でスタイルの追加をする時にCSSが効かないというハプニングが出る。

それをHTMLを書く段階で間違いないように使い分けをできるようにidとclassの優先順位を意識することも必要なのですね。

まとめ

HTMLのidとclassを間違いなく使い分けるために理解してみました。

今回で使い分けする意味を知り、今まで思っていた「どちらで指定してもスタイルが反映すればいいや」というチャラい気持ちが消え去り少しだけ前進できるかと思えもしました。