【CSS Modules】saturate()関数の使い方
saturate()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
saturate()関数は、CSSのfilterプロパティと組み合わせて使用され、指定したHTML要素の色の鮮やかさ、すなわち「彩度」を調整する関数です。この関数を使うことで、画像や背景色、動画などの視覚的な要素の色の濃淡や明瞭度を柔軟に変更できます。
saturate()関数は、引数としてパーセンテージまたは数値をとり、その値に基づいて彩度を変化させます。例えば、saturate(0%)を指定すると、要素の彩度は完全に失われ、白黒（グレースケール）の状態になります。これは、色の鮮やかさが全くない状態を意味します。saturate(100%)は、元の要素が持つデフォルトの彩度を維持するため、要素に変化は与えません。
100%を超える値を指定することも可能です。例えば、saturate(200%)と指定すると、元の要素の彩度を2倍に高め、より鮮やかで強調された色合いを表現できます。逆に、0%から100%の間の値を指定すると、彩度は元の要素よりも低下し、色がくすんで白黒に近づいていきます。
この関数は、Webサイトのデザインにおいて、画像に特定の雰囲気を加えたり、ユーザーが要素にマウスカーソルを合わせた際（ホバー時）に視覚的な変化を与えるインタラクティブなエフェクトを作成したりする際に非常に役立ちます。写真の色を鮮やかに強調したり、あえて彩度を落として落ち着いた印象を与えたりするなど、幅広い視覚表現が可能となります。
公式リファレンス: saturate()
構文(syntax)
1filter: saturate(150%);
引数(parameters)
amount: <number> | <percentage>
- amount: <number> | <percentage>: 彩度を調整する数値またはパーセンテージ
戻り値(return)
filter-function
saturate() 関数は、要素の彩度を調整した画像効果を適用した結果を返します。