CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － クラスとIDの適切な設計

Web APP CSS
スポンサーリンク

クラスとIDの適切な設計を“本質から”理解する

クラス（.）とID（#）は、CSSの中でも特に「設計の質」が出る部分です。
初心者のうちにここをしっかり押さえておくと、後々のCSSが劇的に書きやすくなります。

ここでは、Webデザイナー兼CSS講師として、実務レベルの考え方をかみ砕いて解説します。
Tailwind CSS版も並べて紹介するので、両者の違いも自然に理解できます。

クラスとIDの基本的な違い

クラス（class）とは何か

クラスは「複数の要素に共通のデザインを適用するためのラベル」です。

.card {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}
CSS
<div class="card">商品A</div>
<div class="card">商品B</div>
HTML

同じ見た目を何度でも使い回せるのが最大のメリットです。

Tailwindでは、クラスを自分で定義せず、ユーティリティクラスを組み合わせて同じことを実現します。

<div class="p-4 bg-gray-100 rounded-lg">商品A</div>
<div class="p-4 bg-gray-100 rounded-lg">商品B</div>
HTML

ID（id）とは何か

IDは「ページに1つだけ存在する特別な要素」に使います。

#main-visual {
  height: 400px;
  background-size: cover;
}
CSS
<section id="main-visual"></section>
HTML

IDは1ページに1回しか使えないため、
“唯一の存在”にだけ使うのが正しい設計です。

Tailwindでは、IDはデザイン目的ではなく「JavaScriptの操作」や「ページ内リンク」に使うことが多いです。

<section id="main-visual" class="h-[400px] bg-cover bg-center"></section>
HTML

クラスとIDの使い分けの本質

深掘り：なぜIDをデザインに使うべきではないのか

IDはCSSの優先度が非常に強いため、後からスタイルを上書きしづらくなります。

#title {
  color: red;
}
CSS

このように書くと、後から .title { color: blue; } と書いても負けてしまいます。
結果として「!important」を多用する悪循環に陥りがちです。

結論：デザインはクラスで行い、IDは構造やJS用に使う。

TailwindではそもそもIDでデザインしないため、この問題が起きません。

クラス設計の基本パターン

パターン1：役割ごとにクラスを作る

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: bold;
}
.btn-primary {
  background: royalblue;
  color: white;
}
.btn-secondary {
  background: #eee;
  color: #333;
}
CSS
<a class="btn btn-primary">購入する</a>
<a class="btn btn-secondary">詳細を見る</a>
HTML

Tailwind版

<a class="inline-block px-4 py-2 rounded font-bold bg-blue-600 text-white">
  購入する
</a>
<a class="inline-block px-4 py-2 rounded font-bold bg-gray-200 text-gray-700">
  詳細を見る
</a>
HTML

Tailwindでは「btn」という共通クラスを作らず、ユーティリティを組み合わせて表現します。

パターン2：コンポーネント単位でクラスを作る

.product-card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.product-card .title {
  font-size: 18px;
  font-weight: bold;
}
.product-card .price {
  color: #e53935;
  font-size: 16px;
}
CSS
<div class="product-card">
  <p class="title">商品名</p>
  <p class="price">¥2,980</p>
</div>
HTML

Tailwind版

<div class="p-5 border border-gray-300 rounded-lg">
  <p class="text-lg font-bold">商品名</p>
  <p class="text-red-600 text-base">¥2,980</p>
</div>
HTML

Tailwindでは「コンポーネントクラス」を作らず、HTML側で組み立てるスタイルです。

よくある失敗と改善例

失敗例1：IDでデザインしてしまう

#header {
  background: black;
  color: white;
}
CSS
<header id="header">ヘッダー</header>
HTML

これは後から変更しづらくなる典型例です。

改善版（クラスを使う）

.header {
  background: black;
  color: white;
}
CSS
<header class="header">ヘッダー</header>
HTML

Tailwind版

<header class="bg-black text-white">ヘッダー</header>
HTML

失敗例2：クラス名が抽象的すぎる

<div class="box"></div>
<div class="box2"></div>
HTML

これは後から見たときに意味が分かりません。

改善版（役割が分かる名前にする）

<div class="feature-card"></div>
<div class="news-card"></div>
HTML

Tailwind版では、そもそもクラス名を作らないため問題が起きにくいです。

例題で理解を深める

例題：プロフィールカードを作る

CSS版

.profile-card {
  padding: 20px;
  border-radius: 10px;
  background: #fafafa;
  text-align: center;
}

.profile-card .name {
  font-size: 20px;
  font-weight: bold;
}

.profile-card .job {
  color: #666;
  margin-top: 4px;
}
CSS
<div class="profile-card">
  <p class="name">山田 太郎</p>
  <p class="job">Webデザイナー</p>
</div>
HTML

Tailwind版

<div class="p-5 rounded-xl bg-gray-50 text-center">
  <p class="text-xl font-bold">山田 太郎</p>
  <p class="text-gray-600 mt-1">Webデザイナー</p>
</div>
HTML

まとめ：クラスとIDの設計は“CSSの設計力”そのもの

クラスとIDの使い分けは、CSS設計の基礎でありながら奥が深い部分です。

重要ポイントの総まとめ

  • IDは1ページ1回だけ。デザインには使わない。
  • クラスは「役割」や「用途」で名前をつける。
  • 再利用できるデザインはクラス化する。
  • Tailwindではクラスを作らず、ユーティリティを組み合わせる。
  • 抽象的なクラス名（box, wrap, main）は避ける。

この考え方を身につけると、CSSが驚くほど整理され、
Tailwindを使うときも迷いがなくなります。

スポンサーリンク
タイトルとURLをコピーしました