HTMLで使うidとclassの違い

HTMLのidとclass

HTMLで要素にスタイルを適用したり、JavaScriptで操作したりするときに使う id と class。
この2つにはそれぞれ異なるルールや使い方があります。本記事では、id と class の違いについて解説します。

---

それぞれの特徴

id の特徴

• 同じ名前の id は一つのHTMLファイル内で1回しか使えない
• 1つのタグに複数の id を指定することはできない
• CSSで id を指定するときは #id名 の形式で書く

classの特徴

• 同じ名前のclassを一つのファイルにいくつも指定できる
• 一つのタグの中で半角スペースで区切れば複数のクラス名を指定できる

役割

idとclassの役割の違いとしては、classは学校でいうクラス名でidは学籍番号のような感じでclassは特定のグループを指定し、idは個別で指定するような感じ。

優先度や処理速度

優先度や処理速度はどちらもidの方が高い。処理速度に関しては、classはほかの同じ名前のタグがある可能性もあるため他のタグも調べなくてはいけない。

使い分け

ページ内リンクを使う場合はid

aタグのリンク先でidを使って指定することができる。

CSSで指定する場合はclass

classは後から名前などを変えることができ、汎用性が高い。

一度しか使わない場合はid

ヘッダーやフッターなどどのページにも共通して使うものや一度しか使わない場合は一つしか指定することのできないidの方が便利。