CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － グルーピングセレクタ

Web APP CSS
スポンサーリンク

グルーピングセレクタを“正しく・効率的に”使いこなす

グルーピングセレクタは、CSS の中でも 「複数のセレクタに同じスタイルをまとめて適用する」 とても便利な書き方です。
初心者がここを理解すると、CSS が一気にスッキリし、保守性も向上します。

Tailwind CSS では少し考え方が変わるため、
両方の視点で丁寧に解説していきます。

グルーピングセレクタとは何か

基本形（CSS）

h1, h2, h3 {
  color: #333;
  margin-bottom: 16px;
}
CSS

これは h1 / h2 / h3 のすべてに同じスタイルを適用します。

HTML

<h1>タイトル</h1>
<h2>小見出し</h2>
<h3>さらに小見出し</h3>
HTML

深掘り：グルーピングは「重複をなくす」ための技術

例えば、次のように書くと…

h1 {
  color: #333;
}
h2 {
  color: #333;
}
h3 {
  color: #333;
}
CSS

同じコードを何度も書くことになり、
修正時に 3箇所直す必要があるという問題が生まれます。

グルーピングセレクタはこれを 1回で済ませるための仕組みです。

Tailwind CSS ではどうするのか

Tailwind は「ユーティリティクラスを HTML に直接書く」スタイルなので、
CSS のようにグルーピングはしません。

<h1 class="text-gray-800 mb-4">タイトル</h1>
<h2 class="text-gray-800 mb-4">小見出し</h2>
<h3 class="text-gray-800 mb-4">さらに小見出し</h3>
HTML

Tailwind の場合は、
共通スタイルをコンポーネント化したいときだけ @apply を使うのが一般的です。

.heading {
  @apply text-gray-800 mb-4;
}
CSS
<h1 class="heading">タイトル</h1>
<h2 class="heading">小見出し</h2>
<h3 class="heading">さらに小見出し</h3>
HTML

よく使うグルーピングセレクタの実践パターン

見出しの共通スタイルをまとめる

CSS版

h1, h2, h3 {
  font-family: "Noto Sans JP", sans-serif;
  color: #222;
}
CSS

Tailwind版

<h1 class="font-sans text-gray-900">タイトル</h1>
<h2 class="font-sans text-gray-900">小見出し</h2>
<h3 class="font-sans text-gray-900">さらに小見出し</h3>
HTML

ボタンの共通スタイルをまとめる

CSS版

.btn, .btn-primary, .btn-secondary {
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: bold;
}
CSS

HTML

<button class="btn">通常</button>
<button class="btn-primary">メイン</button>
<button class="btn-secondary">サブ</button>
HTML

Tailwind版

Tailwind はグルーピングしないため、
共通部分を @apply でまとめることが多い。

.btn {
  @apply px-5 py-3 rounded font-bold;
}
CSS
<button class="btn bg-gray-200">通常</button>
<button class="btn bg-blue-600 text-white">メイン</button>
<button class="btn bg-gray-400 text-white">サブ</button>
HTML

フォーム要素の共通スタイルをまとめる

CSS版

input, textarea, select {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}
CSS

Tailwind版

<input class="border border-gray-300 p-2 rounded" />
<textarea class="border border-gray-300 p-2 rounded"></textarea>
<select class="border border-gray-300 p-2 rounded"></select>
HTML

Tailwind は「HTML側で統一する」スタイル。

グルーピングセレクタの“深掘りポイント”

1. グルーピングは「読みやすさ」を大きく向上させる

例えば…

.card-title, .card-subtitle, .card-text {
  margin-bottom: 12px;
}
CSS

こう書くことで、
「この3つは同じグループなんだな」と一目で分かる。

2. グルーピングしすぎると逆に読みにくくなる

悪い例

h1, h2, h3, p, a, span, strong, em {
  color: #333;
}
CSS

これは 何をしたいのか分からない。

グルーピングは「意味のあるまとまり」にだけ使うのが鉄則。

3. Tailwind ではグルーピングの代わりに「コンポーネント化」する

Tailwind の思想はこう。

  • CSS にまとめる → @apply
  • HTML に直接書く → ユーティリティクラス
  • グルーピングは基本しない

Tailwind は「詳細度の問題を避ける」ために
グルーピングを使わない設計になっている。

例題で理解を深める

例題：ニュース一覧のタイトルと本文をまとめてデザインする

CSS版

.news-title, .news-text {
  color: #2d3748;
  margin-bottom: 8px;
}
CSS

HTML

<h3 class="news-title">ニュースタイトル</h3>
<p class="news-text">本文テキスト</p>
HTML

Tailwind版

<h3 class="text-gray-700 mb-2">ニュースタイトル</h3>
<p class="text-gray-700 mb-2">本文テキスト</p>
HTML

Tailwind では「同じクラスを付ける」ことでグルーピングの代わりにする。

まとめ：グルーピングセレクタを使いこなすコツ

本質

  • 複数のセレクタに同じスタイルをまとめて適用できる
  • 重複を減らし、保守性を高める
  • 意味のあるグループにだけ使うのが正解

実務でのポイント

  • 見出し、ボタン、フォームなどでよく使う
  • グルーピングしすぎると逆に読みにくい
  • 詳細度は変わらないので安心して使える

Tailwind の考え方

  • グルーピングは基本しない
  • 共通化したい場合は @apply を使う
  • HTML にユーティリティクラスを積み重ねる設計
スポンサーリンク
タイトルとURLをコピーしました