【第11回】クラスとIDを使ってみよう｜CSS初心者ノート

🏷 クラス（.class）とは？

同じデザインを複数の要素にまとめて適用したいときに使うのが .class です。

<p class="note">これは注意書きです。</p>
<p class="note">もう一つの注意書きです。</p>

.note {
  color: #d63384;
  font-weight: bold;
}

👉 .note の指定で、どちらの <p> にも同じスタイルが当たります。

💡 1つのクラスを複数の要素に使い回せるのが特徴です。

---

🆔 ID（#id）とは？

ページ内で1つだけ特定の要素にスタイルを当てたいときに使います。

<h2 id="main-title">メインタイトル</h2>

#main-title {
  color: #007bff;
  text-align: center;
}

👉 IDは「唯一のもの」に使うのが原則。
同じページで同じIDを2回使うのはNGです🚫

---

🧩 クラスとIDの違い

比較項目	クラス（.class）	ID（#id）
使用数	複数の要素に使える	1ページに1回だけ
優先度	低め	高め（上書きされにくい）
主な用途	同じデザインの複数要素に使う	特定の見出しや要素を指定

💡 基本ルール：繰り返し使うなら class、一度きりなら id。

---

💻 実際のコード例

HTML部分：

<h2 id="main-title">クラスとIDの例</h2>

<p class="note">これはクラス（.note）の段落です。</p>
<p class="note">同じクラスを複数の要素に使っています。</p>
<p id="special">これはID（#special）を使った段落です。</p>

CSS部分：

#main-title {
  color: #007bff;
  text-align: center;
}

.note {
  color: #d63384;
  font-weight: bold;
}

#special {
  color: #198754;
  background-color: #eaf9f0;
  padding: 8px;
  border-radius: 6px;
}

---

👀 実際の表示結果

青いタイトルが中央に表示され、
ピンク色の文字が「note」クラスとして2つの段落に、
緑の背景を持つ「special」IDの段落が1つ表示されます🌿

---

⚠️ よくあるミスと注意点

• 同じページで 同じIDを2回使わない
• #id の方が優先度が高いので、
  同じプロパティを .class と両方に指定すると #id が勝つ
• JavaScriptなどでも id は「一意識別子」として使われるため、重複はトラブルのもと

---

✅ ポイントまとめ

🏷 クラス → 複数の要素に使い回せる
🆔 ID → ページ内で1つだけ使う
💡 基本ルール：「classは何度でも、idは一度だけ」

---

HTMLやCSSの基礎をもっと学びたい方におすすめ👇

---

📌 次回予告

【第12回】文字装飾を使ってみよう
→ font-weight / text-decoration / color を使って、
文字の強調やリンク風デザインを作ってみます✨

---

🔖 この回で出てきたプロパティ

#class #id #selector