【Tailwind CSS】Tailwindのblurでぼかしを実装する方法
はじめに
こんにちは、株式会社TOKOSの石津です！
今回はTailwind CSSで「ぼかし」を実装していきます。
ウェブデザインにおいて、視覚的なエフェクトはユーザーの体験を高め、情報をより効果的に伝える役割を果たします。
その中でもBlur効果は特定の要素に焦点を当てたり、背景をぼかして奥行きを出す際に利用されます。
本記事では基本的なBlur効果の適用方法から、強度の調節、さらにはパフォーマンスへの影響についてまで詳しく解説します。
対象読者
- Blur効果の使い方を学びたい人
- Tailwind CSSを使ったウェブデザインに興味がある人
- Tailwind CSSを使ってぼかしを実装したい人
使用方法
要素を囲んでいるタグにclassを当てる
使用方法は簡単で、ぼかしたい要素を囲んでいるタグにclassを当てるだけです。
<p>これはぼかされていないテキストです</p>
<p class="blur-sm">これはぼかされたテキストです</p>もちろんdivタグで囲んでまとめてぼかすこともできます。
<div class="blur-sm">
<p>これはテキストです</p>
<p>これもテキストです</p>
</div>divタグで囲うことによって画像などにもぼかしを加えることができます。
ぼかし具合を調整する
Tailwindの公式ドキュメントを見ると、どのclassがどのぼかし具合か確認できます。
filter: blur() - Filters
Utilities for applying blur filters to an element.
tailwindcss.com<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-sm">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-md">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-lg">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-xl">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-2xl">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-3xl">これはぼかされたテキストです</p>blur-sm以外はもうほとんど何がぼかされているのかわからないですね。
Tailwindなのでもちろん値を直指定することもできます。
blur-smが4pxなので今回はその前後の値で実装してみます。
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[1px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[2px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[3px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-sm">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[5px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[6px]">これはぼかされたテキストです</p>
<p class="blur-none">これはぼかされていないテキストです</p>
<p class="blur-[7px]">これはぼかされたテキストです</p>1pxと2pxではギリギリ文字が視認できますね。
僕も2pxくらいで用いることが多いです。
注意点
便利なblurですが注意点があります。
適切に使われたBlur効果はユーザーの注意を引きつけ、情報を際立たせるための強力なツールになりますが、適用範囲や強度を誤ると逆に視覚的な混乱を招く可能性があります。
また、パフォーマンス面でも注意が必要です。
Blur効果はレンダリングに時間を必要とするため、大量に使いすぎるとウェブサイトのパフォーマンスに影響を与える可能性があります。
さいごに
今回はTailwind CSSを使ったBlur効果の使い方を説明しました。
ぼかし効果はデザインに視覚的な奥行きを加え、特定の要素を強調するのに有効です。ただし、その適用には注意が必要で、適切なバランスとパフォーマンスを考慮することが重要です。
この記事を書いた人
-
