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

Tailwind CSS フィルターとトランスフォーム：ブラー、スケール、回転、移動

フィルター

フィルターユーティリティはCSSのfilterプロパティを使用して要素に視覚効果を追加します。

例

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">
    <!-- blur -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">blur</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-0" class="rounded-lg blur-0">
          <p class="text-sm mt-2">blur-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-sm" class="rounded-lg blur-sm">
          <p class="text-sm mt-2">blur-sm</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur" class="rounded-lg blur">
          <p class="text-sm mt-2">blur</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-md" class="rounded-lg blur-md">
          <p class="text-sm mt-2">blur-md</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-lg" class="rounded-lg blur-lg">
          <p class="text-sm mt-2">blur-lg</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-xl" class="rounded-lg blur-xl">
          <p class="text-sm mt-2">blur-xl</p>
        </div>
      </div>
    </div>

    <!-- brightness -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">brightness</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-50" class="rounded-lg brightness-50">
          <p class="text-sm mt-2">brightness-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-75" class="rounded-lg brightness-75">
          <p class="text-sm mt-2">brightness-75</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-100" class="rounded-lg brightness-100">
          <p class="text-sm mt-2">brightness-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-125" class="rounded-lg brightness-125">
          <p class="text-sm mt-2">brightness-125</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-150" class="rounded-lg brightness-150">
          <p class="text-sm mt-2">brightness-150</p>
        </div>
      </div>
    </div>

    <!-- contrast -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">contrast</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-50" class="rounded-lg contrast-50">
          <p class="text-sm mt-2">contrast-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-100" class="rounded-lg contrast-100">
          <p class="text-sm mt-2">contrast-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-150" class="rounded-lg contrast-150">
          <p class="text-sm mt-2">contrast-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-200" class="rounded-lg contrast-200">
          <p class="text-sm mt-2">contrast-200</p>
        </div>
      </div>
    </div>

    <!-- grayscale -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grayscale</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-0" class="rounded-lg grayscale-0">
          <p class="text-sm mt-2">grayscale-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale" class="rounded-lg grayscale">
          <p class="text-sm mt-2">grayscale</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-50" class="rounded-lg grayscale-[50%]">
          <p class="text-sm mt-2">grayscale-50%</p>
        </div>
      </div>
    </div>

    <!-- sepia -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">sepia</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia-0" class="rounded-lg sepia-0">
          <p class="text-sm mt-2">sepia-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia" class="rounded-lg sepia">
          <p class="text-sm mt-2">sepia</p>
        </div>
      </div>
    </div>

    <!-- saturate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">saturate</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-0" class="rounded-lg saturate-0">
          <p class="text-sm mt-2">saturate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-50" class="rounded-lg saturate-50">
          <p class="text-sm mt-2">saturate-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-100" class="rounded-lg saturate-100">
          <p class="text-sm mt-2">saturate-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-150" class="rounded-lg saturate-150">
          <p class="text-sm mt-2">saturate-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-200" class="rounded-lg saturate-200">
          <p class="text-sm mt-2">saturate-200</p>
        </div>
      </div>
    </div>

    <!-- hue-rotate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hue-rotate</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-0" class="rounded-lg hue-rotate-0">
          <p class="text-sm mt-2">hue-rotate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-90" class="rounded-lg hue-rotate-90">
          <p class="text-sm mt-2">hue-rotate-90</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-180" class="rounded-lg hue-rotate-180">
          <p class="text-sm mt-2">hue-rotate-180</p>
        </div>
      </div>
    </div>

    <!-- invert -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">invert</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert-0" class="rounded-lg invert-0">
          <p class="text-sm mt-2">invert-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert" class="rounded-lg invert">
          <p class="text-sm mt-2">invert</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

フィルタークラスリファレンス：

クラス CSS 値 説明
blur-0 filter: blur(0) ぼかしなし
blur-sm filter: blur(4px) 小さなぼかし
blur filter: blur(8px) デフォルトのぼかし
blur-md filter: blur(12px) 中程度のぼかし
blur-lg filter: blur(16px) 大きなぼかし
blur-xl filter: blur(24px) 特大のぼかし
blur-2xl filter: blur(40px) 2倍特大のぼかし
blur-3xl filter: blur(64px) 3倍特大のぼかし
brightness-0 filter: brightness(0) 完全に暗い
brightness-50 filter: brightness(0.5) 50% 明るさ
brightness-100 filter: brightness(1) 100% 明るさ（デフォルト）
brightness-150 filter: brightness(1.5) 150% 明るさ
contrast-0 filter: contrast(0) コントラストなし
contrast-50 filter: contrast(0.5) 50% コントラスト
contrast-100 filter: contrast(1) 100% コントラスト（デフォルト）
contrast-200 filter: contrast(2) 200% コントラスト
grayscale-0 filter: grayscale(0) グレースケールなし
grayscale filter: grayscale(100%) 完全グレースケール
sepia-0 filter: sepia(0) セピアなし
sepia filter: sepia(100%) 完全セピア
saturate-0 filter: saturate(0) 彩度なし
saturate-50 filter: saturate(0.5) 50% 彩度
saturate-100 filter: saturate(1) 100% 彩度（デフォルト）
saturate-200 filter: saturate(2) 200% 彩度
hue-rotate-0 filter: hue-rotate(0deg) 色相回転なし
hue-rotate-90 filter: hue-rotate(90deg) 90度の色相回転
hue-rotate-180 filter: hue-rotate(180deg) 180度の色相回転
invert-0 filter: invert(0) 反転なし
invert filter: invert(100%) 完全反転

従来のCSSとTailwindの比較 従来の方法ではfilter: blur(8px) brightness(1.2)のような複雑なプロパティをCSSに書く必要がありますが、Tailwindではblurやbrightness-120のようなクラス名で直接宣言できます。

💡 ポイント： フィルターは組み合わせて使用できます。例：blur-sm brightness-75 grayscale。フィルターの順序が最終結果に影響することに注意してください。

トランスフォーム

トランスフォームユーティリティはCSSのtransformプロパティを使用して要素のスケール、回転、移動、傾斜を行います。

例

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">
    <!-- scale -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">scale</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-50 flex items-center justify-center text-white text-xs">scale-50</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-75 flex items-center justify-center text-white text-xs">scale-75</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-100 flex items-center justify-center text-white text-xs">scale-100</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 flex items-center justify-center text-white text-xs">scale-110</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-125 flex items-center justify-center text-white text-xs">scale-125</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-150 flex items-center justify-center text-white text-xs">scale-150</div>
      </div>
    </div>

    <!-- rotate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">rotate</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-0 flex items-center justify-center text-white text-xs">rotate-0</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-3 flex items-center justify-center text-white text-xs">rotate-3</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-6 flex items-center justify-center text-white text-xs">rotate-6</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-12 flex items-center justify-center text-white text-xs">rotate-12</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 flex items-center justify-center text-white text-xs">rotate-45</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-90 flex items-center justify-center text-white text-xs">rotate-90</div>
      </div>
    </div>

    <!-- translate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">translate</h3>
      <div class="relative h-48 bg-gray-100 rounded-lg">
        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-purple-500 rounded-lg flex items-center justify-center text-white text-xs">中央</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-400 rounded-lg translate-x-0 translate-y-0 flex items-center justify-center text-white text-xs">原点</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-600 rounded-lg translate-x-8 translate-y-8 flex items-center justify-center text-white text-xs">+8</div>
        <div class="absolute right-4 top-4 w-20 h-20 bg-purple-700 rounded-lg -translate-x-4 translate-y-4 flex items-center justify-center text-white text-xs">-4,+4</div>
      </div>
    </div>

    <!-- skew -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">skew</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-0 flex items-center justify-center text-white text-xs">skew-x-0</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-3 flex items-center justify-center text-white text-xs">skew-x-3</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-6 flex items-center justify-center text-white text-xs">skew-x-6</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-12 flex items-center justify-center text-white text-xs">skew-x-12</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

トランスフォームクラスリファレンス：

クラス CSS 値 説明
scale-0 transform: scale(0) 0に縮小
scale-50 transform: scale(0.5) 50%に縮小
scale-75 transform: scale(0.75) 75%に縮小
scale-90 transform: scale(0.9) 90%に縮小
scale-95 transform: scale(0.95) 95%に縮小
scale-100 transform: scale(1) 元のサイズ（デフォルト）
scale-105 transform: scale(1.05) 105%に拡大
scale-110 transform: scale(1.1) 110%に拡大
scale-125 transform: scale(1.25) 125%に拡大
scale-150 transform: scale(1.5) 150%に拡大
rotate-0 transform: rotate(0deg) 回転なし
rotate-1 transform: rotate(1deg) 1度回転
rotate-2 transform: rotate(2deg) 2度回転
rotate-3 transform: rotate(3deg) 3度回転
rotate-6 transform: rotate(6deg) 6度回転
rotate-12 transform: rotate(12deg) 12度回転
rotate-45 transform: rotate(45deg) 45度回転
rotate-90 transform: rotate(90deg) 90度回転
rotate-180 transform: rotate(180deg) 180度回転
translate-x-0 transform: translateX(0) 水平移動なし
translate-x-1 transform: translateX(0.25rem) 水平に4px移動
translate-x-2 transform: translateX(0.5rem) 水平に8px移動
translate-x-4 transform: translateX(1rem) 水平に16px移動
translate-x-full transform: translateX(100%) 水平に100%移動
-translate-x-1/2 transform: translateX(-50%) 水平に-50%移動
translate-y-0 transform: translateY(0) 垂直移動なし
translate-y-1 transform: translateY(0.25rem) 垂直に4px移動
translate-y-full transform: translateY(100%) 垂直に100%移動
-translate-y-1/2 transform: translateY(-50%) 垂直に-50%移動
skew-x-0 transform: skewX(0deg) 傾斜なし
skew-x-1 transform: skewX(1deg) 水平に1度傾斜
skew-x-3 transform: skewX(3deg) 水平に3度傾斜
skew-x-6 transform: skewX(6deg) 水平に6度傾斜
skew-x-12 transform: skewX(12deg) 水平に12度傾斜
skew-y-0 transform: skewY(0deg) 傾斜なし
skew-y-1 transform: skewY(1deg) 垂直に1度傾斜
skew-y-3 transform: skewY(3deg) 垂直に3度傾斜
skew-y-6 transform: skewY(6deg) 垂直に6度傾斜
skew-y-12 transform: skewY(12deg) 垂直に12度傾斜

従来のCSSとTailwindの比較 従来の方法ではtransform: scale(1.1) rotate(3deg)のような複雑なプロパティをCSSに書く必要がありますが、Tailwindではscale-110 rotate-3のようなクラス名で直接宣言できます。負の値には-translate-x-1/2構文を使用します。

💡 ポイント： -translate-x-1/2 -translate-y-1/2とleft-1/2 top-1/2を組み合わせることで、完璧な水平・垂直中央揃えが実現できます。

トランスフォームの原点 (origin-*)

origin-* ユーティリティはトランスフォームの原点を設定します。

例

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-8 items-center justify-center">
        <div class="text-center">
          <div class="w-24 h-24 bg-blue-500 rounded-lg rotate-45 origin-center flex items-center justify-center text-white text-xs">origin-center</div>
          <p class="text-sm mt-2">center（デフォルト）</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 origin-top-left flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-purple-500 rounded-lg rotate-45 origin-top-right flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-right</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-orange-500 rounded-lg rotate-45 origin-bottom-left flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-red-500 rounded-lg rotate-45 origin-bottom-right flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-right</p>
        </div>
      </div>
    </div>

    <!-- 実践的な応用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践的な応用：回転アニメーション</h3>
      <div class="flex gap-8 items-center justify-center">
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-500 rounded-lg hover:rotate-45 origin-center transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            中央
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-green-500 rounded-lg hover:rotate-45 origin-top-left transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            左上
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-purple-500 rounded-lg hover:rotate-45 origin-bottom-right transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            右下
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

トランスフォーム原点クラスリファレンス：

クラス CSS 値 説明
origin-center transform-origin: center 中央（デフォルト）
origin-top transform-origin: top 上部中央
origin-top-right transform-origin: top right 右上角
origin-right transform-origin: right 右側中央
origin-bottom-right transform-origin: bottom right 右下角
origin-bottom transform-origin: bottom 下部中央
origin-bottom-left transform-origin: bottom left 左下角
origin-left transform-origin: left 左側中央
origin-top-left transform-origin: top left 左上角

従来のCSSとTailwindの比較 従来の方法ではCSSにtransform-originプロパティを設定する必要がありますが、Tailwindではorigin-centerやorigin-top-leftのようなクラス名で直接宣言できます。

💡 ポイント： トランスフォーム原点は回転とスケーリングの基準点に影響します。origin-top-leftは要素の左上角から回転させ、origin-centerは中央から回転させます。

バックドロップフィルター (backdrop-*)

backdrop-* ユーティリティはCSSのbackdrop-filterプロパティを使用して、要素の背後にあるコンテンツにフィルター効果を適用します。

例

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">
    <!-- backdrop-blur -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-blur</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-white/30 backdrop-blur-sm px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-sm</div>
          </div>
          <div class="bg-white/30 backdrop-blur px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur</div>
          </div>
          <div class="bg-white/30 backdrop-blur-md px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-md</div>
          </div>
          <div class="bg-white/30 backdrop-blur-lg px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-lg</div>
          </div>
          <div class="bg-white/30 backdrop-blur-xl px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-xl</div>
          </div>
        </div>
      </div>
    </div>

    <!-- backdrop-brightness -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-brightness</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-black/30 backdrop-brightness-50 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-50</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-75 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-75</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-100 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-100</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-125 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-125</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 実践的な応用：すりガラス効果 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践的な応用：すりガラス効果</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white/20 backdrop-blur-lg rounded-2xl p-8 text-center shadow-xl">
            <h4 class="text-2xl font-bold text-white mb-2">すりガラス効果</h4>
            <p class="text-white/80">backdrop-blur-lg で実現</p>
            <button class="mt-4 bg-white/30 hover:bg-white/50 text-white px-6 py-2 rounded-full transition-colors">
              今すぐ試す
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 実践的な応用：モーダルバックドロップ -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践的な応用：モーダルバックドロップ</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <!-- モーダルオーバーレイ -->
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <!-- モーダルコンテンツ -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white rounded-xl p-6 w-80 shadow-2xl">
            <h4 class="text-xl font-semibold mb-2">モーダル</h4>
            <p class="text-gray-600 mb-4">backdrop-blur-sm で背景ぼかしを実現</p>
            <div class="flex justify-end gap-3">
              <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">キャンセル</button>
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">確認</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

バックドロップフィルタークラスリファレンス：

クラス CSS 値 説明
backdrop-blur-0 backdrop-filter: blur(0) バックドロップぼかしなし
backdrop-blur-sm backdrop-filter: blur(4px) 小さなバックドロップぼかし
backdrop-blur backdrop-filter: blur(8px) デフォルトのバックドロップぼかし
backdrop-blur-md backdrop-filter: blur(12px) 中程度のバックドロップぼかし
backdrop-blur-lg backdrop-filter: blur(16px) 大きなバックドロップぼかし
backdrop-blur-xl backdrop-filter: blur(24px) 特大のバックドロップぼかし
backdrop-blur-2xl backdrop-filter: blur(40px) 2倍特大のバックドロップぼかし
backdrop-blur-3xl backdrop-filter: blur(64px) 3倍特大のバックドロップぼかし
backdrop-brightness-0 backdrop-filter: brightness(0) 完全に暗いバックドロップ
backdrop-brightness-50 backdrop-filter: brightness(0.5) 50% バックドロップ明るさ
backdrop-brightness-100 backdrop-filter: brightness(1) 100% バックドロップ明るさ
backdrop-brightness-150 backdrop-filter: brightness(1.5) 150% バックドロップ明るさ
backdrop-contrast-0 backdrop-filter: contrast(0) バックドロップコントラストなし
backdrop-contrast-100 backdrop-filter: contrast(1) 100% バックドロップコントラスト
backdrop-grayscale-0 backdrop-filter: grayscale(0) バックドロップグレースケールなし
backdrop-grayscale backdrop-filter: grayscale(100%) 完全バックドロップグレースケール
backdrop-hue-rotate-0 backdrop-filter: hue-rotate(0deg) バックドロップ色相回転なし
backdrop-hue-rotate-90 backdrop-filter: hue-rotate(90deg) 90度バックドロップ色相回転
backdrop-invert-0 backdrop-filter: invert(0) バックドロップ反転なし
backdrop-invert backdrop-filter: invert(100%) 完全バックドロップ反転
backdrop-opacity-0 backdrop-filter: opacity(0) 完全に透明なバックドロップ
backdrop-opacity-50 backdrop-filter: opacity(0.5) 50% バックドロップ不透明度
backdrop-opacity-100 backdrop-filter: opacity(1) 100% バックドロップ不透明度
backdrop-saturate-0 backdrop-filter: saturate(0) バックドロップ彩度なし
backdrop-saturate-100 backdrop-filter: saturate(1) 100% バックドロップ彩度
backdrop-saturate-200 backdrop-filter: saturate(2) 200% バックドロップ彩度
backdrop-sepia-0 backdrop-filter: sepia(0) バックドロップセピアなし
backdrop-sepia backdrop-filter: sepia(100%) 完全バックドロップセピア

従来のCSSとTailwindの比較 従来の方法ではbackdrop-filter: blur(16px) brightness(0.8)のような複雑なプロパティをCSSに書く必要がありますが、Tailwindではbackdrop-blur-lg backdrop-brightness-75のようなクラス名で直接宣言できます。

⚠️ 注意： backdrop-filterは要素に背景の透明度が必要で、効果を確認するにはbg-white/20やbg-black/50と組み合わせて使用します。一部のブラウザでは-webkit-プレフィックスが必要です。

総合例

上記のすべての概念を組み合わせた、フィルターとトランスフォームの完全な例です。

例

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-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">画像ギャラリー（フィルター効果）</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=1" alt="オリジナル" class="rounded-lg w-full group-hover:scale-105 transition-transform duration-300">
          <p class="text-sm text-center mt-2">オリジナル</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=2" alt="グレースケール" class="rounded-lg w-full grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">グレースケール → カラー</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=3" alt="セピア" class="rounded-lg w-full sepia group-hover:sepia-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">セピア → カラー</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=4" alt="ぼかし" class="rounded-lg w-full blur-sm group-hover:blur-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">ぼかし → クリア</p>
        </div>
      </div>
    </div>

    <!-- カードホバーエフェクト -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=5" alt="カード" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">スケール効果</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">ホバーで画像が拡大します</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=6" alt="カード" class="w-full h-full object-cover group-hover:rotate-3 transition-transform duration-500 origin-center">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">回転効果</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">ホバーで画像が回転します</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=7" alt="カード" class="w-full h-full object-cover group-hover:brightness-125 transition-all duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">明るさ効果</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">ホバーで明るさが増します</p>
        </div>
      </div>
    </div>

    <!-- すりガラスナビバー -->
    <div class="relative h-96 rounded-xl overflow-hidden" style="background-image: url('https://picsum.photos/800/400'); background-size: cover; background-position: center;">
      <!-- ナビバー -->
      <nav class="absolute top-0 left-0 right-0 bg-white/10 backdrop-blur-lg border-b border-white/20">
        <div class="flex justify-between items-center px-6 py-4">
          <div class="text-white font-bold text-xl">ロゴ</div>
          <div class="flex gap-6">
            <a href="#" class="text-white/80 hover:text-white transition-colors">ホーム</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">製品</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">概要</a>
          </div>
        </div>
      </nav>
      <!-- コンテンツ -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center text-white">
          <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">すりガラス効果</h2>
          <p class="text-xl opacity-90 drop-shadow">backdrop-blur-lg で実現</p>
        </div>
      </div>
    </div>

    <!-- トランスフォームの組み合わせ -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">トランスフォームの組み合わせ</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 rotate-6 shadow-lg flex items-center justify-center text-white text-xs">
          scale + rotate
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg scale-90 -rotate-12 shadow-lg flex items-center justify-center text-white text-xs">
          scale + rotate
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg skew-x-6 scale-105 shadow-lg flex items-center justify-center text-white text-xs">
          skew + scale
        </div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg -skew-x-3 rotate-3 translate-y-2 shadow-lg flex items-center justify-center text-white text-xs">
          組み合わせ
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では画像ギャラリーのホバーエフェクト、すりガラスナビゲーションバー、トランスフォームの組み合わせを実現するために大量のCSSを書く必要がありますが、Tailwindではフィルターとトランスフォームのユーティリティクラスを使ってHTML内で直接すべてを実現できます。

❓ よくある質問

Q filter と backdrop-filter の違いは何ですか？
A filterは要素自体とそのコンテンツに影響します。backdrop-filterは要素の背後にあるコンテンツに影響し、要素に背景の透明度が必要で効果が見えます。すりガラス効果によく使用されます。
Q 複数のトランスフォームを組み合わせることはできますか？
A はい。Tailwindは複数のトランスフォームクラスの組み合わせをサポートしています。例：scale-110 rotate-6 translate-x-4。トランスフォームの順序が最終結果に影響することに注意してください。
Q スムーズなトランスフォームアニメーションを実現するにはどうすればよいですか？
A transition-all duration-300やtransition-transform duration-500クラスを使用してください。transition-allはすべてのプロパティをトランジションし、transition-transformはトランスフォームプロパティのみをトランジションします。
Q backdrop-blur の効果が見えないのはなぜですか？
A backdrop-blur は要素に背景の透明度が必要で表示されます。bg-white/20やbg-black/50のような半透明の背景を使用していることを確認してください。また、ブラウザがbackdrop-filterプロパティをサポートしていることも確認してください。

📖 まとめ

📝 課題

  1. ⭐ grayscaleとhover:grayscale-0を使ってホバー時にグレースケールからカラーに変化する画像ギャラリーを作成してください

  2. ⭐⭐ hover:scale-105 hover:shadow-xl transition-allを使ってホバー時にズームとシャドウ効果を持つカードコンポーネントを作成してください

  3. ⭐⭐⭐ backdrop-blur-lg bg-white/20で背景ぼかしを持つすりガラスログインポップアップを作成し、scale-95 hover:scale-100でホバーズームアニメーションを組み合わせてください

100%