【CSS Modules】filterプロパティの使い方

filterプロパティは、ウェブページ上の要素に視覚的なフィルタ効果を適用するためのフィルタ関数、またはその組み合わせを保持するプロパティです。画像やHTML要素に対して、Photoshopなどの画像編集ツールで実現できるような、ぼかし、色相調整、ドロップシャドウといった多様な視覚効果をCSSコードで直接適用することができます。

このプロパティを用いることで、既存の画像ファイルを都度加工し直す手間を省き、ウェブブラウザ上で動的に要素の見た目を変化させることが可能になります。例えば、マウスオーバー時に要素をぼかしたり、特定の状態に応じて色調を変更したりする表現が容易に実現できます。

filterプロパティに指定できる主なフィルタ関数には、要素をぼかすblur()、明るさを調整するbrightness()、コントラストを変更するcontrast()、要素を白黒にするgrayscale()、色相を回転させるhue-rotate()、色を反転させるinvert()、不透明度を調整するopacity()、彩度を調整するsaturate()、セピア調にするsepia()、そしてドロップシャドウを追加するdrop-shadow()などがあります。これらの関数は、それぞれ適切な引数（例: blur(5px), grayscale(100%), hue-rotate(90deg)）を伴って使用します。

複数のフィルタ効果を同時に適用したい場合は、各フィルタ関数を半角スペースで区切って記述します。例えば、filter: blur(5px) grayscale(50%);のように記述することで、要素にぼかし効果とグレースケール効果を同時に適用できます。このプロパティは、画像だけでなく、<div>や<span>などの一般的なHTML要素やSVG要素にも適用でき、ウェブサイトのデザイン表現の幅を広げます。

Copy
1selector {
2  filter: blur(5px) grayscale(100%) brightness(1.5);
3}

引数なし

引数はありません

戻り値なし

戻り値はありません