HTMLやCSSを学び始めると必ず出てくる「class」と「id」。
でも「どう違うの？」「いつどっちを使えばいいの？」と迷う方も多いですよね。
この記事では、初心者でも一瞬で理解できるように、ボタンの具体例を使って「class」と「id」の違いをめちゃくちゃ分かりやすく解説します。
これを読めば、Web制作の基礎でつまずかなくなります！
classとidって何？どう違うの？
HTMLやCSSを学び始めると必ず出てくるのが「class」と「id」。
でも、「どう違うの？」「いつどっちを使えばいいの？」 と迷う初心者は多いです。
この記事では、具体的なボタンの例を使って、初心者でも一瞬で理解できるように「class」と「id」の違いをめちゃくちゃ分かりやすく解説します。
👉 先に「HTMLの基本要素」について知りたい方は、こちらの記事をどうぞ。
・【HTML入門】要素とは？ブロック要素とインライン要素の違いを初心者向けに徹底解説！
class（クラス）とは？
**class（クラス）**は、複数の要素に同じスタイルを適用したいときに使います。
たとえば、ボタンが６つあります。
例：赤いボタン３つ、緑のボタン３つにスタイルを分けたい場合、
赤いボタン３つと緑のボタン３つに分けます。この場合、複数のものに同じスタイルを適用したい時にあたるので、classを使います。
赤いボタンにはclass名に ” red-btn “
緑のボタンにはclass名に ” green-btn “ というふうに、class名に色を入れてあげると分かりやすくなります。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
と指定すれば、それぞれの色に応じてCSSをあてられます。
👉 詳しい使い方はこちらで解説しています：
・class の使い方はこちらから→HTMLのclassの使い方！を分かりやすく解説！
では、次のような場合はどうでしょう？
赤いボタンは複数あるのでclassを使うのは分かると思います。
黄のボタンと緑のボタンはそれぞれ１つですが、この場合もclassを使います。
「複数のものに同じスタイルを適用したい時」この同じスタイルを指すのはボタンであって、色ではありません。
なので、
赤いボタンにはclass名に ” red-btn “
黄のボタンにはclass名に ” yello-btn “
緑のボタンにはclass名に ” green-btn “ として区別をしてあげます。
id（アイディー）とは？
id（アイディー）は、ページ内で1つだけの特別な要素に使います。
例えば「特別なボタン」だけ違う見た目にしたいとき：
👉 idは1ページ内で重複してはいけません。
classとidの違いを表で整理
| 項目 | class（クラス） | id（アイディー） |
|---|---|---|
| 用途 | 複数の要素に共通スタイルを適用 | 1つだけの特別な要素に適用 |
| 使用数 | 複数OK | 1ページに1つだけ |
| 実例 | ボタンの色分け、リストの装飾 | ナビゲーションの固定要素、特別ボタン |
👉 よくある質問
- 「ボタンが1つしかないけど、classでいいの？」 → はい、classで問題ありません。（共通の性質を持たせる考え方だから）
どっちを使えばいいの？初心者へのおすすめ
結論：
- 複数に使うなら class
- 1つだけの特別なものなら id
ただし、基本的には classを優先して使う のがおすすめです。
理由は以下の通り：
- CSSやJavaScriptの再利用性が高い
- idを多用すると管理が難しくなる
👉 関連記事
Summary
- class：複数の要素に同じスタイルをつけたいとき
- id：1つだけの特別な要素につけたいとき
- 初心者は 基本的にclassを使い、特別な場合だけidを使う のがおすすめ
この記事を理解すれば、HTMLとCSSの基礎で迷わなくなります。
👉 読むと理解が深まります：
Comments