こんばんは！WEBクリエイターのkabosuです。
今回はCSSの色指定方法、rgbとrgbaについてまとめました。
コーディングを始めたばかりのころは、16進数の#c1c1c1や、rgb・rgbaがあり、CSSプロパティを知れば知るほど何が違うん？どの指定がいいのかなー？と、悩んだものでした。
新しい方法を知ると使いたくなるのが、コーダーであったり、エンジニア(個人の意見です)。意味もなくかっこつけたり練習がてらと思ってrgb・rgbaを使っていましたね。
まずは、rgbとrgbaそれぞれについて説明していきます。
CSSの色指定方法の１つ、rgbは以下のように指定します。
p{
color:rgb(255,255,255);
}
この場合、pタグは白色の文字色になります。
rgbのrはRed(赤)。
rgbのgはgreen(緑)。
rgbのbはRed(青)。
というふうに、rgbは光の三原色のアルファベット頭文字を示しています。
赤・緑・青の量をrgbの文字の順番のまま()の中に指定します。
p{
color:rgb(redの数値0～255,greenの数値0～255,blueの数値0～255);
}
255の数字を見て、ピンときている方もいるかと思いますが、255は16×16の計算結果から-1した数ですよね。
16進数の色指定方法の「#ff0000」も赤・緑・青の順に2つずつ指定していますよね。
例えば「#ff0000」だと、赤の指定は「ff」の2つ。
16進数の色指定では0から9とaからfまでの文字を使って指定しますので、もちろん文字数は16個。
16個の文字を2つの位置にあてはめるので、各色の組み合わせとしては何パターンになるでしょうか？？
・
・
・
・
・
16*16 = 256 パターンになります。
rgbの255と近しい数字です。rgbについては0から始まるので、0を含めると256パターンになり、16進数の色指定方法パターンと同じになります。
ちなみにですが、以下のように0～100%の指定でもOKです。
p{
color:rgb(redの数値0～100%,greenの数値0～100%,blueの数値0～100%);
}
次は、CSSの色指定方法の１つ、rgbaについて書いていきます。
rgbは以下のように指定します。
p{
background:rgba(255,255,255,0.5);
}
この場合、pタグの背景は白色を半分透過させた色になります。
rgbaのrgbはrgb指定と同じです。
rgbaのaはアルファチャンネルのa。アルファチャンネルは、透明部分の情報を持つものと思ってください。
rgbaのaは、0から1までの数値で指定します。
0が完全透過で全く見えなくなります。
1は透過なしの状態です。rgbの指定と変わりません。
小数点で指定することがほとんどです。
まとめると、rgbaはrgbに透明度を追加した指定方法です。
使う方はふつうにCSSコーディングで使います。
ただ、サイト内でコーディングをするときに会社によっては細かくルールが決まっている場合は16進数での指定で決まっていたりすると、コーディングルールをそろえる必要があるため、16進数で指定します。大規模ページのうち自分が担当したページだけrgb指定だと、管理面を考えたときによくないですよね。
また、保守などの場合はすでに16進数で組まれていると、管理面を考えたときに保守の対象箇所だけrgb指定してしまうと後々どちらに指定したらいいか混乱を招くので、rgbの出番はなくなります。
ちなみにですが、過去を振り返ってみても、rgbで指定する方は少ないです。
rgbが本領を発揮するときは、JavaScriptを使った色の変更処理が必要なときです。たとえば、補色を計算して出したり、特定の色の範囲をランダムで表示させたいときなどに使えます。
透過の情報を指定できるので、透過が必要なデザインのときに使います。
一番多いのは、透過レイヤーを重ねたい場合ですね！ホバー操作のときに背景色を透過させたい場合にも使えますね。
あとは、デザインカンプが透過で指定してある場合はそれを使うこともあります。
以上、CSSの色指定の方法 rgbaとrgbの違いと使い分けについて書いてみました。
なれると割と無意識で使うため、rgbaについてはもっと使う場面があると思います。