【実践10問】Tailwind CSS bg text color で背景色・テキスト色を完全習得

Tailwind CSS bg text color（背景色・テキスト色）のユーティリティを、基礎5問＋実践5問のハンズオン形式で完全解説。bg-, text- の基本パターンから企業サイトでの実践的な配色テクニックまで、Playground で手を動かしながら学べます。

読者がこの記事から得られる知識

この記事では、Tailwind CSS bg text color（背景色・テキスト色）ユーティリティの使い方を、実際に手を動かしながら学びます。

• bg-{color}-{shade} で背景色を指定する方法
• text-{color}-{shade} でテキスト色を指定する方法
• shade（50〜950）による明暗のコントロール方法
• white, black, transparent などの特殊値の使い方
• 企業サイトや EC サイトで実際に使われている配色パターン

初めて Tailwind CSS の色指定に触れる方でも、10問の練習を通じて自信を持って使えるようになるはずです。

今回ハンズオンした内容

今回は Tailwind CSS Playground を使って、背景色（bg-*）とテキスト色（text-*）のユーティリティクラスを練習しました。

参考にした公式ドキュメントは以下の通りです。

• Background Color — 背景色ユーティリティの解説
• Text Color — テキスト色ユーティリティの解説
• Colors — カラーパレット一覧

ハンズオンで学習したコードと結果の画像

先にハンズオンで書いたコード全体を紹介しておきます。

  <div class="basic-1-container">
    <div class="bg-black text-white">Hello TailwindCSS</div>
  </div>
  <div class="basic-2-container">
    <div class="bg-blue-500 text-white">Blue Sky</div>
  </div>
  <div class="basic-3-container">
    <div class="bg-red-100 text-red-900">Light</div>
    <div class="bg-red-900 text-red-100">Dark</div>
  </div>
  <div class="basic-4-container">
    <div class="bg-transparent text-green-700">Transparent Background</div>
  </div>
  <div class="basic-5-container">
    <div class="bg-gray-50 text-gray-950">Lightest</div>
    <div class="bg-gray-500 text-white">Middle</div>
    <div class="bg-gray-950 text-gray-50">Darkest</div>
  </div>
  <div class="practice-1-container">
    <div class="bg-white">
      <span class="text-gray-900">TOYOTA</span>
      <span class="text-gray-400">クルマ ｜ サービス ｜ 店舗</span>
    </div>
  </div>
  <div class="practice-2-container">
    <div class="bg-gray-50">
      <div>
        <span class="text-gray-400">2025.02.04</span>
        <span class="text-gray-800">新型RAV4を発売</span>
      </div>
      <div>
        <span class="text-gray-400">2025.01.15</span>
        <span class="text-gray-800">GR COROLLA 一部改良</span>
      </div>
      <div>
        <span class="text-gray-400">2024.12.20</span>
        <span class="text-gray-800">年末年始の営業について</span>
      </div>
    </div>
  </div>
  <div class="practice-3-container">
    <div class="bg-black">
      <div class="text-white">SONY Group Corporation</div>
      <div class="text-gray-400">© 2025 Sony Group Corporation. All Rights Reserved.</div>
    </div>
  </div>
  <div class="practice-4-container">
    <div class="bg-red-600">
      <div class="text-white">【重要】システムメンテナンスのお知らせ</div>
      <div class="text-red-100">2025年2月10日 午前2:00〜午前5:00</div>
    </div>
  </div>
  <div class="practice-5-container">
    <div class="bg-white">
      <div class="text-gray-900">エアリズムコットンオーバーサイズTシャツ</div>
      <div class="text-red-600">期間限定価格 ¥990</div>
      <div class="text-gray-400">通常価格 ¥1,500</div>
    </div>
  </div>

以下は、Tailwind PLAYに貼り付けた結果のスクショです。

基本知識

Tailwind CSS の色指定は以下のパターンで行います。

• 背景色: bg-{色名}-{shade}（例: bg-blue-500）
• テキスト色: text-{色名}-{shade}（例: text-gray-900）
• shade は 50 が最も明るく、950 が最も暗い（11段階: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950）
• 特殊値として white, black, transparent, current がある

基礎問題（5問）

基礎 第1問: 黒背景に白テキスト

要件:

• 背景色: 黒
• テキスト色: 白
• テキスト: 「Hello TailwindCSS」

コード:

<div class="bg-black text-white">Hello TailwindCSS</div>

操作の意図:
bg-* と text-* の最も基本的な組み合わせを確認する。

実行結果:

結果の解説:
bg-black が background-color: #000000 を、text-white が color: #ffffff をそれぞれ適用しています。黒背景に白文字がはっきり表示されており、最も基本的な色指定のパターンです。

このように、Tailwind CSS ではクラスを追加するだけで色を指定できます。

基礎 第2問: 青背景に白テキスト（shade指定）

要件:

• 背景色: 青（shade 500）
• テキスト色: 白
• テキスト: 「Blue Sky」

コード:

<div class="bg-blue-500 text-white">Blue Sky</div>

操作の意図:
shade（色の濃淡）を数値で指定する方法を確認する。

実行結果:

結果の解説:
bg-blue-500 は Tailwind のデフォルトパレットにおける青の中間色を指定しています。shade 500 は各色の「基準」となる色合いで、最も使用頻度が高い値です。

shade を変えるだけで色の濃淡を簡単にコントロールできることが確認できました。

基礎 第3問: 同色の明暗組み合わせ

要件:

• 1つ目: 背景色 red-100、テキスト色 red-900、テキスト「Light」
• 2つ目: 背景色 red-900、テキスト色 red-100、テキスト「Dark」

コード:

<div class="bg-red-100 text-red-900">Light</div>
<div class="bg-red-900 text-red-100">Dark</div>

操作の意図:
同じ色名（red）でも shade を反転させることで、明暗のバリエーションが作れることを体感する。

実行結果:

結果の解説:
同じ red でも、shade 100（明るい）と 900（暗い）を反転させるだけで、はっきりとしたコントラストが生まれています。

このパターンは実務でもよく使われます。たとえば、ステータスバッジ（「成功」「エラー」など）の配色でこの明暗反転テクニックが活躍します。

基礎 第4問: 透明背景

要件:

• 背景色: transparent
• テキスト色: green-700
• テキスト: 「Transparent Background」

コード:

<div class="bg-transparent text-green-700">Transparent Background</div>

操作の意図:
bg-transparent の挙動を確認する。背景が透過されて親要素の色が透けることを確かめる。

実行結果:

結果の解説:
bg-transparent は background-color: transparent を適用し、背景を完全に透過させます。Playground では親要素が白背景のため白く見えていますが、実際には「色なし」の状態です。

オーバーレイや重ね合わせのレイアウトで活用できるユーティリティです。

基礎 第5問: グレースケールの段階的変化

要件:

• 1つ目: 背景色 gray-50、テキスト色 gray-950、テキスト「Lightest」
• 2つ目: 背景色 gray-500、テキスト色 white、テキスト「Middle」
• 3つ目: 背景色 gray-950、テキスト色 gray-50、テキスト「Darkest」

コード:

<div class="bg-gray-50 text-gray-950">Lightest</div>
<div class="bg-gray-500 text-white">Middle</div>
<div class="bg-gray-950 text-gray-50">Darkest</div>

操作の意図:
グレースケールの shade を段階的に変化させ、50 → 500 → 950 の明暗差を視覚的に確認する。

実行結果:

結果の解説:
gray の shade を 50（最も明るい）→ 500（中間）→ 950（最も暗い）と変化させることで、明暗の違いがはっきりとわかります。テキスト色も背景とのコントラストを確保するよう組み合わせています。

グレースケールは Web デザインの基本色であり、最も使用頻度の高いカラーパレットです。

実践問題（5問）

日本の上場企業サイトを参考に、実際の Web デザインに近い問題に取り組みました。

実践 第1問: 企業サイトのヘッダー（トヨタ自動車風）

要件:

• 外側: 背景色 white
• ブランド名: テキスト色 gray-900、テキスト「TOYOTA」
• ナビ項目: テキスト色 gray-400、テキスト「クルマ ｜ サービス ｜ 店舗」

コード:

<div class="bg-white">
  <span class="text-gray-900">TOYOTA</span>
  <span class="text-gray-400">クルマ ｜ サービス ｜ 店舗</span>
</div>

操作の意図:
企業サイトのヘッダーで、ブランド名とナビ項目の優先度をテキスト色の濃淡で表現する。

実行結果:

結果の解説:
text-gray-900（濃い）でブランド名を強調し、text-gray-400（薄い）でナビ項目を控えめにしています。グレーの濃淡で情報の優先度を表現する、企業サイトの定番パターンです。

実際のトヨタ自動車の公式サイト（toyota.jp）でも同様のアプローチが使われています。

実践 第2問: お知らせセクション（トヨタ自動車風）

要件:

• 外側: 背景色 gray-50
• 日付: テキスト色 gray-400
• 見出し: テキスト色 gray-800

コード:

<div class="bg-gray-50">
  <div>
    <span class="text-gray-400">2025.02.04</span>
    <span class="text-gray-800">新型RAV4を発売</span>
  </div>
  <div>
    <span class="text-gray-400">2025.01.15</span>
    <span class="text-gray-800">GR COROLLA 一部改良</span>
  </div>
  <div>
    <span class="text-gray-400">2024.12.20</span>
    <span class="text-gray-800">年末年始の営業について</span>
  </div>
</div>

操作の意図:
ニュース一覧で、日付（補助情報）と見出し（主要情報）を色の濃淡で区別する。

実行結果:

結果の解説:
日付を text-gray-400（補助）、見出しを text-gray-800（主要）と使い分けています。bg-gray-50 の薄いグレー背景がセクション全体をまとめる役割を果たしており、ページの他の部分との区切りにもなっています。

この「背景色で領域を区切り、テキスト色の濃淡で情報の重要度を表現する」というパターンは、多くの企業サイトで採用されています。

実践 第3問: フッター（ソニーグループ風）

要件:

• 外側: 背景色 black
• 企業名: テキスト色 white
• コピーライト: テキスト色 gray-400

コード:

<div class="bg-black">
  <div class="text-white">SONY Group Corporation</div>
  <div class="text-gray-400">© 2025 Sony Group Corporation. All Rights Reserved.</div>
</div>

操作の意図:
フッターの定番配色である暗い背景 + 白/グレーテキストの組み合わせを作る。

実行結果:

結果の解説:
bg-black に text-white と text-gray-400 を組み合わせた、フッターの定番配色です。企業名を白で強調し、コピーライト情報をグレーで控えめにすることで、視覚的な階層を作っています。

多くの企業サイトのフッターはこの暗い背景 + 明るいテキストのパターンを採用しています。

実践 第4問: 警告バナー（楽天グループ風）

要件:

• 外側: 背景色 red-600
• 警告タイトル: テキスト色 white
• 日時情報: テキスト色 red-100

コード:

<div class="bg-red-600">
  <div class="text-white">【重要】システムメンテナンスのお知らせ</div>
  <div class="text-red-100">2025年2月10日 午前2:00〜午前5:00</div>
</div>

操作の意図:
警告・重要告知に使われる赤系の配色を、同系色の濃淡で構成する。

実行結果:

結果の解説:
bg-red-600 に対し、タイトルは text-white、補足情報は text-red-100（同系色の薄い色）で組み合わせています。同系色の濃淡で「強調」と「補足」を分ける、警告バナーの典型パターンです。

基礎 第3問で学んだ「同色の明暗組み合わせ」が、実際のUIコンポーネントでどう活きるかを体感できる問題です。

実践 第5問: 商品カード（ファーストリテイリング / ユニクロ風）

要件:

• 外側: 背景色 white
• 商品名: テキスト色 gray-900
• セール価格: テキスト色 red-600
• 通常価格: テキスト色 gray-400

コード:

<div class="bg-white">
  <div class="text-gray-900">エアリズムコットンオーバーサイズTシャツ</div>
  <div class="text-red-600">期間限定価格 ¥990</div>
  <div class="text-gray-400">通常価格 ¥1,500</div>
</div>

操作の意図:
EC サイトの商品カードで、色のコントラストを使って「何を見せたいか」をコントロールする。

実行結果:

結果の解説:
商品名を gray-900 で目立たせ、セール価格を red-600 で注意を引き、通常価格を gray-400 で控えめに。EC サイトの商品カードで頻繁に使われる配色テクニックです。

3つの情報を3段階のテキスト色（濃い → 赤 → 薄い）で表現することで、ユーザーの視線を「商品名 → セール価格 → 通常価格」の順に自然に誘導しています。

ハンズオンの中で疑問に感じた点

bg-transparent と bg-white は見た目が同じ？

基礎 第4問で bg-transparent を使いましたが、Playground 上では bg-white と見た目がまったく同じに見えました。

これは、Playground のページ背景（親要素）が白色だからです。bg-transparent は「背景を透明にする」ユーティリティであり、親要素の色がそのまま透けて見えます。

もし親要素の背景色が青なら、bg-transparent の要素は青く見えますが、bg-white の要素は白のままです。

<!-- 親が青背景の場合 -->
<div class="bg-blue-500 p-4">
  <div class="bg-transparent text-white">← 背景は青く透ける</div>
  <div class="bg-white text-blue-500">← 背景は白のまま</div>
</div>

ポイント: bg-transparent は「色を塗らない」、bg-white は「白を塗る」。Playground では親が白なので同じに見えるだけです。実務でネストされた要素やオーバーレイを扱う際には、この違いが重要になります。

存在しない shade（bg-red-1000 など）を指定するとどうなる？

Tailwind CSS のデフォルトパレットでは、shade は 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 の 11 段階です。

bg-red-1000 のように範囲外の shade を指定した場合、Tailwind はそのクラスを認識しません。結果として何もスタイルが適用されず、要素は背景色なしの状態になります。しかもエラーは出ないため、見落としがちなミスです。

<!-- [正] 有効な shade -->
<div class="bg-red-900">有効（暗い赤が表示される）</div>

<!-- [誤] 存在しない shade → スタイルが適用されない -->
<div class="bg-red-1000">無効（何も起きない）</div>

もしデフォルトパレットにない色が必要な場合は、任意値（arbitrary values）で直接カラーコードを指定できます。

<div class="bg-[#1a0000]">任意の色を直接指定</div>

ポイント: shade は 50〜950 の 11 段階のみ有効。範囲外を指定してもエラーにならないので、色が表示されないときは shade の値を真っ先に確認しましょう。

今回のまとめ

お疲れさまでした。今回は Tailwind CSS の背景色・テキスト色ユーティリティを 10 問の練習で学びました。

• bg-{color}-{shade} と text-{color}-{shade} で、Tailwind CSS の背景色・テキスト色を簡潔に指定できる
• shade の 50〜950 を使い分けることで、同系色の濃淡で UI の階層や優先度を表現できる
• white, black, transparent の特殊値は、企業サイトや EC サイトで定番の配色パターンに欠かせない

次回は、border や shadow など装飾系のユーティリティに挑戦してみるのも面白いかもしれません。また別の記事でお会いしましょう。

関連記事

この記事で紹介した内容の他にも学習した内容を記事にしています。是非、ご覧になってみて下さい。

Tailwind CSS flex items-center justify-center 完全ガイド - 実践的な中央揃えテクニック

Tailwind CSS flex items-center justify-center（中央揃え）の使い方を、基礎から実践まで6つの演習問題で完全マスター。企業サイトでよく使うヘッダーナビ、カード ...

続きを見る

Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

Tailwind CSS spacing utilities（スペーシングユーティリティ）の基本である padding と margin を、公式ドキュメントに基づく6つの実践問題で完全習得。p-4、 ...

続きを見る

Tailwind CSS Width Height 完全ガイド - 基礎から実践まで10問で習得

Tailwind CSS width height utilities（幅・高さユーティリティ）の基本から実践的な使い方まで、10問の演習問題で体系的に学べる完全ガイド。固定値・相対値・分数値の使い分 ...

続きを見る

【実践10問】Tailwind CSS bg text color で背景色・テキスト色を完全習得

Tailwind CSS bg text color（背景色・テキスト色）のユーティリティを、基礎5問＋実践5問のハンズオン形式で完全解説。bg-, text- の基本パターンから企業サイトでの実践的 ...

続きを見る

Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

Tailwind CSS rounded shadow ring の ユーティリティクラスを基礎から実践まで10問のハンズオンで完全理解。border・bg・opacity との組み合わせや、hove ...

続きを見る