【CSS Modules】blur()関数の使い方
blur()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
blur()関数は、CSSのfilterプロパティに指定することで、対象の要素に視覚的なぼかし効果を適用する関数です。この関数は、画像、テキスト、背景など、HTML要素の見た目を変更し、デザイン上のアクセントや特定の情報を際立たせる目的で使用されます。
blur()関数は、引数として長さの値を一つ取ります。この値は、ぼかしの半径、すなわちどれくらいピクセルが混じり合うかを定義し、px、rem、emなどの単位で指定します。例えば、filter: blur(5px);と記述することで、要素に5ピクセル分のぼかしが適用されます。この値が大きいほど、より強いぼかし効果が得られます。0（ゼロ）を指定した場合や、単位なしで0を指定した場合は、ぼかし効果は適用されず、元の要素がそのまま表示されます。負の値を指定することはできず、無効な値として扱われるか、自動的に0として解釈されます。
blur()関数は、主に画像ギャラリーでアクティブでない画像をぼかしたり、モーダルウィンドウの背後にあるコンテンツを視覚的に区別したり、特定のテキストを強調しないようにする際に役立ちます。複数のfilter関数と組み合わせて使用することも可能で、例えばfilter: blur(5px) grayscale(50%);のように記述することで、ぼかしとグレースケールの効果を同時に適用できます。この機能は、WebページのUI/UXデザインにおいて、視覚的な階層を構築し、ユーザーの注意を誘導するための強力なツールです。
公式リファレンス: blur()
構文(syntax)
1filter: blur(length);
引数(parameters)
length
- length: float | percentage: ぼかしの強さを指定する数値またはパーセンテージ
戻り値(return)
戻り値なし
戻り値はありません