【CSS Modules】lighting-colorプロパティの使い方
lighting-colorプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
lighting-colorプロパティは、SVG（Scalable Vector Graphics）のフィルタ効果で使用される光源の色を保持するプロパティです。このプロパティは、主にfeDiffuseLighting（拡散光）とfeSpecularLighting（鏡面光）というSVGフィルタプリミティブにおいて、要素に適用される光の色を指定するために利用されます。
Webページ上で画像や図形に対し、光が当たっているような立体感や影、光沢を表現する際に、このlighting-colorプロパティが重要な役割を果たします。例えば、金属のような光沢を持つオブジェクトや、凹凸のあるテクスチャを持つ要素に、特定の色味の光を当てることで、よりリアルな視覚効果を生み出すことが可能になります。
指定できる値は、CSSで一般的に使用される<color>型です。具体的には、redやblueといった色のキーワード、#RRGGBB形式のHEX値（例：#FF0000）、rgb(R, G, B)形式のRGB値（例：rgb(255, 0, 0)）など、様々な方法で色を指定することができます。デフォルト値はwhite（白色の光）に設定されています。
このプロパティを活用することで、ユーザーインターフェースのデザインに深みを与えたり、イラストレーションに豊かな表現力を加えたりすることができます。ただし、直接HTML要素のスタイルとして適用するのではなく、SVGフィルタ要素の属性として使用されるため、SVGのフィルタ機能と組み合わせて理解することが大切です。
公式リファレンス: lighting-color
構文(syntax)
1lighting-color: red;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません