17【雑談】いろいろな色
白猿
「今回は『色』の話題だ。これまで紹介したタグでは、例えばこういう書き方があったぜ」
・゜゜・*:.。..。.:*・゜゜・*:.。
<span style="color:green;">緑色になります。</span>
<span style="color:#ff0000;">赤色になります。</span>
・゜゜・*:.。..。.:*・゜゜・*:.。
表示例
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「前者は色の名前で指定していて、後者はＲＧＢ……つまり赤緑青の強さで色を設定しているんだね」
白猿
「そうそう。前者はカラーコードというもので、代表的なものはこれだ」
・゜゜・*:.。..。.:*・゜゜・*:.。
black 黒
white 白
red 赤
yellow 黄
blue 青
green 緑
gray 灰色
lime 黄緑
orange 橙色
aqua 水色
purple 紫
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「色の英語での名前がわかってれば、設定できそうだね」
白猿
「後者は光の三原色のＲＧＢを設定するものだ。赤のred、緑のgreen、青のblueのそれぞれの数値を入れるんだ」
黒猫
「黄色がないんだね。色って赤・青・黄が基本だと思ってたけどね」
白猿
「赤・青・黄は色の三原色だな。自身が光っているんじゃなくて、空気中で光が反射して目に入ってくるものだ」
黒猫
「ＲＧＢはディスプレイがその色で光っているんだね」
白猿
「ちなみに色の三原色は赤・青・黄で紹介されることもあるけど、正確にはマゼンダ(赤紫)、シアン(空色)、イエロー(黄)が三原色だ」
黒猫
「カラーのプリンタを持っている人はなじみがあるかもね。そういう名前でインクが売られてるから」
白猿
「で、ＲＧＢに話を戻そう。タグで色を指定する場合はハッシュ記号(#)の後で2桁の数字で赤・緑・青の強さを指定する。例えばこういう感じ」
・゜゜・*:.。..。.:*・゜゜・*:.。
赤 #ff0000;
緑 #00ff00;
青 #0000ff;
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「数字といいながら、『ff』という英字が入っているんだね。吾輩は知っているが、ここでつまづく人もいるかもね」
白猿
「ここで16進数というものを紹介しよう。『～進数』という言葉は、どの数字で桁があがるかをというものだ」
黒猫
「日常では十で桁があがる十進数だね」
白猿
「時計では60秒、60分を１つの区切りにする『60進数』がある。12個で1ダース、12ダースで1グロスという『12進数』という数え方もあるぜ」
黒猫
「コンピュータの世界では０と１だけを使う『２進数』もあるよね」
白猿
「ここで16進数を10進数でなおすとこうなる。十進数での10～15をa～fにして、16で1桁あがるものだ」
・゜゜・*:.。..。.:*・゜゜・*:.。
1,2,3,4,5,6,7,8,9,a(10),b(11),c(12),d(13),e(14),f(15),10(16),11(17),……fe(254),ff(255)
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「上の例では、（）の中が10進数なんだね。16進数で10の場合、十進数になおすと16になるんだね」
白猿
「そうそう。色を指定する場合00からff(255)までの範囲で色を指定する。00が一番暗くて、ffが一番明るい」
黒猫
「0から255といっても、どういう数字で何色になるかわかりづらいね」
白猿
「さっきのカラーコードで16進数でどうなるか紹介しよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
#000000; black 黒 <span style="color:#000000;">■■■</span>
#ffffff; white 白 <span style="color:#ffffff;">■■■</span>
#ff0000; red 赤 <span style="color:#ff0000;">■■■</span>
#ffff00; yellow 黄 <span style="color:#ffff00;">■■■</span>
#0000ff; blue 青 <span style="color:#0000ff;">■■■</span>
#008000; green 緑 <span style="color:#008000;">■■■</span>
#808080; gray 灰色 <span style="color:#808080;">■■■</span>
#00ff00; lime 黄緑 <span style="color:#00ff00;">■■■</span>
#ffa500; orange 橙色 <span style="color:#ffa500;">■■■</span>
#00ffff; aqua 水色 <span style="color:#00ffff;">■■■</span>
#800080; purple 紫 <span style="color:#800080;">■■■</span>
・゜゜・*:.。..。.:*・゜゜・*:.。
表示例
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「緑の場合、カラーコードでは『#008000;』がgreenで、『#00ff00;』はlimeになるんだね」
白猿
「日本語ではどっちも緑なんだけどな。『カラーコード』で検索すれば、もっといろいろな色がでてくるぜ」
黒猫
「16進数でどういう設定で何色になるか覚えられるかな」
白猿
「割烹エディターを使った場合は、色の一覧から選べるから無理に覚える必要はないぜ。『#ffffff;』の文字を変えれば色が変わるってことだけ覚えておけばＯＫだ」
