JavaScript | HTML / CSS 連携：CSS基礎－クラスセレクタ

JavaScript

2026.07.162026.07.17

クラスセレクタは「意味のグループに“共通の見た目”を当てるための仕組み」
クラスセレクタの基本構造と「HTMLとのペア関係」
1. CSS側：クラスセレクタの書き方
2. HTML側：class属性で「意味のラベル」を付ける
クラスセレクタの“本質的な役割”は「意味ごとのスタイルの共通化」
1. 「意味でグループを作る」感覚を持つ
複数クラスを組み合わせて「ベース＋バリエーション」を作る
1. HTML側：クラスを複数付ける
2. CSS側：クラスごとに役割を分ける
要素セレクタとの違い：「タグ」ではなく「意味」で選ぶ
1. 要素セレクタは「種類」、クラスセレクタは「意味」
JavaScriptとクラスセレクタ：「動き」と「見た目」をきれいに分ける武器になる
1. クラスを付けたり外したりして、CSSを“オン・オフ”する
初心者として「クラスセレクタ」で絶対に掴んでほしいこと

クラスセレクタは「意味のグループに“共通の見た目”を当てるための仕組み」

クラスセレクタは、 「このクラス名が付いている要素たちに、共通のスタイルを当てる」ためのCSSの“選び方”です。

CSS側では .（ドット）から始まり、

.highlight {
  background-color: yellow;
}

HTML側では class="..." で指定します。

<p class="highlight">ここだけ背景を黄色にしたい。</p>
<p>ここは普通の段落。</p>
<p class="highlight">ここも黄色にしたい。</p>

このとき、 .highlight セレクタは「class="highlight" が付いている要素全部」を選び、その要素たちに background-color: yellow; を適用します。

ポイントは、「タグの種類」ではなく「意味のラベル」でグループを作ること。 “この意味のものは、こういう見た目にする”をまとめて管理できるのがクラスセレクタです。

クラスセレクタの基本構造と「HTMLとのペア関係」

CSS側：クラスセレクタの書き方

.error {
  color: red;
  font-weight: bold;
}

.success {
  color: green;
}

ここでの .error と .success がクラスセレクタです。

.error → 「errorクラスが付いている要素全部」
.success → 「successクラスが付いている要素全部」

にスタイルを当てます。

HTML側：class属性で「意味のラベル」を付ける

<p class="error">エラーが発生しました。</p>
<p class="success">保存に成功しました。</p>
<p>これは普通のメッセージです。</p>

このとき、

class="error" → 赤くて太字
class="success" → 緑
classなし → デフォルトの見た目

になります。

ここで大事なのは、

HTMLは「これはエラー」「これは成功」という“意味”をラベルとして付ける役割で、 CSSは「その意味のものをどう見せるか」を決める役割だということです。

クラスセレクタの“本質的な役割”は「意味ごとのスタイルの共通化」

「意味でグループを作る」感覚を持つ

例えば、カード型のUIを作るとします。

<div class="card">
  <h2>タイトル</h2>
  <p>本文テキスト。</p>
</div>

<div class="card">
  <h2>別のタイトル</h2>
  <p>別の本文テキスト。</p>
</div>

CSS：

.card {
  border: 1px solid #ccc;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
}

ここで .card がやっているのは、

「カードという意味を持つ要素たち」
に対して「枠線・余白・角丸」という共通スタイルを当てる

ということです。

もしクラスを使わずに、毎回 style="..." を書いていたら、

<div style="border: 1px solid #ccc; padding: 12px; margin-bottom: 12px; border-radius: 4px;">
  ...
</div>

を何十回も書くことになります。変更したくなったら、全部書き換えです。

クラスセレクタなら、

HTML → class="card" とだけ書く
CSS → .card { ... } を1箇所で管理する

ので、 「意味ごとのスタイルをまとめて管理できる」わけです。

複数クラスを組み合わせて「ベース＋バリエーション」を作る

HTML側：クラスを複数付ける

<button class="btn primary">送信</button>
<button class="btn danger">削除</button>
<button class="btn">キャンセル</button>

ここでは、

btn → ボタンのベーススタイル
primary → 主要ボタンの見た目
danger → 危険な操作のボタンの見た目

という意味でクラスを付けています。

CSS側：クラスごとに役割を分ける

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: #fff;
}

.danger {
  background-color: #dc3545;
  color: #fff;
}

ここでの構造は、

.btn → 「ボタンっぽさ」を共通で定義
.primary → 「重要なボタン」の色だけ上書き
.danger → 「危険なボタン」の色だけ上書き

という「ベース＋バリエーション」のパターンです。

クラスセレクタは「意味のレイヤー」を重ねることができる。 ベースの意味（btn）と、役割の意味（primary/danger）を組み合わせて、 柔軟なデザインを作れる。

要素セレクタとの違い：「タグ」ではなく「意味」で選ぶ

要素セレクタは「種類」、クラスセレクタは「意味」

要素セレクタ：

p {
  font-size: 16px;
}

これは「すべての <p>」に当たります。タグの種類で選んでいるので、

「本文の段落」
「注意書きの段落」
「補足の段落」

など、意味の違いは区別できません。

クラスセレクタ：

p.note {
  color: #666;
  font-style: italic;
}

HTML：

<p>普通の段落。</p>
<p class="note">これは注釈です。</p>

この場合、

<p> → 普通の段落
<p class="note"> → 注釈としての段落

という「意味の違い」をクラスで表現し、 CSSでその意味ごとにスタイルを変えています。

クラスセレクタは「この要素は何のためのものか？」という意味を軸にスタイルを当てる。 これが、要素セレクタとの決定的な違いです。

JavaScriptとクラスセレクタ：「動き」と「見た目」をきれいに分ける武器になる

クラスを付けたり外したりして、CSSを“オン・オフ”する

HTML：

<button id="toggle">ハイライト切り替え</button>
<p id="text" class="message">このテキストをハイライトします。</p>

CSS：

.message {
  font-size: 16px;
}

.highlight {
  background-color: yellow;
}

JavaScript：

const button = document.querySelector("#toggle");
const text = document.querySelector("#text");

button.addEventListener("click", () => {
  text.classList.toggle("highlight");
});

const button = document.querySelector("#toggle");
const text = document.querySelector("#text");

button.addEventListener("click", () => {
  text.classList.toggle("highlight");
});