CSSで色を指定するためのキーワードや、RGBAと16進数による指定方法について見ていきます。
キーワードによる色の指定
前回は水平方向の配置の調節を行って参りました。
詳しくは『vertical-alignで位置を調整しよう【CSSを書いていこう】』を御覧ください。
今回は色の指定方法についてみていきましょう。
色の指定については様々な方法があり、色を直接指定したり、赤緑青のバランスで指定したあり、16進数法で指定したり、色相や彩度などのバランスで指定する方法などがあります。
一番単純な方法としてはキーワードによる指定ができます。「red」や「blue」など色の名前をそのまま指定する方法です。
一番簡単な方法です。ただ弱点として細かい指定がしにくいのと単色だけだと味気ないサイトになってしまいます。
rgba()
rgba()というものがあります。
これは赤緑青のバランスで色を指定する方法です。
rgba()とはred, green, blue, alphaの頭文字でred, green, blueそれぞれ赤、緑、青の意味合いでalphaは透明度を意味します。
rgba()は色合いのバランスなのでどの色味をどれくらい強く出すかで色を指定し、rgbに関しては0から225までの数値でalphaは0から1.0の数値で指定します。
例えば赤を指定したい場合は赤はマックスの225、緑は0、青も0、透明にもしたくないのでアルファも1.0と指定するのでrgba(255, 0, 0, 1.0);と書いてあげればおkです
rgb()
rgba()を書く際に透明度を表すalphaが1の場合省略して書くことができます。その際値はrgb()ありますので注意しましょう。
赤を指定したい場合はrgb(255, 0, 0);でおkです。
また、白や黒を指定したい場合についてですが白はrgb全てを225に黒はrgb全てを0にすると指定できます。
16進数による指定
最後に16進数で指定する方法についてみていきましょう。この方法が一番良く使われます。
基本の考え方はrgba()と同じなのですがそれを16進数の00からffで表現する形になります。
例えば、赤を指定したい場合について考えてみます。
まず16進数で指定する場合は最初に#(パウンド記号)をつけ続けて225は“ff“、緑の0は“00“、青の0も”00”、透明度は1.0のでffになり、繋げて書くと#ff0000ffになります。
またそれぞれの値が同じ文字の場合1文字にして書くことが出来るのと透明度が１の場合も短縮出来るのでさらに短く書くと#f00;となります。
以上
