【CSS Modules】rgb()関数の使い方
rgb()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rgb()関数は、CSSにおいて、赤、緑、青の光の三原色を組み合わせて色を定義し、生成する関数です。Webページやアプリケーションで、要素の文字色や背景色などを指定する際に広く利用されます。
この関数は、赤（Red）、緑（Green）、青（Blue）の3つの成分の強さを引数として受け取ります。各成分は、0から255までの整数値、または0%から100%までのパーセンテージで指定します。例えば、rgb(255, 0, 0)は純粋な赤色を、rgb(0, 0, 0)は黒色を、rgb(255, 255, 255)は白色を表現します。これらの値が大きいほど、その色の成分が強く現れます。
また、CSS Color Module Level 4以降では、オプションで4番目の引数としてアルファ値（透明度）を指定することも可能です。アルファ値は0（完全に透明）から1（完全に不透明）までの範囲で指定し、色の透明度を制御します。しかし、透明度を明示的に指定する場合は、通常rgba()関数がより一般的に使用されます。
rgb()関数は、colorやbackground-colorといったCSSプロパティの値として使用され、Webデザインにおける視覚的な表現を豊かにするための基本的な色指定方法の一つです。幅広いブラウザで安定して動作し、要素に正確な色を適用する上で不可欠な機能です。
構文(syntax)
1rgb(255, 0, 128)
引数(parameters)
red: <number> | <percentage>, green: <number> | <percentage>, blue: <number> | <percentage>, alpha: <number> | <percentage> = 1
- red: <number> | <percentage>: 赤色の値。0から255の整数、または0%から100%のパーセンテージで指定します。
- green: <number> | <percentage>: 緑色の値。0から255の整数、または0%から100%のパーセンテージで指定します。
- blue: <number> | <percentage>: 青色の値。0から255の整数、または0%から100%のパーセンテージで指定します。
- alpha: <number> | <percentage> = 1: 不透明度（アルファ値）。0.0（完全透明）から1.0（完全不透明）の数値、または0%から100%のパーセンテージで指定します。省略した場合、値は1（完全不透明）になります。
戻り値(return)
rgb()関数は、赤、緑、青の各色の値に基づいて色を指定し、その色を戻り値として返します。