色の指定方法について
本日の教材動画はこちら
今回も前回の「数値の指定方法」に続き、当たり前に使っていた「色の指定方法」について深く勉強していきたいと思います。
色の指定方法にはいくつかある
1. 色名で指定をする方法
redとかgreenとか、色名を記載して指定する方法です。単純な色味ならこれで十分ですが、「特定の色しか指定できない」というデメリットを併せ持ちます。この特定の色はW3Cという団体が決めており、定められた色以外は使用することができません。
2. RGBで指定する方法
恐らくこれが一番一般的な指定方法ですね!RGBでの指定は2通りあります。
【10進数で記載する場合】
rgb(赤の値,緑の値,青の値)という書き方で指定をする方法。値は0~255の間となります。赤色の場合はrgb(255,0,0)となります。
【16進数で記載する場合】
#赤緑青の順に値を書きます。赤色であれば#ff0000となります。基本6桁の数字となりますが、同じ数字が続く場合は一桁省略することができます(赤色であれば#F00の記載でもOKとなります)
3. HSLを利用する
私はまったく馴染みがない(見たこともないかも)のですが、デザイナーさんなどは直感的に色が決めれるため好きな指定方法らしいです。色相・彩度・明るさの値をいれて指定をします。例えば赤色ならhsl(0,100%,51%)という記載方法になります。
RGBとHSLはアルファチャンネルの利用ができる
アルファチャンネルってなんやねん?ってなりますが、どうやら「透明度」のことを指しているようです。書き方は後ろに「a」を付けたし、( )の中に透明度を書きます。例えばRGB 10進数で色指定する場合、rgb(255,0,0,0.5)にすれば文字が半分透過されます。
アルファチャンネルと使うとどうなるのか、各色の色はどんな数値なのかなどは参照サイトを確認したほうがわかりやすいかもです。私はRGBが好きなのですが、色を自由自在に指定したいならHSLになれた方が便利そうですね。
【参照サイト】