【CSS Modules】invert()関数の使い方
invert()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
invert()関数は、CSSのfilterプロパティと組み合わせて使用し、要素の色を反転させるために実行する関数です。この関数は、指定された要素のすべての視覚的な色情報、例えば画像、テキスト、背景色などを補色へと変換します。
invert()関数は、引数としてパーセンテージ（0%から100%）または0から1の数値を指定することで、色の反転度合いを制御します。invert(0%)またはinvert(0)を指定すると、元の色を変化させずにそのまま表示されます。一方、invert(100%)またはinvert(1)を指定すると、完全に色を反転させ、その要素の補色を表示します。例えば、白は黒に、黒は白に変化します。invert(50%)のような中間値を指定することで、部分的に色が反転した状態を作り出すことも可能です。
この機能は、ウェブサイトのダークモード実装や、特定のデザイン効果、アクセシビリティ向上に非常に有用です。特に、視認性を高めるために高コントラスト表示にしたい場合や、画像の色調をサイトのテーマに合わせて調整したい場合に活用されます。invert()関数は、ウェブコンテンツの視覚表現に柔軟性をもたらし、多様なデザインニーズに応えることができます。
公式リファレンス: invert()
構文(syntax)
1filter: invert(amount);
引数(parameters)
[ <number> | <percentage> ]
- <number> | <percentage>: 色の反転度合いを指定します。
<number>は 0 (反転なし) から 1 (完全反転) までの数値、<percentage>は 0% (反転なし) から 100% (完全反転) までのパーセンテージで指定します。
戻り値(return)
<filter-function>
invert() 関数は、要素の色の反転効果を適用した <filter-function> を返します。