EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS 背景とボーダー：色、グラデーション、ボーダー半径、ボーダー制御

背景色 (bg-*)

bg-* クラスは要素の背景色を設定します。豊富なプリセット色と不透明度をサポートしています。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景色デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基本の背景色</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 text-white p-4 rounded text-center">red-500</div>
        <div class="bg-blue-500 text-white p-4 rounded text-center">blue-500</div>
        <div class="bg-green-500 text-white p-4 rounded text-center">green-500</div>
        <div class="bg-yellow-500 text-white p-4 rounded text-center">yellow-500</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">purple-500</div>
        <div class="bg-pink-500 text-white p-4 rounded text-center">pink-500</div>
        <div class="bg-indigo-500 text-white p-4 rounded text-center">indigo-500</div>
        <div class="bg-gray-500 text-white p-4 rounded text-center">gray-500</div>
      </div>
    </div>

    <!-- 色の濃淡 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">色の濃淡 (50-950)</h3>
      <div class="space-y-2">
        <div class="bg-blue-50 text-blue-900 p-3 rounded">blue-50</div>
        <div class="bg-blue-100 text-blue-900 p-3 rounded">blue-100</div>
        <div class="bg-blue-200 text-blue-900 p-3 rounded">blue-200</div>
        <div class="bg-blue-300 text-blue-900 p-3 rounded">blue-300</div>
        <div class="bg-blue-400 text-white p-3 rounded">blue-400</div>
        <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
        <div class="bg-blue-600 text-white p-3 rounded">blue-600</div>
        <div class="bg-blue-700 text-white p-3 rounded">blue-700</div>
        <div class="bg-blue-800 text-white p-3 rounded">blue-800</div>
        <div class="bg-blue-900 text-white p-3 rounded">blue-900</div>
        <div class="bg-blue-950 text-white p-3 rounded">blue-950</div>
      </div>
    </div>

    <!-- 不透明度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">背景の不透明度</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-blue-500/100 text-blue-900 p-4 rounded text-center">/100</div>
        <div class="bg-blue-500/75 text-blue-900 p-4 rounded text-center">/75</div>
        <div class="bg-blue-500/50 text-blue-900 p-4 rounded text-center">/50</div>
        <div class="bg-blue-500/25 text-blue-900 p-4 rounded text-center">/25</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

背景色クラスリファレンス：

クラス CSS 値 説明
bg-red-500 background-color: #ef4444 赤の背景
bg-blue-500 background-color: #3b82f6 青の背景
bg-transparent background-color: transparent 透明な背景
bg-current background-color: currentColor 現在のテキスト色
bg-white background-color: #fff 白の背景
bg-black background-color: #000 黒の背景
bg-blue-500/50 background-color: rgb(59 130 246 / 0.5) 青の50%不透明度

従来のCSSとTailwindの比較 従来の方法ではCSSでbackground-colorを設定し16進数値を覚える必要がありますが、Tailwindではbg-blue-500のようなセマンティックなクラス名で直接宣言できます。/50構文で不透明度の制御もサポートしています。

💡 ポイント： 色の濃淡は50（最も明るい）から950（最も暗い）まであり、500が標準の色合いです。/opacity構文を使って透明度を素早く調整できます。

グラデーション背景 (bg-gradient-*)

グラデーション背景はbg-gradient-to-*で方向を設定し、from-*、via-*、to-*で色を設定します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>グラデーション背景デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 線形グラデーションの方向 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">線形グラデーションの方向</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-r（右方向）</div>
        <div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-l（左方向）</div>
        <div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-b（下方向）</div>
        <div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-t（上方向）</div>
        <div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-br（右下）</div>
        <div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-bl（左下）</div>
        <div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tr（右上）</div>
        <div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tl（左上）</div>
      </div>
    </div>

    <!-- 3色グラデーション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">3色グラデーション (from-via-to)</h3>
      <div class="space-y-4">
        <div class="bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 text-white p-6 rounded text-center">青 → 緑 → 紫</div>
        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white p-6 rounded text-center">赤 → 黄 → 緑</div>
        <div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white p-6 rounded text-center">ピンク → 紫 → インディゴ</div>
      </div>
    </div>

    <!-- 実践例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践例</h3>
      <div class="space-y-4">
        <!-- グラデーションボタン -->
        <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          グラデーションボタン
        </button>
        <!-- グラデーションカード -->
        <div class="bg-gradient-to-br from-cyan-500 to-blue-600 text-white p-6 rounded-lg">
          <h4 class="text-xl font-bold mb-2">グラデーションカード</h4>
          <p class="opacity-90">グラデーション背景で視覚的魅力を演出</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

グラデーションクラスリファレンス：

クラス CSS 値 説明
bg-gradient-to-r background-image: linear-gradient(to right, ...) 右方向グラデーション
bg-gradient-to-l background-image: linear-gradient(to left, ...) 左方向グラデーション
bg-gradient-to-b background-image: linear-gradient(to bottom, ...) 下方向グラデーション
bg-gradient-to-t background-image: linear-gradient(to top, ...) 上方向グラデーション
from-blue-500 --tw-gradient-from: #3b82f6 開始色
via-green-500 --tw-gradient-via: #22c55e 中間色
to-purple-500 --tw-gradient-to: #a855f7 終了色

従来のCSSとTailwindの比較 従来の方法ではCSSにbackground-image: linear-gradient(to right, #3b82f6, #a855f7)と書く必要がありますが、Tailwindではbg-gradient-to-r from-blue-500 to-purple-500クラス名で直接宣言できます。

💡 ポイント： via-*はオプションの中間色です。via-*がない場合、グラデーションはfrom-*からto-*へ直接移行します。

背景画像 (bg-*)

背景画像クラスはbg-*を使用して画像のパス、サイズ、位置を設定します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景画像デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 背景画像のサイズ -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">背景画像のサイズ</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="h-48 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-cover</div>
        </div>
        <div class="h-48 bg-contain bg-center bg-no-repeat rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-contain</div>
        </div>
      </div>
    </div>

    <!-- 背景画像の位置 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">背景画像の位置</h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="h-32 bg-cover bg-top rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-top</div>
        </div>
        <div class="h-32 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-center</div>
        </div>
        <div class="h-32 bg-cover bg-bottom rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-bottom</div>
        </div>
      </div>
    </div>

    <!-- ヒーローセクション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ヒーローセクションの例</h3>
      <div class="h-64 bg-cover bg-center rounded-lg relative" style="background-image: url('https://picsum.photos/800/400')">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/80 to-purple-600/80 rounded-lg"></div>
        <div class="relative h-full flex flex-col items-center justify-center text-white">
          <h2 class="text-3xl font-bold mb-4">ウェブサイトへようこそ</h2>
          <p class="text-lg opacity-90">Tailwind CSS で美しい背景効果を作成</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

背景画像クラスリファレンス：

クラス CSS 値 説明
bg-cover background-size: cover コンテナをカバー
bg-contain background-size: contain コンテナに収める
bg-auto background-size: auto 元のサイズ
bg-center background-position: center 中央揃え
bg-top background-position: top 上揃え
bg-bottom background-position: bottom 下揃え
bg-no-repeat background-repeat: no-repeat 繰り返しなし
bg-repeat background-repeat: repeat 繰り返し（デフォルト）

従来のCSSとTailwindの比較 従来の方法ではCSSにbackground-size、background-position、background-repeatなどの複数のプロパティを設定する必要がありますが、Tailwindではbg-cover、bg-center、bg-no-repeatなどのクラス名で直接宣言できます。

💡 ポイント： bg-gradient-to-r from-blue-600/80 to-purple-600/80を使って背景画像にグラデーションマスクをオーバーレイすると、テキストの読みやすさが向上します。

ボーダー半径 (rounded-*)

rounded-* クラスは要素のボーダー半径を設定します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボーダー半径デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本のボーダー半径 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基本のボーダー半径</h3>
      <div class="flex flex-wrap gap-4 items-end">
        <div class="w-24 h-24 bg-blue-500 rounded-none flex items-center justify-center text-white text-xs">rounded-none</div>
        <div class="w-24 h-24 bg-blue-500 rounded-sm flex items-center justify-center text-white text-xs">rounded-sm</div>
        <div class="w-24 h-24 bg-blue-500 rounded flex items-center justify-center text-white text-xs">rounded</div>
        <div class="w-24 h-24 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs">rounded-md</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xs">rounded-lg</div>
        <div class="w-24 h-24 bg-blue-500 rounded-xl flex items-center justify-center text-white text-xs">rounded-xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-2xl flex items-center justify-center text-white text-xs">rounded-2xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">rounded-full</div>
      </div>
    </div>

    <!-- 辺ごとのボーダー半径 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">辺ごとのボーダー半径</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-500 rounded-t-lg flex items-center justify-center text-white text-sm">rounded-t-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-r-lg flex items-center justify-center text-white text-sm">rounded-r-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-b-lg flex items-center justify-center text-white text-sm">rounded-b-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-l-lg flex items-center justify-center text-white text-sm">rounded-l-lg</div>
      </div>
    </div>

    <!-- 角ごとのボーダー半径 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">角ごとのボーダー半径</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-500 rounded-tl-lg flex items-center justify-center text-white text-sm">rounded-tl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-tr-lg flex items-center justify-center text-white text-sm">rounded-tr-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-bl-lg flex items-center justify-center text-white text-sm">rounded-bl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-br-lg flex items-center justify-center text-white text-sm">rounded-br-lg</div>
      </div>
    </div>

    <!-- 実践例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践例</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">アバター</div>
        <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">角丸ボタン</button>
        <div class="bg-gray-200 px-4 py-2 rounded-full text-sm">タグ</div>
        <div class="bg-orange-500 w-4 h-4 rounded-full"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

ボーダー半径クラスリファレンス：

クラス CSS 値 説明
rounded-none border-radius: 0 角丸なし
rounded-sm border-radius: 0.125rem 小さな角丸
rounded border-radius: 0.25rem デフォルトの角丸
rounded-md border-radius: 0.375rem 中程度の角丸
rounded-lg border-radius: 0.5rem 大きな角丸
rounded-xl border-radius: 0.75rem 特大の角丸
rounded-2xl border-radius: 1rem 2倍特大の角丸
rounded-full border-radius: 9999px 完全な角丸（円形）
rounded-t-lg 上の半径 0.5rem 上辺のみ
rounded-r-lg 右の半径 0.5rem 右辺のみ
rounded-b-lg 下の半径 0.5rem 下辺のみ
rounded-l-lg 左の半径 0.5rem 左辺のみ
rounded-tl-lg 左上の半径 0.5rem 左上角のみ
rounded-tr-lg 右上の半径 0.5rem 右上角のみ
rounded-bl-lg 左下の半径 0.5rem 左下角のみ
rounded-br-lg 右下の半径 0.5rem 右下角のみ

従来のCSSとTailwindの比較 従来の方法ではCSSにborder-radiusプロパティを設定する必要がありますが、Tailwindではrounded-lgやrounded-fullなどのクラス名で直接宣言できます。辺ごとや角ごとの角丸にはrounded-t-lg、rounded-tl-lgなどを使用します。

💡 ポイント： rounded-fullは円形のアバターや丸いボタンなどを作成するのに使用します。幅と高さを同じにすることで、完璧な円が作成できます。

ボーダー (border-*)

border-* クラスは要素のボーダーの幅、色、スタイルを設定します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボーダーデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- ボーダーの幅 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ボーダーの幅</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-0 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-0</div>
        <div class="w-24 h-24 border border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border</div>
        <div class="w-24 h-24 border-2 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-2</div>
        <div class="w-24 h-24 border-4 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-4</div>
        <div class="w-24 h-24 border-8 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-8</div>
      </div>
    </div>

    <!-- ボーダーの色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ボーダーの色</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-2 border-red-500 flex items-center justify-center text-xs">赤</div>
        <div class="w-24 h-24 border-2 border-blue-500 flex items-center justify-center text-xs">青</div>
        <div class="w-24 h-24 border-2 border-green-500 flex items-center justify-center text-xs">緑</div>
        <div class="w-24 h-24 border-2 border-purple-500 flex items-center justify-center text-xs">紫</div>
        <div class="w-24 h-24 border-2 border-gray-300 flex items-center justify-center text-xs">グレー</div>
      </div>
    </div>

    <!-- 辺ごとのボーダー -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">辺ごとのボーダー</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-t-4 border-blue-500 flex items-center justify-center text-sm">border-t-4</div>
        <div class="w-32 h-24 border-r-4 border-green-500 flex items-center justify-center text-sm">border-r-4</div>
        <div class="w-32 h-24 border-b-4 border-purple-500 flex items-center justify-center text-sm">border-b-4</div>
        <div class="w-32 h-24 border-l-4 border-orange-500 flex items-center justify-center text-sm">border-l-4</div>
      </div>
    </div>

    <!-- ボーダーのスタイル -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ボーダーのスタイル</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-2 border-solid border-blue-500 flex items-center justify-center text-sm">border-solid</div>
        <div class="w-32 h-24 border-2 border-dashed border-blue-500 flex items-center justify-center text-sm">border-dashed</div>
        <div class="w-32 h-24 border-2 border-dotted border-blue-500 flex items-center justify-center text-sm">border-dotted</div>
        <div class="w-32 h-24 border-2 border-double border-blue-500 flex items-center justify-center text-sm">border-double</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

ボーダークラスリファレンス：

クラス CSS 値 説明
border-0 border-width: 0 ボーダーなし
border border-width: 1px 1px ボーダー
border-2 border-width: 2px 2px ボーダー
border-4 border-width: 4px 4px ボーダー
border-8 border-width: 8px 8px ボーダー
border-blue-500 border-color: #3b82f6 青のボーダー
border-t-4 border-top-width: 4px 上ボーダー 4px
border-solid border-style: solid 実線ボーダー
border-dashed border-style: dashed 破線ボーダー
border-dotted border-style: dotted 点線ボーダー

従来のCSSとTailwindの比較 従来の方法ではCSSにborder-width、border-color、border-styleなどの複数のプロパティを設定する必要がありますが、Tailwindではborder-2、border-blue-500、border-dashedなどのクラス名で直接宣言できます。

区切り線 (divide-*)

divide-* クラスは、子要素の間に区切り線を追加します。各子要素に個別にボーダーを設定する必要がありません。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>区切り線デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 垂直区切り線 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">垂直区切り線（横並びレイアウト）</h3>
      <div class="flex divide-x divide-gray-300">
        <div class="flex-1 p-4 text-center">項目 1</div>
        <div class="flex-1 p-4 text-center">項目 2</div>
        <div class="flex-1 p-4 text-center">項目 3</div>
        <div class="flex-1 p-4 text-center">項目 4</div>
      </div>
    </div>

    <!-- 水平区切り線 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">水平区切り線（縦並びレイアウト）</h3>
      <div class="divide-y divide-gray-300">
        <div class="p-4">項目 1</div>
        <div class="p-4">項目 2</div>
        <div class="p-4">項目 3</div>
        <div class="p-4">項目 4</div>
      </div>
    </div>

    <!-- 異なる色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">異なる色の区切り線</h3>
      <div class="space-y-4">
        <div class="divide-y divide-blue-300">
          <div class="p-3">青の区切り線</div>
          <div class="p-3">項目 2</div>
        </div>
        <div class="divide-y divide-green-300">
          <div class="p-3">緑の区切り線</div>
          <div class="p-3">項目 2</div>
        </div>
        <div class="divide-y divide-purple-300">
          <div class="p-3">紫の区切り線</div>
          <div class="p-3">項目 2</div>
        </div>
      </div>
    </div>

    <!-- 実践例：リスト -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践例：リスト</h3>
      <div class="divide-y divide-gray-200">
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">山田太郎</div>
            <div class="text-sm text-gray-500">yamada@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">編集</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">鈴木花子</div>
            <div class="text-sm text-gray-500">suzuki@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">編集</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">佐藤次郎</div>
            <div class="text-sm text-gray-500">sato@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">編集</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では各子要素にborder-bottomを設定し、最後の要素のボーダーを別途処理する必要があります。Tailwindのdivide-*は子要素間に自動的に区切り線を追加し、余分な処理が不要です。

💡 ポイント： divide-yは子要素間に水平区切り線を追加し、divide-xは垂直区切り線を追加します。方向がflexの方向と逆になることに注意してください。

リングアウトライン (ring-*)

ring-* クラスは要素の周囲にリングアウトラインを追加します。outlineと似ていますが、box-shadowで実装されているため、レイアウトに影響しません。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リングアウトラインデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本リング -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基本のリングアウトライン</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-1 ring-blue-500 rounded flex items-center justify-center text-xs">ring-1</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">ring-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-4 ring-blue-500 rounded flex items-center justify-center text-xs">ring-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-8 ring-blue-500 rounded flex items-center justify-center text-xs">ring-8</div>
      </div>
    </div>

    <!-- リングの色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">リングの色</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-red-50 ring-2 ring-red-500 rounded flex items-center justify-center text-xs">赤</div>
        <div class="w-24 h-24 bg-blue-50 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">青</div>
        <div class="w-24 h-24 bg-green-50 ring-2 ring-green-500 rounded flex items-center justify-center text-xs">緑</div>
        <div class="w-24 h-24 bg-purple-50 ring-2 ring-purple-500 rounded flex items-center justify-center text-xs">紫</div>
      </div>
    </div>

    <!-- ring-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ring-offset（オフセットリング）</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-2 rounded flex items-center justify-center text-xs">offset-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-4 rounded flex items-center justify-center text-xs">offset-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-8 rounded flex items-center justify-center text-xs">offset-8</div>
      </div>
    </div>

    <!-- 実践例：フォーカス状態 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践例：フォーカス状態</h3>
      <div class="space-y-4">
        <input type="text" placeholder="クリックしてフォーカス効果を確認" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg ring-2 ring-blue-600 ring-offset-2 hover:bg-blue-700">
          リングボタン
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

リングアウトラインクラスリファレンス：

クラス CSS 値 説明
ring-0 box-shadow: 0 0 0 0px ... リングなし
ring-1 box-shadow: 0 0 0 1px ... 1px リング
ring-2 box-shadow: 0 0 0 2px ... 2px リング
ring-4 box-shadow: 0 0 0 4px ... 4px リング
ring-8 box-shadow: 0 0 0 8px ... 8px リング
ring-blue-500 --tw-ring-color: #3b82f6 青のリング
ring-offset-2 box-shadow: 0 0 0 2px white, 0 0 0 4px ... 2px オフセット
ring-offset-4 box-shadow: 0 0 0 4px white, 0 0 0 8px ... 4px オフセット

従来のCSSとTailwindの比較 従来の方法ではCSSにbox-shadowやoutlineを設定する必要がありますが、Tailwindではring-2、ring-blue-500、ring-offset-2などのクラス名で直接宣言できます。ring-*はbox-shadowで実装されているため、レイアウトに影響しません。

💡 ポイント： ring-*はフォーカス状態（focus:ring-2）や選択状態によく使用されます。ring-offset-*はリングと要素の間に隙間を作ります。

アウトライン

outline-* クラスは要素のアウトラインを設定します。ring-*と似ていますが、ネイティブのoutlineプロパティを使用します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アウトラインデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本アウトライン -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基本のアウトライン</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-blue-100 outline outline-1 outline-blue-500 rounded flex items-center justify-center text-sm">outline-1</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-2 outline-blue-500 rounded flex items-center justify-center text-sm">outline-2</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-4 outline-blue-500 rounded flex items-center justify-center text-sm">outline-4</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-8 outline-blue-500 rounded flex items-center justify-center text-sm">outline-8</div>
      </div>
    </div>

    <!-- outline-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">outline-offset</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-0 rounded flex items-center justify-center text-sm">offset-0</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-2 rounded flex items-center justify-center text-sm">offset-2</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-4 rounded flex items-center justify-center text-sm">offset-4</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-8 rounded flex items-center justify-center text-sm">offset-8</div>
      </div>
    </div>

    <!-- アウトラインのスタイル -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">アウトラインのスタイル</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dashed outline-purple-500 rounded flex items-center justify-center text-sm">dashed</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dotted outline-purple-500 rounded flex items-center justify-center text-sm">dotted</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-double outline-purple-500 rounded flex items-center justify-center text-sm">double</div>
      </div>
    </div>

    <!-- 実践例：フォーカス状態 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践例：フォーカス状態</h3>
      <div class="space-y-4">
        <input type="text" placeholder="クリックしてフォーカス効果を確認" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg outline outline-2 outline-offset-2 outline-blue-600 hover:bg-blue-700">
          アウトラインボタン
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではCSSにoutline-width、outline-color、outline-style、outline-offsetなどの複数のプロパティを設定する必要がありますが、Tailwindではoutline-2、outline-blue-500、outline-offset-2などのクラス名で直接宣言できます。

⚠️ 注意： outlineはレイアウトに影響しません（スペースを取りません）、フォーカス状態によく使用されます。ringはbox-shadowを使用し、これもレイアウトに影響しません。両方を同時に使用することもできます。

総合例

上記のすべての概念を組み合わせた、背景とボーダーの完全な例です。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景とボーダー 総合例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- グラデーションカード -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
      <h2 class="text-3xl font-bold mb-4">グラデーションカード</h2>
      <p class="opacity-90 mb-6">グラデーション背景、ボーダー半径、シャドウを組み合わせて美しいカードを作成</p>
      <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
        始めましょう
      </button>
    </div>

    <!-- ボーダー付きフォーム -->
    <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
      <h3 class="text-xl font-semibold mb-6 pb-4 border-b border-gray-200">ログインフォーム</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">メールアドレス</label>
          <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">パスワード</label>
          <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          サインイン
        </button>
      </div>
    </div>

    <!-- 機能リスト -->
    <div class="bg-white rounded-xl shadow-lg divide-y divide-gray-200">
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-blue-100 rounded-full ring-2 ring-blue-500 flex items-center justify-center">
          <span class="text-blue-600 text-xl">1</span>
        </div>
        <div>
          <h4 class="font-semibold">グラデーション背景</h4>
          <p class="text-sm text-gray-600">多方向、多色のグラデーションをサポート</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-green-100 rounded-full ring-2 ring-green-500 flex items-center justify-center">
          <span class="text-green-600 text-xl">2</span>
        </div>
        <div>
          <h4 class="font-semibold">角丸ボーダー</h4>
          <p class="text-sm text-gray-600">柔軟なボーダー半径とボーダー制御</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-purple-100 rounded-full ring-2 ring-purple-500 flex items-center justify-center">
          <span class="text-purple-600 text-xl">3</span>
        </div>
        <div>
          <h4 class="font-semibold">リングアウトライン</h4>
          <p class="text-sm text-gray-600">フォーカス状態と選択効果</p>
        </div>
      </div>
    </div>

    <!-- 画像グリッド -->
    <div class="grid grid-cols-3 gap-4">
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=1')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=2')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=3')"></div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではグラデーションカード、フォームのスタイリング、区切り線リストなどの効果を実現するために大量のCSSを書く必要がありますが、Tailwindでは背景、ボーダー、ボーダー半径のユーティリティクラスを使ってHTML内で直接すべてを実現できます。

❓ よくある質問

Q ring と outline の違いは何ですか？
A ringはbox-shadowで実装され、ring-offsetでオフセットをサポートします。outlineはネイティブのoutlineプロパティを使用し、outline-offsetをサポートします。どちらもレイアウトに影響しません。フォーカス状態にはringが推奨され、ネイティブアウトラインにはoutlineが適しています。
Q グラデーションテキストを作成するにはどうすればよいですか？
A bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparentを使用します。bg-clip-textは背景をテキスト領域にクリップし、text-transparentはテキストを透明にしてグラデーション背景が透けて見えるようにします。
Q なぜ divide-y の方向が flex の方向と逆なのですか？
A divide-yは子要素間に水平区切り線を追加するもので、縦に積まれた子要素に適しています。divide-xは子要素間に垂直区切り線を追加するもので、横に並んだ子要素に適しています。正しく表示するために、方向はflexの方向と逆になっています。
Q なぜ rounded-full で円ができるのですか？
A rounded-fullはborder-radius: 9999pxを設定します。要素の幅と高さが同じ場合、9999pxは要素の寸法よりはるかに大きいため、ブラウザが自動的に50%として計算し、完璧な円になります。

📖 まとめ

📝 課題

  1. ⭐ bg-gradient-to-r from-blue-600 to-purple-600とrounded-fullを使ってグラデーションボタンを作成してください

  2. ⭐⭐ divide-y divide-gray-200で区切り線を持つユーザーリストを作成してください。各ユーザー項目には円形のアバター（rounded-full）とユーザー情報を含めてください

  3. ⭐⭐⭐ グラデーション背景、ボーダー付きフォームカード、フォーカス状態（focus:ring-2）を持つ入力フィールド、角丸ボタンを備えたログインページを作成してください

100%