HTML,CSSにおけるidの役割 | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

最近業務でHTML,CSSの知識が抜け落ちていることに気付いたので、その見直しに励んでいます。今回は、最近理解したことを復習代わりにここで共有しようと思います。

みなさんはidとclassの違いをしっかり理解できていますか？どちらでも組み込まれている名前じゃない任意の名前をつけれることから、結局CSSで指定するときにどっちを選んでもいいから役割が被っているように思いますよね。というか、idっていらないんじゃないのかとずっと思っていました。

idを使用する理由

①パフォーマンス

idセレクタは、classセレクタやタグセレクタよりもCSSとJavaScriptの両方で処理が速いです。これはブラウザがidを一意として扱い、最適化された検索アルゴリズムを使用するためです。id属性はHTMLドキュメント内で一意であることが期待されています。つまり、同じidを持つ複数の要素が存在することは仕様違反とされています。このため、ブラウザはidに基づいて要素を検索する際、見つかった時点で検索を停止できます。もし特定の要素としてclassで要素を作ってしまうと、ブラウザはclassを検索するときドキュメント全体を通して一致する要素をすべて見つける必要があり、非効率的です。

②文書内リンク

id属性は、ページ内の特定の位置に直接リンクするために使われます。例えば、”<a href="#section1">Section1</a>”はid="section1"を持つ要素へのリンクになります。これはclassでは実現できません。

まとめ
HTML要素がページ内で一意であり、特定の目的を持っている場合（例えば、ナビゲーションバー、フッター、メインコンテンツエリアなど）はidを使用して、CSSで共通のスタイルを複数の要素に適用する場合（例えば、ボタン、カード、タイトルなど）はclassを使用するとよいでしょう。