【CSS Modules】sepia()関数の使い方
sepia()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
sepia()関数は、Webページ上の要素にセピア調の視覚効果を適用する関数です。この関数を使用することで、画像や動画などの視覚コンテンツ、または任意のHTML要素の色合いを、古びた写真のような茶色がかった色調（セピア調）に変換できます。
sepia()関数は、引数として効果の度合いをパーセンテージ（例: sepia(50%)）または数値（例: sepia(0.5)）で指定します。この値は、元の要素の色からどれだけセピア調に近づけるかを制御します。0%または0を指定した場合、要素は元の色を保ち、セピア効果は適用されません。100%または1を指定すると、要素は完全にセピア調に変換されます。100%を超える値を指定しても、効果は100%の場合と同じになり、さらに強調されることはありません。
主にCSSのfilterプロパティの値として利用され、写真ギャラリーや特定のユーザーインターフェース要素にレトロな雰囲気を加えたい場合などに役立ちます。CSSアニメーションと組み合わせることで、要素が時間とともにセピア調に変化するといった動的な視覚効果も実現可能です。この関数は、Webデザインにおいて視覚的な装飾を目的とし、コンテンツの表現力を豊かにするために用いられます。
公式リファレンス: sepia()
構文(syntax)
1filter: sepia(0.5);
引数(parameters)
amount
- amount: 適用するセピア効果の強度を指定する数値（0から1）。省略された場合は1（100%）になります。
戻り値(return)
<filter-function>
sepia() 関数は、要素にセピア調のフィルター効果を適用します。この関数は <filter-function> 型の値を返します。