class id name 違い｜3つの判断基準で即決

はじめに｜この記事で得られること

HTMLを書いていて、
「これ…class？それとも id？」
と手が止まったこと、ありませんか？

私たちがWebエンジニアとして歩き始めた頃、
class・id・name はとにかく似て見えて混乱しがちです。

コードレビューで
「ここは id だね」
と指摘される未来を想像して、少し胃が痛くなる――。

この記事では、そんなモヤモヤを一緒に解消します。
HTML属性の基本から、現場で迷わない判断基準まで。
図解とフローを交えながら、順序立てて整理していきましょう。

（HTML/CSS設計や命名規則については『CSS命名規則を徹底比較！BEM・FLOCSS・Atomic CSSの選び方とは？』をご参照ください）

用語解説：HTML属性
HTMLタグに追加情報や機能を与えるための記述。classやid、nameなどが代表例。

用語解説：コードレビュー
他のエンジニアがソースコードを確認し、ミスや改善点を指摘する工程。

1. もう迷わない！class・id・name の使い分け

■ 先輩が指摘する「あるある間違い」

Webエンジニアになりたての頃、
コードレビューでこんな指摘を受けがちです。

特定要素だけ装飾したいのに…
idを使う場面でclassを使い、意図しない箇所までスタイルが適用される
JavaScriptで要素が取れない
idとclassの違いが曖昧で、DOM操作がうまく動かない
フォームが送信されない
name属性の指定漏れで、データがサーバーに届かない

どれも原因はシンプルです。
それぞれの役割を曖昧なまま使っていること。
まずは、属性ごとの役割を正しく整理しましょう。

用語解説：DOM（Document Object Model）
HTMLやXML文書をプログラムから操作できるようにした構造。JavaScriptで要素を取得・変更する際の基盤。

2. class 属性｜複数要素をまとめる目印

class は、
複数のHTML要素に共通のスタイルや動作を与えるための属性です。

イメージは「学校のクラス」。
同じ特徴を持つ要素を、ひとまとめに扱えます。

.button { color: blue; }

document.getElementsByClassName('button');

ボタン、カード、レイアウト調整など、
再利用したい部品には class が最適です。

（CSS設計や保守性・拡張性の考え方は『CSS設計で保守性と拡張性を高める方法｜BEM・OOCSS・SMACSS徹底比較』も参考になります）

用語解説：class属性
複数の要素に同じスタイルや動作を適用するための目印。CSSやJavaScriptで一括操作できる。

3. id 属性｜ページ内で唯一の識別子

id は、
HTMLドキュメント内で唯一の要素を識別するための属性です。

マイナンバーのように、
同じ値を複数の要素に使うことはできません。

#header { height: 60px; }

document.getElementById('header');

アンカーリンクや、
特定要素をピンポイントで操作したい場面で使います。

用語解説：id属性
ページ内で一意となる識別子。CSSやJavaScriptで特定の要素を直接指定・操作できる。

4. name 属性｜フォーム送信のためのキー

name は、
フォームデータをサーバーへ送るための識別名です。

送信時、
「どの値が・何という名前で」
渡されるかを決めています。

（フォーム送信やsubmitの仕組みについては『submit htmlとは？初心者向け送信エラー解説＆仕組み図解【完全ガイド】』をご参照ください）

<input type="text" name="email">

ラジオボタンやチェックボックスでは、
同じ name を持つ要素が1グループとして扱われます。

フォームでは、idよりも name が主役です。

用語解説：name属性
フォーム送信時に「どの値が何という名前で送られるか」を決めるための属性。サーバー側でデータを受け取る際のキーになる。

5. 判断基準まとめ｜どう選ぶ？

複数ある？再利用する？ → class
ページ内で唯一？ → id
フォーム送信が目的？ → name

この軸を持つだけで、
属性選びの迷いは一気に減ります。

6. モダン開発（Vue / React / Tailwind）での考え方

Vue.js や React などのモダン環境では、
class がスタイリングの中心になります。

Tailwind CSS では、
ユーティリティクラスを直接 class に書くのが基本です。

アンカーリンク
特定DOMへのアクセス

これらの用途では、id が限定的に使われます。

用語解説：ユーティリティクラス
Tailwind CSSなどで使われる、1つの機能やスタイルだけを持つ小さなclass。組み合わせて柔軟なデザインを実現。

用語解説：アンカーリンク
ページ内の特定位置へジャンプするためのリンク。id属性と組み合わせて使う。

用語解説：React / Vue.js
モダンなJavaScriptフレームワーク。UI構築や状態管理を効率化する。

7. アクセシビリティ・SEO・パフォーマンスの視点

アクセシビリティ
id と <label> を正しく紐付けることで、支援技術の理解を助けます。
SEO
class や id 自体は直接要因ではなく、意味のある構造が重要です。
パフォーマンス
セレクタの使いすぎは、CSS管理や描画性能に影響することがあります。

用語解説：アクセシビリティ
障害のある方も含め、誰もがWebを利用できるようにする考え方や技術。

用語解説：SEO（検索エンジン最適化）
Webサイトを検索結果で上位表示させるための施策。構造や意味付けが重要。

用語解説：セレクタ
CSSやJavaScriptで要素を指定するための記述方法。classやidなどを使う。