生徒CSSで色を指定するにはどんな書き方がありますか？
先生CSSで色を指定する書き方を説明します
CSSで色を指定する方法
CSSにはcolorプロパティなどで色を指定する書き方がいくつかあります。
この記事ではCSSで色を指定する書き方を説明します。
- 色の名前で指定する
- 16進のカラーコードで指定する
- rgb()関数で指定する
- hsl()関数で指定する
方法１：色の名前で指定する
redやblue、blackなどあらかじめ定義されている色の名前で指定できます。
定義されている色の名前は、以下のページなどで確認できます。
方法２：16進数のカラーコードで色を指定する
16進数のカラーコードでも色を指定できます。
16進のカラーコードは、光の三原色である赤(R)緑(G)青(B)の各色要素の値を指定します。
6桁のコードで指定する
赤(R)緑(G)青(B)の各色要素を2桁ずつの6桁のコードで色を設定します。
省略した書き方もできる
赤(R)緑(G)青(B)の各色要素の2桁が同じ値の場合、3桁のコードで省略した書き方もできます。
8桁にして不透明度も指定できる
6桁の後に、2桁追加して不透明度を指定することもできます。
方法３：rgb() 関数で指定する
CSSのrgb()関数を使ってRGBで色を指定することもできます。
rgb()関数は、赤 (Red)、緑 (Green)、青 (Blue)の三つの原色を合わせて色を表現します。
rgb() 関数について
rgb()関数は以下の2つの書き方があります。
- rgb(R G B)・・・ R(赤) G(緑) B(青)の色の強さをそれぞれ指定します。
- rgb(R G B / A) ・・・ R(赤) G(緑) B(青)に加えてA(不透明度)も指定します。
RGBの値について
R(赤) G(緑) B(青)の色の強さの段階は以下の値で指定します。
- 0から255の数値
- 0%から100%のパーセンテージ
A（不透明度）の値について
rgb()関数では、RGBの値の後に/ A（不透明度の数値）を足して不透明度を指定できます。
Aの値は、0から1までの数値またはパーセンテージで書きます。
方法４：hsl() 関数で指定する
CSSのhsl()関数を使ってHSLでも色を指定できます。
HSLについて
HSLは 色相(Hue)、彩度(Saturation)、輝度(Lightness) によって色を指定します。
hsl() 関数について
hsl()関数もrgb()関数と同様に以下の2つの書き方があります。
- hsl(H S L) ・・・ 色相(H)、彩度(S)、明度(L) の値をそれぞれ指定します。
- hsl(H S L / A) ・・・ 色相(H)、彩度(S)、明度(L) に加えてA(不透明度)も指定します。
Hの値について
色相(H)の値は以下の値で指定します。
- 数値（数値は0～360で正規化)
- 数値deg（数値は0～360で正規化)
- 数値turn（1turnが360度で0.1turnだと36度)
SとLの値について
彩度(S)、輝度(L)は両方ともに以下の値で指定します。
- 0%から100%のパーセンテージ
A（不透明度）の値について
hsl()関数でも、HSLの値の後に/ A（不透明度の数値）を足して透明度を指定できます。
Aの値はrgb()と同様に、0から1までの数値またはパーセンテージで書きます。
HSLのメリット
単純な色の場合RGBの方がわかりやすいですが、HSLには以下のメリットがあります。
同じ色のまま鮮やかさや明るさを変えられる
HSLでは、色は同じままで、鮮やかさと明るさだけを変えることが簡単にできます。
鮮やかさと明るさは同じまま色を変えられる
HSLでは、鮮やかさと明るさを同じ値にしたままで、色を変えることも簡単にできます。