【HTML入門】idとclassの違いとは？使い分けや「併用」のルールを解説
HTMLを学習中に必ず迷うのが、id（アイディー）とclass（クラス）の使い分けです。
「どっちを使っても同じように見えるけど、何が違うの？」「両方一緒に書いてもいいの？」
そんな疑問を持つ方に向けて、違いや役割、現場での使い分けルールをわかりやすく解説します。
idとclassの違いが一目でわかる比較表
まずは、両者の特徴を整理した表を見てみましょう。最大の違いは「ページ内に1つだけか、いくつでもいいか」と「優先順位」です。
| 特徴 | id (アイディー) | class (クラス) |
|---|---|---|
| ページ内の数 | 1つだけ (重複不可) | 何個でもOK (重複可) |
| 1つのタグへの指定 | 1つしか指定できない | 複数指定できる (スペース区切り) |
| CSSの書き方 | # (シャープ) |
. (ドット) |
| 優先順位 (強さ) | 強い (classより優先される) | 弱い (idに負ける) |
| 主な用途 | ページ内リンク、JavaScriptの特定 | デザイン（CSS）の適用 |
id（アイディー）とは？
イメージ：マイナンバー、出席番号、パスポート番号
id は「Identifier（識別子）」の略です。その名の通り、「このページの中で、こいつは唯一無二の存在だ！」という要素に使います。
- ルール： 同じページ内で、同じ id 名を2回以上使ってはいけません。
- 主な使い道：
- ページ内リンク： 「トップへ戻る」ボタンなどのジャンプ先。
- JavaScript： 特定の要素をピンポイントで動かしたい時。
- 外枠のレイアウト： ヘッダーやフッターなど、ページに1つしかない大きな枠組み。
class（クラス）とは？
イメージ：部活動、性別、血液型
class は「Classification（分類）」の意味です。「同じデザインや特徴を、あちこちに適用したい！」というグループ分けに使います。
- ルール： 同じページ内で、何度使ってもOKです。
- メリット： 半角スペースで区切ることで、1つのタグに複数のクラスを持たせることができます。
(例：class="btn red-style") - 主な使い道：
- CSSでの装飾： 文字色を変える、ボタンのデザインを作るなど。
idとclassは「併用」してもいいの？
よくある検索キーワードに「id class 併用」がありますが、結論から言うと併用してもOKです。
1つのタグの中に、idとclassの両方を書くことができます。
実際のコード例
併用する場合の注意点
CSSでデザインを指定する際、idとclassで同じプロパティ（例えば文字色など）を指定した場合、idの設定が優先されます。
idは「優先順位」が非常に強いため、後からclassで上書きしようとしても変更できないことがあります。これを避けるため、デザイン（見た目）の指定にはなるべくidを使わず、classを使うのが一般的です。
初心者におすすめの使い分けルール
迷ったら、以下の基準で使い分けるのが一番スムーズです。
- CSS（デザイン）には
classを使う
使い回しができるし、修正もしやすいからです。 - JavaScript（動作）やリンクには
idを使う
「その場所」を確実に特定する必要があるからです。
まとめ
- id は「1人だけ」。ページ内リンクやJSのターゲットに使う。
- class は「グループ」。CSSのデザインには基本こちらを使う。
- 併用 も可能。ただしデザインの優先順位に注意する。
最初は「CSSを書くときはドット(.)のclass」、「JSを書くときはシャープ(#)のid」とざっくり覚えて書き始めてみましょう！
お困りごとはまずはご相談ください。パソコン・スマホ初期設定 / ツール導入・開発受付中