CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 複数クラス指定

Web APP CSS
スポンサーリンク

複数クラス指定を“正しく・美しく”使いこなす

複数クラス指定は、CSS の中でも 最も頻繁に使う基本テクニックです。
しかし、初心者ほど「どう組み合わせればいいのか」「どんな意味があるのか」で迷いがち。

ここでは、Webデザイナー兼CSS講師として、
CSS と Tailwind CSS の両方で、実務レベルの考え方をかみ砕いて解説します。

複数クラス指定の基本を理解する

HTML で複数クラスを指定する方法

<div class="card highlight large"></div>
HTML

クラスは 半角スペースで区切るだけ。
順番に意味はありません。

深掘り：複数クラスは「レイヤーを重ねる」イメージ

例えば…

  • .card → 基本デザイン
  • .highlight → 強調デザイン
  • .large → サイズ調整

このように 役割ごとにクラスを分けて重ねる と、
CSS が驚くほど整理されます。

Tailwind も同じ考え方で、
小さなユーティリティクラスを積み重ねてデザインを作るスタイルです。

<div class="p-4 bg-white shadow rounded-lg"></div>
HTML

CSS で複数クラスを組み合わせる

クラスを組み合わせて「特定の条件だけ」スタイルを当てる

.card.highlight {
  border: 2px solid orange;
}
CSS

これは .card かつ .highlight を持つ要素だけ に適用されます。

HTML

<div class="card highlight">強調カード</div>
<div class="card">通常カード</div>
HTML

Tailwind で複数クラスを組み合わせる

Tailwind は「クラスを組み合わせる」ことが前提の設計です。

<div class="p-4 bg-white shadow rounded-lg border-2 border-orange-400">
  強調カード
</div>
HTML

Tailwind では .card.highlight のような「複合クラス」は作らず、
必要な見た目をユーティリティクラスで直接書くのが基本です。

実務でよく使う複数クラス指定パターン

ベースクラス + バリエーションクラス

CSS版

.btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: bold;
}

.btn-primary {
  background: royalblue;
  color: white;
}

.btn-secondary {
  background: #eee;
  color: #333;
}
CSS

HTML

<button class="btn btn-primary">購入する</button>
<button class="btn btn-secondary">詳細を見る</button>
HTML

Tailwind版

<button class="px-4 py-2 rounded font-bold bg-blue-600 text-white">
  購入する
</button>

<button class="px-4 py-2 rounded font-bold bg-gray-200 text-gray-700">
  詳細を見る
</button>
HTML

Tailwind は「ベースクラス」を作らず、
ユーティリティを積み上げてバリエーションを作るスタイルです。

状態クラス（active, disabled など）と組み合わせる

CSS版

.button {
  background: #3182ce;
  color: white;
}

.button.disabled {
  background: #ccc;
  pointer-events: none;
}
CSS

HTML

<button class="button disabled">送信できません</button>
HTML

Tailwind版

<button class="bg-blue-500 text-white disabled:bg-gray-300 disabled:pointer-events-none">
  送信できません
</button>
HTML

Tailwind は disabled: のような 状態プレフィックス を使います。

レイアウト用クラス + デザイン用クラス

CSS版

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 100px;
  background: #fafafa;
}
CSS

HTML

<div class="flex-center box">内容</div>
HTML

Tailwind版

<div class="flex justify-center items-center w-52 h-24 bg-gray-50">
  内容
</div>
HTML

Tailwind はレイアウトもユーティリティで書くため、
複数クラスの組み合わせが自然に身につきます。

複数クラス指定の“つまずきポイント”を深掘り

1. クラスの順番に意味はない（CSS の優先度は別）

<div class="a b c"></div>
HTML

順番は関係ありません。
ただし、CSS の優先度（specificity） は別問題です。

例：

.btn { color: black; }
.btn.primary { color: white; }
CSS

.btn.primary の方が強いので白になります。

2. クラスを増やしすぎると管理が難しくなる

<div class="box card item content main big red shadow type-a"></div>
HTML

これは 悪い例。
役割が不明で、後から見たときに意味が分かりません。

改善案
→ 役割ごとに整理する

<div class="card card-large card-highlight"></div>
HTML

Tailwind ではユーティリティを使うため、
意味のないクラスを増やす問題が起きにくいです。

3. CSS の複合クラスは「AND 条件」

.card.highlight { … }
CSS

これは 両方のクラスを持つ要素だけ に適用されます。

OR 条件ではありません。

例題で理解を深める

例題：ニュースカードに「基本 + 強調」の複数クラスを使う

CSS版

.news-card {
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.news-card.highlight {
  border: 2px solid orange;
  background: #fff7e6;
}
CSS

HTML

<div class="news-card">通常ニュース</div>
<div class="news-card highlight">重要ニュース</div>
HTML

Tailwind版

<div class="p-5 bg-white rounded-lg">通常ニュース</div>

<div class="p-5 bg-orange-50 rounded-lg border-2 border-orange-400">
  重要ニュース
</div>
HTML

まとめ：複数クラス指定を使いこなすコツ

本質

  • クラスは「役割ごとに分けて重ねる」
  • 複合クラス（.a.b）は AND 条件
  • 順番に意味はないが、CSS の優先度は影響する

実務での使いどころ

  • ベース + バリエーション
  • 状態（active, disabled）との組み合わせ
  • レイアウト + デザインの組み合わせ

Tailwind の強み

  • 複数クラスを組み合わせる前提の設計
  • 意味のないクラスを増やさずに済む
  • 状態やレスポンシブもクラスで完結
スポンサーリンク
タイトルとURLをコピーしました