【CSS Modules】hex-color型の使い方
hex-color型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
hex-color定数はCSSにおいて、色を16進数形式で指定するための書式を表す定数です。この定数は、主にWebコンテンツの色表現に利用され、光の三原色である赤（Red）、緑（Green）、青（Blue）の強度を組み合わせて色を定義します。
最も一般的な形式は「#RRGGBB」で、各「RR」「GG」「BB」はそれぞれ赤、緑、青の成分を00からFFまでの16進数2桁で表します。例えば、「#FF0000」は純粋な赤、「#00FF00」は純粋な緑、「#0000FF」は純粋な青を示し、「#000000」は黒、「#FFFFFF」は白を表します。
また、各色の成分が重複する場合には「#RGB」という3桁の省略形も使用可能です。この場合、「#F00」は「#FF0000」と同じく純粋な赤を意味し、「#0F0」は「#00FF00」を意味します。
CSS Modulesの文脈においても、このhex-color定数は、color、background-color、border-colorといった色の値を受け入れるプロパティに値を設定する際に利用されます。さらに、透過度（アルファチャンネル）を含める場合は、「#RRGGBBAA」または「#RGBA」の形式も使用できます。最後の「AA」や「A」は00（完全透明）からFF（完全不透明）の範囲で透明度を指定し、要素の重ね合わせ表現に柔軟性をもたらします。hex-colorは、Webデザインにおいて色を効率的かつ正確に指定するための、非常に一般的で強力な書式です。
公式リファレンス: <hex-color>
構文(syntax)
1.element { 2 color: #RRGGBB; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません