CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 要素セレクタの使い分け

APP CSS
スポンサーリンク

CSSの基本文法をざっくりつかむ

CSSは「どの要素に」「どんな見た目を」適用するかを書く言語です。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}
CSS
p {
  color: #333;
  line-height: 1.8;
}
CSS

この例だと
「p という要素（段落）に、文字色#333、行間1.8を適用する」という意味になります。

Tailwind CSSでは、同じことを「クラス名をHTML側に直接書く」ことで実現します。

<p class="text-gray-800 leading-relaxed">
  これはTailwindでスタイルした段落です。
</p>
HTML

ここで text-gray-800 が文字色、leading-relaxed が行間を表すユーティリティクラスです。

要素セレクタとは何か

要素セレクタの基本

要素セレクタ（タイプセレクタ）は、タグ名そのもので指定するセレクタです。

h1 {
  color: royalblue;
}

p {
  font-size: 16px;
}
CSS
<h1>サイトのタイトル</h1>
<p>ここは本文です。</p>
<p>ここも本文です。</p>
HTML

この場合、ページ内のすべての <h1> と <p> にスタイルが適用されます。

Tailwindでは、要素セレクタという考え方は基本的に使わず、各要素にクラスを付けていきます。

<h1 class="text-3xl font-bold text-blue-600">
  サイトのタイトル
</h1>
<p class="text-base">
  ここは本文です。
</p>
<p class="text-base">
  ここも本文です。
</p>
HTML

要素セレクタを使うときの「感覚」

要素セレクタは「そのタグが持つ役割に対して、サイト全体の基本スタイルを決める」ときに向いています。

  • ページ全体の「本文の文字サイズ」「行間」
  • 見出し（h1〜h3）の基本デザイン
  • a（リンク）の基本色・ホバー時の色

こういった「サイトの標準ルール」を決めるのにぴったりです。

要素セレクタ・クラス・IDの使い分け

それぞれの役割イメージ

/* 要素セレクタ：タグの役割ごとの“標準スタイル” */
p {
  font-size: 16px;
  line-height: 1.8;
}

/* クラスセレクタ：用途ごとの“パターン” */
.notice {
  background: #fff3cd;
  padding: 12px 16px;
  border-radius: 4px;
}

/* IDセレクタ：ページに1つだけの“固有パーツ” */
#main-visual {
  height: 400px;
  background-size: cover;
}
CSS

Tailwindでは、クラスセレクタやIDセレクタを自分で書く代わりに、ユーティリティクラスを組み合わせて使います。

<p class="text-base leading-relaxed">
  本文テキストです。
</p>

<div class="bg-yellow-100 px-4 py-3 rounded">
  お知らせテキストです。
</div>

<section id="main-visual" class="h-[400px] bg-cover bg-center">
  <!-- メインビジュアル -->
</section>
HTML

重要ポイント：要素セレクタは「広く」、クラスは「狭く」

ここを深掘りします。

  • 要素セレクタ
    「ページ中のすべてのそのタグ」に効きます。
    例：p { font-size: 16px; } と書くと、すべての段落が16pxになります。
  • クラスセレクタ
    「そのクラスが付いているものだけ」に効きます。
    例：.lead { font-size: 20px; } とすると、class="lead" の段落だけ大きくなります。
p {
  font-size: 16px;
}

.lead {
  font-size: 20px;
}
CSS
<p>普通の本文です。</p>
<p class="lead">ここは少し目立たせたい本文です。</p>
HTML

Tailwindで同じことをするとこうなります。

<p class="text-base">
  普通の本文です。
</p>
<p class="text-lg">
  ここは少し目立たせたい本文です。
</p>
HTML

「全体の標準」は要素セレクタ（またはTailwindならtext-baseをよく使う）で決めて、
「特別に変えたいところ」はクラス（Tailwindなら別のユーティリティクラス）で上書きする、というイメージです。

要素セレクタの具体的な使い分けパターン

パターン1：ベーススタイルを要素セレクタで決める

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #222;
}

h1 {
  font-size: 32px;
  margin-bottom: 16px;
}

p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 12px;
}
CSS
<h1>会社概要</h1>
<p>私たちは〇〇を提供する会社です。</p>
<p>お客様に寄り添ったサービスを心がけています。</p>
HTML

Tailwindで「ベース」を決める場合は、bodyにクラスを付けるか、@layer baseでカスタマイズします。

<body class="text-gray-900 font-sans">
  <h1 class="text-3xl mb-4">会社概要</h1>
  <p class="text-base leading-relaxed mb-3">
    私たちは〇〇を提供する会社です。
  </p>
  <p class="text-base leading-relaxed mb-3">
    お客様に寄り添ったサービスを心がけています。
  </p>
</body>
HTML

Tailwindを本格的に使う場合は、tailwind.config.jsや@layer baseでh1やpのデフォルトスタイルを定義することも多いです。

パターン2：特定の要素だけまとめてデザインしたい

例えば、記事本文の中の画像だけにスタイルを当てたい場合。

.article-content img {
  max-width: 100%;
  display: block;
  margin: 24px auto;
}
CSS
<div class="article-content">
  <p>本文テキスト...</p>
  <img src="photo.jpg" alt="写真">
  <p>続きの本文...</p>
</div>
HTML

ここでは .article-content img という「クラス＋要素セレクタ」の組み合わせを使っています。
「記事エリアの中にある img だけ」に効く、という指定です。

Tailwindで近いことをする場合は、画像にクラスを直接書きます。

<div class="article-content">
  <p class="text-base leading-relaxed">
    本文テキスト...
  </p>
  <img src="photo.jpg" alt="写真" class="max-w-full block my-6 mx-auto">
  <p class="text-base leading-relaxed">
    続きの本文...
  </p>
</div>
HTML

Tailwindは「HTML側に全部書く」スタイルなので、
「範囲＋要素」という指定は、基本的にはユーティリティクラスの組み合わせで表現します。

よくある失敗と、要素セレクタの上手な使い方

失敗例1：なんでもかんでも要素セレクタでやろうとする

div {
  padding: 20px;
  background: #eee;
}
CSS

一見便利そうですが、ページ中のすべてのdivが灰色のボックスになってしまい、
後から「ここだけ違うデザインにしたい」と思ったときに、かえって大変になります。

この場合は、役割ごとにクラスを分けた方がよいです。

.card {
  padding: 20px;
  background: #eee;
  border-radius: 8px;
}
CSS

Tailwindならこうなります。

<div class="p-5 bg-gray-100 rounded-lg">
  カードコンテンツ
</div>
HTML

失敗例2：逆に、全部クラスにしてしまう

.title {
  font-size: 32px;
}

.text {
  font-size: 16px;
}
CSS
<h1 class="title">タイトル</h1>
<p class="text">本文です。</p>
<p class="text">本文です。</p>

これでも動きますが、「見出しは基本このサイズ」「本文は基本このサイズ」という
“サイト全体のルール”を要素セレクタで決めておくと、HTMLがすっきりします。

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}
CSS
<h1>タイトル</h1>
<p>本文です。</p>
<p>本文です。</p>
HTML

Tailwindの場合は、プロジェクト全体で「見出しは text-3xl」「本文は text-base」など、
クラスの使い方をチーム内でルール化しておくと、同じ効果が得られます。

ミニ例題で練習してみよう

例題1：ニュース一覧のタイトルと本文

「ニュースタイトルは少し大きく太字、本文は普通の文字サイズ」にしたいとします。

HTML（素のCSS版）

<h2>お知らせ</h2>

<h3>夏季休業のお知らせ</h3>
<p>当社は8月10日〜15日まで夏季休業とさせていただきます。</p>

<h3>新サービス開始のお知らせ</h3>
<p>9月より新しいプランを開始いたします。</p>
HTML

CSS（要素セレクタ中心）

h2 {
  font-size: 24px;
  margin-bottom: 16px;
}

h3 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 4px;
}

p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 8px;
}
CSS

Tailwind版

<h2 class="text-2xl mb-4">お知らせ</h2>

<h3 class="text-lg font-bold mt-5 mb-1">
  夏季休業のお知らせ
</h3>
<p class="text-sm leading-relaxed mb-2">
  当社は8月10日〜15日まで夏季休業とさせていただきます。
</p>

<h3 class="text-lg font-bold mt-5 mb-1">
  新サービス開始のお知らせ
</h3>
<p class="text-sm leading-relaxed mb-2">
  9月より新しいプランを開始いたします。
</p>
HTML

ここで意識してほしいのは、

  • CSS版：h2, h3, p という「役割ごとの標準」を要素セレクタで決めている
  • Tailwind版：同じ考え方を、クラスの組み合わせで表現している

という対応関係です。

例題2：特定の段落だけ強調したい

「本文の中で、1つだけ強調したい段落がある」ケースです。

HTML＋CSS版

<p>これは普通の本文です。</p>
<p class="important">ここは特に読んでほしい重要な部分です。</p>
<p>また普通の本文が続きます。</p>
HTML
p {
  font-size: 16px;
  line-height: 1.8;
}

.important {
  background: #fff3cd;
  padding: 8px 12px;
  border-left: 4px solid #ff9800;
}
CSS

Tailwind版

<p class="text-base leading-relaxed">
  これは普通の本文です。
</p>
<p class="text-base leading-relaxed bg-yellow-100 px-3 py-2 border-l-4 border-orange-400">
  ここは特に読んでほしい重要な部分です。
</p>
<p class="text-base leading-relaxed">
  また普通の本文が続きます。
</p>
HTML

ここでのポイントは、

  • 「全体の標準」は要素セレクタ（p）または共通クラス（text-base leading-relaxed）で決める
  • 「一部だけ変えたい」はクラス（.important や Tailwindの追加クラス）で上書きする

という“レイヤー構造”を意識することです。

まとめ：要素セレクタをどう使いこなすか

要素セレクタは「サイトの空気感」を決めるための道具です。

  • body, h1〜h3, p, a, img など、よく使うタグの“標準スタイル”をまず要素セレクタで決める
  • そこから外れた「特別な見た目」はクラス（CSS）やユーティリティクラス（Tailwind）で足していく
  • div や span のような“なんでも入る箱”は、むやみに要素セレクタで一括指定しない

この感覚が身につくと、CSSもTailwindも一気に扱いやすくなります。

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