Tailwind CSS シャドウ

現代のウェブデザインにおいて、シャドウ効果は視覚的な階層と奥行き感を生み出す重要なツールです。

Tailwind CSS は、強力で柔軟なシャドウユーティリティクラスを提供しており、さまざまなシャドウ効果を簡単に実現できます。

この記事では、Tailwind CSS のシャドウシステムについて、box-shadow（ボックスシャドウ）、text-shadow（テキストシャドウ）、シャドウの色と不透明度の制御、内側シャドウ効果の応用を含めて包括的に紹介します。

CSS シャドウとは？

Tailwind の具体的な実装に入る前に、CSS シャドウの基本概念を理解しましょう。

CSS シャドウは主に2つのタイプに分けられます：

  1. ボックスシャドウ (box-shadow)：要素のボックスモデル全体に適用されます
  2. テキストシャドウ (text-shadow)：要素のテキストコンテンツにのみ適用されます

シャドウ効果には以下のことができます：

  • 要素の視覚的な階層を強化する
  • 「浮いている」効果を生み出す
  • 光と奥行きをシミュレートする
  • 重要なコンテンツを強調する

Tailwind の box-shadow

Tailwind は、微細なものから強いものまで、6つのレベルに分かれた一連のプリセット box-shadow ユーティリティクラスを提供しています：

例

<div class="shadow-sm">小型シャドウ</div>
<div class="shadow">デフォルトシャドウ</div>
<div class="shadow-md">中程度のシャドウ</div>
<div class="shadow-lg">大型シャドウ</div>
<div class="shadow-xl">超大シャドウ</div>
<div class="shadow-2xl">特大シャドウ</div>

試してみる »

シャドウレベル比較表

クラス名 説明 適用シーン
shadow-sm 非常に微細なシャドウ ボタンのホバー、軽い浮き上がり
shadow デフォルトシャドウ（中程度のサイズ） カード、通常の要素
shadow-md 中程度のシャドウ モーダル、重要な通知
shadow-lg 大型シャドウ フローティングパネル、強調したい要素
shadow-xl 超大シャドウ 特別に強調したい要素
shadow-2xl 特大シャドウ 非常に目立たせたい要素

コード例と実践

例

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  <div class="text-xl font-medium text-black">Tailwind シャドウの例</div>
  <p class="text-gray-500">これは shadow-md を使用したカードの例です</p>
</div>

試してみる »

効果の説明：

  • 白い背景のカードを作成しました
  • 使用したshadow-mdクラスで中程度のシャドウを追加
  • 角丸（rounded-xl）と組み合わせることで、シャドウ効果がより自然になります

Tailwind の text-shadow

Tailwind はデフォルトでは text-shadow ユーティリティクラスを含みませんが、以下の方法で追加できます：

方法1：プラグインを使用

インストールtailwindcss-textshadowプラグイン：

例

npm install tailwindcss-textshadow

次にtailwind.config.jsで設定します：

例

module.exports = {
  plugins: [
    require('tailwindcss-textshadow')
  ],
  theme: {
    textShadow: {
      'sm': '1px 1px 2px rgba(0, 0, 0, 0.5)',
      'DEFAULT': '2px 2px 4px rgba(0, 0, 0, 0.5)',
      'lg': '4px 4px 8px rgba(0, 0, 0, 0.5)',
    }
  }
}

使用例：

例

<h1 class="text-shadow-lg">シャドウ付きの見出し</h1>

方法2：カスタムユーティリティクラス

CSS に追加：

例

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

シャドウの色と不透明度の制御

Tailwind では、ユーティリティクラスの組み合わせによってシャドウの色と不透明度を制御できます。

1. シャドウカラーユーティリティクラスを使用

例

<div class="shadow-lg shadow-blue-500/50">青色の半透明シャドウ</div>

構文の解説：

  • shadow-{color}：シャドウの色を設定（例：blue-500）
  • /{opacity}：シャドウの不透明度を設定（例：50 は 50% を意味）

2. 利用可能な色と不透明度

Tailwind はすべての組み込み色と任意の不透明度の値をサポートしています：

例

<div class="shadow-lg shadow-red-400/30">赤色の半透明シャドウ</div>
<div class="shadow-lg shadow-emerald-300/80">エメラルドグリーンの強いシャドウ</div>
<div class="shadow-lg shadow-purple-600/20">紫色の淡いシャドウ</div>

3. シャドウの色をカスタマイズ

にtailwind.config.jsで拡張：

例

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 4px 6px -1px rgba(156, 39, 176, 0.3)',
      }
    }
  }
}

内側シャドウ効果 (inset)

内側シャドウは、凹んだり押し込まれたような効果を作り出せ、ボタンや入力フィールドなどのインタラクティブ要素によく使用されます。

1. プリセットの内側シャドウクラスを使用

例

<div class="shadow-inner">内側シャドウ効果</div>

2. 内側シャドウをカスタマイズ

設定ファイルに追加：

例

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'inner-lg': 'inset 0 4px 6px 0 rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

3. 実際の適用例

例

<button class="px-4 py-2 bg-gray-100 rounded-lg shadow-inner hover:shadow-inner-lg">
クリックボタン
</button>

効果の説明：

  • デフォルト状態ではわずかな内側シャドウがあります
  • ホバー時に内側シャドウが強化され（hover:shadow-inner-lg)
  • ボタンが押されたような視覚効果が生まれます

高度なテクニックとベストプラクティス

1. 外側と内側のシャドウを組み合わせる

例

<div class="shadow-lg shadow-inner">外側シャドウ＋内側シャドウの組み合わせ</div>

2. レスポンシブシャドウ

例

<div class="shadow-sm md:shadow-lg">小さい画面では小さいシャドウ、大きい画面では大きいシャドウ</div>

3. ホバー状態とフォーカス状態

例

<button class="shadow hover:shadow-lg focus:shadow-outline">
インタラクティブボタン
</button>

4. シャドウアニメーション

例

<button class="shadow-md hover:shadow-xl transition-shadow duration-300">
トランジション効果付きのボタン
</button>

練習問題

  1. デフォルトで中程度のシャドウを持ち、ホバー時にシャドウが大きくなり色が変わるカードコンポーネントを作成する
  2. 内側シャドウ付きの入力フィールドをデザインし、フォーカスを取得すると内側シャドウが消えるようにする
  3. text-shadow を使用してネオン効果を生み出すテキスト見出しを実装する
  4. 外側と内側のシャドウを組み合わせて、立体感のあるボタンを作成する

要点のまとめ

主要ユーティリティクラス早見表

機能 クラス名の例 説明
ボックスシャドウ shadow, shadow-lg さまざまなサイズの外側シャドウ
内側シャドウ shadow-inner 要素の内側のシャドウ
シャドウの色 shadow-blue-500 シャドウの色を設定
シャドウの不透明度 shadow-blue-500/50 シャドウの不透明度を設定
テキストシャドウ text-shadow（カスタムが必要） テキストにシャドウを追加

ベストプラクティスの推奨事項

  1. 適度に使用する：シャドウはデザインを引き立てるものであり、注意を散らすものであってはなりません
  2. 一貫性を保つ：プロジェクト全体で似たようなシャドウの階層を保つ
  3. パフォーマンスを考慮する：複雑なシャドウを多用しすぎるとレンダリングパフォーマンスに影響を与える可能性があります
  4. 他のプロパティと組み合わせる：シャドウは角丸やトランジション効果と組み合わせるとより効果的です
その他の拡張