Tailwind CSS背景・ボーダー・シャドウの応用テクニック｜コピペで使える実践コード集

Tailwind
CSSで背景色やボーダーは書ける。でもグラデーション、リングユーティリティ、カスタムシャドウあたりになると、毎回ドキュメントを行き来していませんか。

この記事では、背景・ボーダー・シャドウの応用テクニックを実装コード付きでまとめています。最後にカードUI・ヒーローセクション・フォームの3パターンをコピペ用に載せているので、手を動かしながら読んでみてください。

色指定やサイズの基本がまだ不安な方は、先にTailwind
CSS基本クラスの使い方を確認しておくとスムーズです。

背景スタイル

背景色（bg-{color}）

基本は bg-{color}-{shade} です。shade
は50〜950の範囲で、数字が大きいほど濃くなります。

<div class="bg-blue-500 text-white p-4">青背景</div>
<div class="bg-gray-100 p-4">薄いグレー背景</div>

透過度をつけたいときは、スラッシュ記法を使います。

<!-- 50%透過の青 -->
<div class="bg-blue-500/50 p-4">半透明</div>

<!-- 25%透過 -->
<div class="bg-black/25 p-4">うっすら黒</div>

bg-blue-500/50 の /50
が不透明度です。0（完全透明）から100（不透明）まで指定できます。オーバーレイを重ねるときによく使います。

グラデーション（bg-gradient-to-{方向}）

Tailwindの線形グラデーションは3つのクラスの組み合わせで作ります。

1. 方向: bg-gradient-to-r（右へ）,
   bg-gradient-to-br（右下へ）, etc.
2. 開始色: from-{color}
3. 終了色: to-{color}
4. 中間色（任意）: via-{color}

<!-- 青→紫のグラデーション（右方向） -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6 rounded-lg">
  右方向グラデーション
</div>

<!-- 3色グラデーション（via で中間色を指定） -->
<div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 text-white p-6 rounded-lg">
  3色グラデーション
</div>

方向の指定は全8パターンあります。

ヒーローセクションやCTAボタンに
bg-gradient-to-br from-blue-600 to-purple-700
を当てるだけで、一気に印象が変わります。個人的に、グラデーション1つで「ちゃんとしたサイト感」が出るのがTailwindの好きなところです。

背景画像

任意値（arbitrary values）で背景画像を指定できます。

<div class="bg-[url('/images/hero.jpg')] bg-cover bg-center h-64">
  <!-- 背景画像の上にコンテンツ -->
</div>

よく組み合わせるクラスをまとめておきます。

ボーダー

基本（border,
border-{color}, border-{width}）

border
だけで1pxのボーダーがつきます。色と太さを変えたいときは追加で指定します。

<!-- デフォルト（1px, グレー） -->
<div class="border p-4">基本ボーダー</div>

<!-- 色を変更 -->
<div class="border border-blue-500 p-4">青ボーダー</div>

<!-- 太さを変更（2px） -->
<div class="border-2 border-red-500 p-4">太めの赤ボーダー</div>

<!-- 片側だけ -->
<div class="border-b-2 border-gray-300 p-4">下線のみ</div>

片側指定は
border-t（上）、border-r（右）、border-b（下）、border-l（左）です。タブUIの下線やセクション区切りに重宝します。

角丸（rounded-{size}）

<div class="rounded p-4 bg-gray-100">やや角丸（4px）</div>
<div class="rounded-lg p-4 bg-gray-100">角丸（8px）</div>
<div class="rounded-xl p-4 bg-gray-100">大きめ角丸（12px）</div>
<div class="rounded-full p-4 bg-gray-100">完全な円（50%）</div>

片側だけ丸くすることもできます。カードの上部だけ丸くしたいケースで使います。

<!-- 上側だけ角丸 -->
<div class="rounded-t-lg bg-blue-500 text-white p-4">ヘッダー</div>
<div class="bg-white p-4">コンテンツ</div>

rounded-t-lg（上側）、rounded-b-lg（下側）、rounded-l-lg（左側）、rounded-r-lg（右側）。正直、rounded-t
と rounded-b
だけ覚えておけば実務の9割はカバーできます。

リングユーティリティ（ring-{width}）

ring は box-shadow
ベースのアウトラインです。border
と違って要素のサイズに影響しません。フォーカス状態のスタイリングで真価を発揮します。

<!-- 常時表示のリング -->
<div class="ring-2 ring-blue-500 p-4 rounded">リング付き</div>

<!-- フォーカス時にリング表示（フォームで定番） -->
<input type="text"
  class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
  placeholder="フォーカスしてみてください">

focus:ring-2 focus:ring-blue-500
の組み合わせは、フォーム要素のフォーカスインジケータとして定番です。focus:outline-none
でブラウザデフォルトのアウトラインを消して、ring
で置き換えるパターン。これ1つ覚えれば十分です。

分割線（divide-{axis}-{width}）

リスト要素の間に線を引くとき、各要素に border-b
をつけると最後の要素にも線がついてしまいます。divide
なら要素間だけに線が入ります。

<ul class="divide-y divide-gray-200">
  <li class="py-3">アイテム1</li>
  <li class="py-3">アイテム2</li>
  <li class="py-3">アイテム3（下に線なし）</li>
</ul>

divide-y が縦方向（横線）、divide-x
が横方向（縦線）です。色は divide-{color}
で指定します。地味ですが、リストUIを作るときの定番なので知っておいて損はありません。

シャドウ & エフェクト

ボックスシャドウ（shadow-{size}）

Tailwindのシャドウは6段階のプリセットがあります。

<div class="shadow-sm p-4 bg-white rounded">shadow-sm</div>
<div class="shadow p-4 bg-white rounded">shadow（デフォルト）</div>
<div class="shadow-md p-4 bg-white rounded">shadow-md</div>
<div class="shadow-lg p-4 bg-white rounded">shadow-lg</div>
<div class="shadow-xl p-4 bg-white rounded">shadow-xl</div>
<div class="shadow-2xl p-4 bg-white rounded">shadow-2xl</div>

カード系のUIなら shadow-md か shadow-lg
あたりが無難です。ホバーで影を大きくする演出もよく見かけます。

<div class="shadow-md hover:shadow-xl transition-shadow duration-300 p-6 bg-white rounded-lg">
  ホバーで影が大きくなる
</div>

transition-shadow duration-300
を忘れると影がパッと切り替わってしまうので注意してください。

カスタムシャドウ

プリセットで足りないときは任意値で指定できます。

<!-- 色付きシャドウ -->
<div class="shadow-lg shadow-blue-500/30 p-4 bg-white rounded-lg">
  青いシャドウ
</div>

<!-- 完全カスタム -->
<div class="shadow-[0_4px_20px_rgba(0,0,0,0.15)] p-4 bg-white rounded-lg">
  カスタム値
</div>

shadow-blue-500/30 は「shadow-lg
の形状で色だけ青（30%透過）にする」という指定です。ブランドカラーに合わせた影をつけたいときに使えます。

backdrop-blur 等のフィルター

背景をぼかす backdrop-blur
は、半透明カードやオーバーレイで活躍します。

<!-- すりガラス風カード -->
<div class="bg-white/70 backdrop-blur-md p-6 rounded-xl">
  背景がぼんやり透ける
</div>

関連するフィルタークラスも紹介しておきます。

bg-white/70 backdrop-blur-md
の組み合わせは、いわゆる「すりガラス（glassmorphism）」の定番です。iOS風のUIを作りたいときに一発で雰囲気が出ます。

実践コピペ集（3パターン）

ここまでの知識を組み合わせた実践パターンです。そのままコピペして使えます。

パターン1:
カードUI（グラデーション背景 + 角丸 + シャドウ）

<div class="max-w-sm mx-auto">
  <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl overflow-hidden">
    <div class="p-6 text-white">
      <span class="text-sm font-medium bg-white/20 px-3 py-1 rounded-full">NEW</span>
      <h3 class="text-xl font-bold mt-4">プレミアムプラン</h3>
      <p class="text-blue-100 mt-2 text-sm">すべての機能が使い放題</p>
      <p class="text-4xl font-bold mt-4">¥980<span class="text-base font-normal">/月</span></p>
    </div>
    <div class="bg-white p-6">
      <ul class="space-y-3 text-sm text-gray-600">
        <li class="flex items-center gap-2">
          <span class="text-green-500">✓</span> 無制限ストレージ
        </li>
        <li class="flex items-center gap-2">
          <span class="text-green-500">✓</span> 優先サポート
        </li>
        <li class="flex items-center gap-2">
          <span class="text-green-500">✓</span> API アクセス
        </li>
      </ul>
      <button class="w-full mt-6 bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition-colors">
        今すぐ始める
      </button>
    </div>
  </div>
</div>

ポイントは bg-gradient-to-br
でヘッダー部分にグラデーション、rounded-2xl shadow-xl
で立体感、bg-white/20
のバッジで半透明アクセントを入れているところです。

パターン2:
ヒーローセクション（背景画像 + オーバーレイ + テキスト）

<section class="relative h-96 overflow-hidden">
  <!-- 背景画像 -->
  <div class="absolute inset-0 bg-[url('/images/hero.jpg')] bg-cover bg-center"></div>

  <!-- 暗いオーバーレイ -->
  <div class="absolute inset-0 bg-black/60"></div>

  <!-- テキスト -->
  <div class="relative z-10 flex items-center justify-center h-full px-4">
    <div class="text-center text-white max-w-2xl">
      <h1 class="text-3xl md:text-5xl font-bold mb-4">あなたのアイデアを形にする</h1>
      <p class="text-lg text-gray-200 mb-8">シンプルなツールで、複雑なことを実現する</p>
      <a href="#"
        class="inline-block bg-gradient-to-r from-blue-500 to-purple-600 px-8 py-4 rounded-lg font-bold hover:shadow-lg hover:shadow-purple-500/30 transition-all">
        無料で始める
      </a>
    </div>
  </div>
</section>

構造は3層です。背景画像（absolute inset-0）→
オーバーレイ（bg-black/60）→
テキスト（relative z-10）。bg-black/60
の透過度を変えるだけで明暗を調整できます。CTAボタンの
hover:shadow-lg hover:shadow-purple-500/30
で、ホバー時に色付きシャドウが出る演出を加えています。

パターン3:
入力フォーム（リングフォーカス + ボーダー）

<form class="max-w-md mx-auto space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">名前</label>
    <input type="text"
      class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
      placeholder="山田太郎">
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">メールアドレス</label>
    <input type="email"
      class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
      placeholder="taro@example.com">
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">メッセージ</label>
    <textarea rows="4"
      class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
      placeholder="お問い合わせ内容"></textarea>
  </div>

  <button type="submit"
    class="w-full bg-blue-600 text-white py-3 rounded-lg font-bold shadow-md hover:bg-blue-700 hover:shadow-lg transition-all">
    送信する
  </button>
</form>

フォーム要素のフォーカスは
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
のセットです。focus:border-transparent
を入れないと、リングとボーダーが二重に見えるので注意。ぶっちゃけ、このクラスの組み合わせはプロジェクト単位でコンポーネント化しておくのがベストです。再利用できるUIコンポーネント集でコンポーネント化の方法を解説しています。

よくあるミス3選

ミス1:
グラデーションの to-{color} を忘れる

<!-- ❌ to がない → グラデーションにならず透明にフェードする -->
<div class="bg-gradient-to-r from-blue-500 p-4">あれ？</div>

<!-- ✅ to を指定する -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4">正常なグラデーション</div>

from
だけ指定すると、デフォルトで透明に向かってフェードします。意図的にやるならアリですが、たいていは
to の書き忘れです。

ミス2: ring と
border の違いを理解していない

<!-- ❌ border を追加するとレイアウトがずれる -->
<div class="w-48 border-4 border-blue-500 p-4">要素が4px大きくなる</div>

<!-- ✅ ring はレイアウトに影響しない -->
<div class="w-48 ring-4 ring-blue-500 p-4">サイズそのまま</div>

border
はボックスモデルの一部なので、要素のサイズが変わります。ring
は box-shadow
ベースなのでサイズに影響しません。ホバーやフォーカスで枠線をつけるとき、border
だとガタつきの原因になります。

ミス3: shadow
の色指定で透過度を忘れる

<!-- ❌ 透過度なし → 影が濃すぎて不自然 -->
<div class="shadow-lg shadow-blue-500 p-4 bg-white rounded">重い...</div>

<!-- ✅ /30 等で透過度を指定 -->
<div class="shadow-lg shadow-blue-500/30 p-4 bg-white rounded">自然な色付きシャドウ</div>

色付きシャドウは /20 〜 /40
くらいが自然です。透過度なしだとベタ塗りのような影になります。

まとめ

背景・ボーダー・シャドウの応用テクニックを紹介しました。

基本クラスの復習にはTailwind
CSS基本クラスの使い方、レスポンシブ対応はTailwind
CSSレスポンシブ実装ガイド、テーマの拡張やカスタムカラーの追加はTailwind
CSSカスタマイズ入門で解説しています。

参考になれば幸いです。

この記事は「Tailwind CSS完全ガイド」シリーズの一部です。 → シリーズ全体を見る：Tailwind
CSS完全ガイド