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

Tailwind CSS シャドウと効果：シャドウ、不透明度、ブレンドモード

シャドウ (shadow-*)

shadow-* クラスは要素のbox-shadowを設定します。shadow-smからshadow-2xlまで様々なサイズを提供しています。

例

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 p-6">
      <h3 class="font-semibold mb-4">シャドウのサイズ</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-sm text-center">
          <div class="text-sm font-medium">shadow-sm</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow text-center">
          <div class="text-sm font-medium">shadow</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md text-center">
          <div class="text-sm font-medium">shadow-md</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg text-center">
          <div class="text-sm font-medium">shadow-lg</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-xl text-center">
          <div class="text-sm font-medium">shadow-xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-2xl text-center">
          <div class="text-sm font-medium">shadow-2xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-inner text-center">
          <div class="text-sm font-medium">shadow-inner</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-none text-center">
          <div class="text-sm font-medium">shadow-none</div>
        </div>
      </div>
    </div>

    <!-- シャドウの色 -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">シャドウの色</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-blue-500/50 text-center">
          <div class="text-sm font-medium">blue-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-green-500/50 text-center">
          <div class="text-sm font-medium">green-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-purple-500/50 text-center">
          <div class="text-sm font-medium">purple-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-red-500/50 text-center">
          <div class="text-sm font-medium">red-500/50</div>
        </div>
      </div>
    </div>

    <!-- 実践的な応用 -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">実践的な応用</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- カードシャドウ -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h4 class="font-semibold mb-2">カードシャドウ</h4>
          <p class="text-gray-600 text-sm">ホバーでシャドウが強くなります</p>
        </div>
        <!-- ボタンのシャドウ -->
        <div class="flex items-center justify-center">
          <button class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-700 transition-all">
            ボタンのシャドウ
          </button>
        </div>
        <!-- 浮遊効果 -->
        <div class="bg-white rounded-xl shadow-xl p-6 -translate-y-2">
          <h4 class="font-semibold mb-2">浮遊効果</h4>
          <p class="text-gray-600 text-sm">translate との組み合わせ</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

シャドウクラスリファレンス：

クラス CSS 値 説明
shadow-sm 小さなシャドウ 控えめなシャドウ効果
shadow デフォルトシャドウ 標準的なシャドウ効果
shadow-md 中程度のシャドウ 中サイズのシャドウ
shadow-lg 大きなシャドウ より大きなシャドウ効果
shadow-xl 特大シャドウ 広範囲のシャドウ
shadow-2xl 2倍特大シャドウ さらに広範囲のシャドウ
shadow-inner 内側シャドウ 要素内側のシャドウ
shadow-none シャドウなし シャドウを削除
shadow-blue-500/50 青のシャドウ 50%不透明度 カスタムシャドウ色

従来のCSSとTailwindの比較 従来の方法ではbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)のような複雑なプロパティをCSSに書く必要がありますが、Tailwindではshadow-lgのようなクラス名で直接宣言できます。shadow-blue-500/50でカスタムシャドウ色と不透明度もサポートしています。

💡 ポイント： shadow-innerは内側シャドウ効果を作成し、へこんだボタンや入力フィールドに最適です。shadow-noneはデフォルトのシャドウを削除するのに使用します。

不透明度 (opacity-*)

opacity-* クラスは要素全体の透明度を設定します。

例

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-500 opacity-100 rounded flex items-center justify-center text-white text-xs">100</div>
        <div class="w-24 h-24 bg-blue-500 opacity-75 rounded flex items-center justify-center text-white text-xs">75</div>
        <div class="w-24 h-24 bg-blue-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-24 h-24 bg-blue-500 opacity-25 rounded flex items-center justify-center text-white text-xs">25</div>
        <div class="w-24 h-24 bg-blue-500 opacity-0 rounded flex items-center justify-center text-white text-xs">0</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-20 h-20 bg-green-500 opacity-90 rounded flex items-center justify-center text-white text-xs">90</div>
        <div class="w-20 h-20 bg-green-500 opacity-80 rounded flex items-center justify-center text-white text-xs">80</div>
        <div class="w-20 h-20 bg-green-500 opacity-70 rounded flex items-center justify-center text-white text-xs">70</div>
        <div class="w-20 h-20 bg-green-500 opacity-60 rounded flex items-center justify-center text-white text-xs">60</div>
        <div class="w-20 h-20 bg-green-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-20 h-20 bg-green-500 opacity-40 rounded flex items-center justify-center text-white text-xs">40</div>
        <div class="w-20 h-20 bg-green-500 opacity-30 rounded flex items-center justify-center text-white text-xs">30</div>
        <div class="w-20 h-20 bg-green-500 opacity-20 rounded flex items-center justify-center text-white text-xs">20</div>
        <div class="w-20 h-20 bg-green-500 opacity-10 rounded flex items-center justify-center text-white text-xs">10</div>
        <div class="w-20 h-20 bg-green-500 opacity-5 rounded flex items-center justify-center text-white text-xs">5</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="flex items-center gap-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded">通常ボタン</button>
          <button class="bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed">無効ボタン</button>
        </div>
        <!-- オーバーレイ層 -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center">
            <span class="text-white text-xl font-semibold">オーバーレイ効果</span>
          </div>
        </div>
        <!-- フェードイン/アウト -->
        <div class="flex gap-4">
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-100 hover:opacity-75 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            ホバーしてください
          </div>
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-75 hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            ホバーしてください
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

不透明度クラスリファレンス：

クラス CSS 値 説明
opacity-0 opacity: 0 完全に透明
opacity-5 opacity: 0.05 5% 不透明度
opacity-10 opacity: 0.1 10% 不透明度
opacity-20 opacity: 0.2 20% 不透明度
opacity-25 opacity: 0.25 25% 不透明度
opacity-30 opacity: 0.3 30% 不透明度
opacity-40 opacity: 0.4 40% 不透明度
opacity-50 opacity: 0.5 50% 不透明度
opacity-60 opacity: 0.6 60% 不透明度
opacity-70 opacity: 0.7 70% 不透明度
opacity-75 opacity: 0.75 75% 不透明度
opacity-80 opacity: 0.8 80% 不透明度
opacity-90 opacity: 0.9 90% 不透明度
opacity-95 opacity: 0.95 95% 不透明度
opacity-100 opacity: 1 完全に不透明

従来のCSSとTailwindの比較 従来の方法ではCSSにopacityプロパティを設定し特定の値を覚える必要がありますが、Tailwindではopacity-50のようなセマンティックなクラス名で直接宣言できます。不透明度の値は0から100まで5刻みで設定できます。

💡 ポイント： opacityは要素全体（コンテンツや子要素を含む）に影響します。背景だけを透明にしたい場合は、bg-blue-500/50構文を使用してください。

ブレンドモード (mix-blend-*)

mix-blend-* クラスは要素のブレンドモードを設定し、下にあるコンテンツとの混合方法を制御します。

例

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 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-normal flex items-center justify-center text-white font-bold">normal</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-multiply flex items-center justify-center text-white font-bold">multiply</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-screen flex items-center justify-center text-white font-bold">screen</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-overlay flex items-center justify-center text-white font-bold">overlay</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-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-darken flex items-center justify-center text-white font-bold">darken</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-lighten flex items-center justify-center text-white font-bold">lighten</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-dodge flex items-center justify-center text-white font-bold">color-dodge</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-burn flex items-center justify-center text-white font-bold">color-burn</div>
        </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="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
          <div class="relative h-full flex items-center justify-center text-white text-2xl font-bold">
            ブレンドモード効果
          </div>
        </div>
        <!-- テキストのブレンド -->
        <div class="relative h-24 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg overflow-hidden">
          <div class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-overlay">
            TAILWIND
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

ブレンドモードクラスリファレンス：

クラス CSS 値 説明
mix-blend-normal mix-blend-mode: normal 通常（デフォルト）
mix-blend-multiply mix-blend-mode: multiply 乗算
mix-blend-screen mix-blend-mode: screen スクリーン
mix-blend-overlay mix-blend-mode: overlay オーバーレイ
mix-blend-darken mix-blend-mode: darken 比較（暗）
mix-blend-lighten mix-blend-mode: lighten 比較（明）
mix-blend-color-dodge mix-blend-mode: color-dodge 覆い焼き
mix-blend-color-burn mix-blend-mode: color-burn 焼き込み
mix-blend-hard-light mix-blend-mode: hard-light ハードライト
mix-blend-soft-light mix-blend-mode: soft-light ソフトライト
mix-blend-difference mix-blend-mode: difference 差の絶対値
mix-blend-exclusion mix-blend-mode: exclusion 除外
mix-blend-hue mix-blend-mode: hue 色相
mix-blend-saturation mix-blend-mode: saturation 彩度
mix-blend-color mix-blend-mode: color 色
mix-blend-luminosity mix-blend-mode: luminosity 輝度

従来のCSSとTailwindの比較 従来の方法ではCSSにmix-blend-modeプロパティを設定する必要がありますが、Tailwindではmix-blend-multiplyのようなクラス名で直接宣言できます。ブレンドモードはクリエイティブデザインで画像のオーバーレイやテキスト効果などによく使用されます。

💡 ポイント： mix-blend-multiplyは画像に色をオーバーレイして深みのあるトーン効果を作るのによく使われます。mix-blend-screenは明るく輝く効果を作るのに使用されます。

ドロップシャドウフィルター (drop-shadow-*)

drop-shadow-* クラスはCSSのfilter: drop-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">
    <!-- drop-shadow のサイズ -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow のサイズ</h3>
      <div class="flex flex-wrap gap-8 items-center">
        <div class="text-6xl drop-shadow-sm">🎯</div>
        <div class="text-6xl drop-shadow">🎯</div>
        <div class="text-6xl drop-shadow-md">🎯</div>
        <div class="text-6xl drop-shadow-lg">🎯</div>
        <div class="text-6xl drop-shadow-xl">🎯</div>
        <div class="text-6xl drop-shadow-2xl">🎯</div>
        <div class="text-6xl drop-shadow-none">🎯</div>
      </div>
    </div>

    <!-- drop-shadow と box-shadow の比較 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow と box-shadow の比較</h3>
      <div class="grid grid-cols-2 gap-8">
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">box-shadow (shadow-lg)</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg">シャドウ</div>
        </div>
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">drop-shadow (drop-shadow-lg)</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg drop-shadow-lg">シャドウ</div>
        </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="flex gap-4 items-center">
          <img src="https://picsum.photos/100/100" alt="例" class="rounded-full drop-shadow-lg">
          <img src="https://picsum.photos/100/100" alt="例" class="rounded-lg drop-shadow-xl">
        </div>
        <!-- SVG シャドウ -->
        <div class="flex gap-4 items-center">
          <svg class="w-16 h-16 text-blue-500 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
          <svg class="w-16 h-16 text-green-500 drop-shadow-xl" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
        </div>
        <!-- テキストシャドウ効果 -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 p-8 rounded-lg">
          <span class="text-4xl font-bold text-white drop-shadow-lg">シャドウ付きテキスト</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

ドロップシャドウクラスリファレンス：

クラス CSS 値 説明
drop-shadow-sm filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) 小さなシャドウ
drop-shadow filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) デフォルトシャドウ
drop-shadow-md filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) 中程度のシャドウ
drop-shadow-lg filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.06)) 大きなシャドウ
drop-shadow-xl filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.1)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.06)) 特大シャドウ
drop-shadow-2xl filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) 2倍特大シャドウ
drop-shadow-none filter: drop-shadow(0 0 #0000) シャドウなし

従来のCSSとTailwindの比較 従来の方法ではfilter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1))のような複雑なプロパティをCSSに書く必要がありますが、Tailwindではdrop-shadow-lgのようなクラス名で直接宣言できます。

⚠️ 注意： drop-shadowは要素のアルファチャンネルに従うため、不規則な形状（PNG画像やSVGなど）に最適です。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="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- 基本カード -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 relative">
          <div class="absolute inset-0 bg-black opacity-20"></div>
          <div class="absolute bottom-4 left-4">
            <span class="bg-white/90 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">タグ</span>
          </div>
        </div>
        <div class="p-6">
          <h3 class="font-semibold text-lg mb-2">基本カード</h3>
          <p class="text-gray-600 text-sm">shadow-md と hover:shadow-xl を使ったホバー効果</p>
        </div>
      </div>

      <!-- グラデーションカード -->
      <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
        <div class="p-6 text-white">
          <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4 drop-shadow">
            <span class="text-2xl">🎨</span>
          </div>
          <h3 class="font-semibold text-lg mb-2">グラデーションカード</h3>
          <p class="opacity-90 text-sm">グラデーション背景、シャドウ、ホバーアニメーション</p>
        </div>
      </div>

      <!-- ダークカード -->
      <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden">
        <div class="p-6 text-white">
          <div class="flex items-center gap-4 mb-4">
            <img src="https://picsum.photos/50/50" alt="アバター" class="w-12 h-12 rounded-full ring-2 ring-purple-500">
            <div>
              <div class="font-semibold">ユーザー名</div>
              <div class="text-gray-400 text-sm">@username</div>
            </div>
          </div>
          <p class="text-gray-300 text-sm">リングスタイルのアバターボーダーを持つダークテーマカード</p>
        </div>
      </div>
    </div>

    <!-- ブレンドモードバナー -->
    <div class="relative h-64 rounded-2xl overflow-hidden">
      <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/300')"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
      <div class="relative h-full flex flex-col items-center justify-center text-white text-center px-4">
        <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">クリエイティブなブレンドモード</h2>
        <p class="text-xl opacity-90 drop-shadow">mix-blend-multiply を使った画像オーバーレイ効果</p>
      </div>
    </div>

    <!-- 不透明度の重ね合わせ -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">不透明度の重ね合わせ</h3>
      <div class="relative h-48 bg-gradient-to-r from-gray-100 to-gray-200 rounded-lg overflow-hidden">
        <div class="absolute left-8 top-8 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-100"></div>
        <div class="absolute left-16 top-16 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-75"></div>
        <div class="absolute left-24 top-24 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-50"></div>
        <div class="absolute left-32 top-32 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-25"></div>
      </div>
    </div>

    <!-- アイコンシャドウ -->
    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl p-8">
      <div class="flex justify-center gap-8">
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">🏠</div>
          <div class="text-gray-400 text-sm">ホーム</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">👤</div>
          <div class="text-gray-400 text-sm">ユーザー</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">⚙️</div>
          <div class="text-gray-400 text-sm">設定</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">📊</div>
          <div class="text-gray-400 text-sm">データ</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではカードシャドウ、ブレンドモードバナー、不透明度の重ね合わせなどの効果を実現するために大量のCSSを書く必要がありますが、Tailwindではシャドウ、不透明度、ブレンドモードのユーティリティクラスを使ってHTML内で直接すべてを実現できます。

❓ よくある質問

Q box-shadow と drop-shadow の違いは何ですか？
A box-shadow（shadow-）は長方形のシャドウを作成し、規則的な形状に適しています。drop-shadow（drop-shadow-）は要素のアルファチャンネルに従うため、不規則な形状（PNG、SVG）に最適です。drop-shadowはパフォーマンスがやや低いです。
Q 要素の無効状態を作成するにはどうすればよいですか？
A opacity-50 cursor-not-allowedの組み合わせを使用します。opacity-50で要素を半透明にし、cursor-not-allowedで禁止カーソルを表示します。インタラクションを完全に無効にするにはpointer-events-noneを追加してください。
Q mix-blend-mode は子要素に影響しますか？
A はい。mix-blend-modeは要素全体とその子要素が下にあるコンテンツとどうブレンドされるかに影響します。背景にのみ影響させたい場合は、背景とコンテンツを別のレイヤーに分けてください。
Q シャドウの色の不透明度を設定するにはどうすればよいですか？
A shadow-blue-500/50構文を使用します。/50は50%不透明度を意味します。shadow-blue-500/25（25%不透明度）などの値も使用できます。デフォルトのシャドウ色は黒です。

📖 まとめ

📝 課題

  1. ⭐ shadow-mdとhover:shadow-xlを使ってホバーシャドウ効果を持つカードコンポーネントを作成してください

  2. ⭐⭐ drop-shadow-lgで画像のシャドウとopacity-*でホバーフェードイン効果を持つ画像ギャラリーを作成してください

  3. ⭐⭐⭐ 背景画像 + mix-blend-multiplyグラデーションオーバーレイ + drop-shadow-lgテキストシャドウを使ったプロフェッショナルな視覚効果のバナーコンポーネントを作成してください

100%