【CSS Modules】hue-rotate()関数の使い方
hue-rotate()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
hue-rotate()関数は、要素の色相（Hue）を回転させるフィルター効果を適用する関数です。この関数は、CSSのfilterプロパティと組み合わせて使用され、指定された角度に基づいて、要素の色合いを変化させます。色のスペクトルは0度から360度の範囲で表現され、例えば0度または360度は元の色相を表し、180度は元の色相の補色に相当します。
引数には、色相を回転させる角度を指定します。この角度は、deg（度）、rad（ラジアン）、grad（グラジアン）、turn（ターン）といった単位で指定可能です。例えば、hue-rotate(90deg)と記述すると、要素の色相が時計回りに90度回転します。負の値を指定することも可能で、その場合は反時計回りに色相が回転しますが、実際にはCSS内部で正規化されるため、例えば-90degは270degと同じ効果を持ちます。
この関数を使用することで、画像や背景色、テキストなどのあらゆるHTML要素の色合いをダイナミックに調整できます。ウェブサイトのデザインにおいて、特定の要素の雰囲気を変えたり、ブランドのテーマカラーに合わせたりする際に非常に有用です。複数のフィルター関数をfilterプロパティの値として記述することで、他のフィルター効果（例：brightness、contrast）と組み合わせて使用することも可能です。hue-rotate()関数は、特に画像の再着色や、ユーザーインターフェース要素の視覚的なバリエーションを作成する場面で活用されます。
公式リファレンス: hue-rotate()
構文(syntax)
1.example-element { 2 filter: hue-rotate(90deg); 3}
引数(parameters)
<angle>
- <angle>: 色相を回転させる角度。0deg（回転なし）から360deg（完全な回転）まで指定できます。
戻り値(return)
戻り値なし
戻り値はありません