【CSS Modules】grayscale()関数の使い方
grayscale()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
grayscale()関数は、CSSのfilterプロパティと組み合わせて使用され、要素の色をグレースケール（モノクロ）に変換する処理を実行する関数です。この関数は、指定された要素の彩度を下げ、画像を白黒写真のように見せる視覚効果を提供します。
引数には、変換の度合いを示す数値またはパーセンテージを指定します。数値は0から1の範囲で、パーセンテージは0%から100%の範囲で指定可能です。0または0%を指定した場合、要素の色は元の状態のままで変化しません。一方、1または100%を指定すると、要素は完全にグレースケールに変換され、白黒表示になります。
0と1の間、または0%と100%の間の値を指定することで、部分的にグレースケール化され、元の色と白黒の間の混合状態を表現できます。例えば、grayscale(0.5)と記述すると、50%のグレースケール効果が適用されます。引数を省略した場合、一般的にはgrayscale(1)またはgrayscale(100%)と同じ効果が適用され、要素は完全にグレースケールに変換されます。
この関数は、画像や動画、その他のHTML要素に対して、視覚的なスタイル変更やホバー効果、アクセシビリティの向上などに活用されます。CSSのfilterプロパティに記述することで、img { filter: grayscale(0.8); } のように要素にグレースケール効果を適用することができます。
構文(syntax)
1filter: grayscale(100%);
引数(parameters)
amount: <number> | <percentage> = 1
- amount: <number> | <percentage> = 1: グレースケール効果の適用量を指定します。数値（0から1）またはパーセンテージ（0%から100%）で指定でき、デフォルトは1（100%）です。
戻り値(return)
CSSのgrayscale()関数は、要素に適用された画像や色をグレースケール（白黒）にするためのフィルター効果を生成します。この関数は、処理された結果として<filter-function>という型の値を返します。