発表課題 インターネット上においての色の表現 調査期間：2012年05月～06月 発表日：2012年06月07日 駒澤大学 経営学部 市場戦略学科 3年 西村セミナー所属 いなほ 1 目次 1.カラーコード 2.RGB 3.16進数 4.カラーコード分解実験 5.カラーコードの分類 6.おまけ：セーフカラー 7.まとめ 8.参考 2 1.カラーコード 文字色を変更するときのポピュラーなhtmlタグ を挙げてみよう。 例）<font color=”#ff0000”>文字</font> 赤字になっている部分がカラーコードである。「 red」などのカラーネームで指定することもできる。 ちなみに実際にこれを書くと、赤い文字になる。 例）文字 では、この英字と数字の羅列は何なのか？ 3 2.RGB ここでまず、RGBという表現法が出てくる。赤（Red）、 緑（Green）、青（Blue）の三原色を混ぜて幅広い色 を再現する加法混色の一種である。*1 赤緑青はいわゆる光の三原色であり、液晶画面など はこの三色で表現されている。対して、色の三原色 ・シアン、マゼンタ、イエローは印刷物などに使われ る。 このRGBがコードの中に隠れているのだ。 例）#ff0000 つまり#RRGGBBというように対応している。 ではRGBの三色がなぜfやら0になるのか？ 4 3.16進数 ⅰ.16進法 ここで16進法である。 普段私たちは10進法を利用している。しかし、実は他 にも60進法や100進法を使っていることには気づい ているだろうか。 1から9まで数えたら次は位が上がって10になるが、 同じように1秒から59秒まで数えたら次は1分になる し、1cmから99cmまで数えれば次は1mになるのだ 。 つまり、16進法とは1から15まで数えたら次に位が上 がる数え方であり、その数え方で表された数字が 16進数なのである。 5 3.16進数 ⅱ.アルファベットはなぜ必要か しかしカラーコードは6桁で表現しなければならない。 0～9までは良いとしても、10～15はそのまま書くわ けにはいかないのだ。 ここでアルファベットを借りる。 10をa、11をb…15をfと当てはめることで、この問題を 解決するのだ。 6 4.カラーコード分解実験(1) カラーコードの英数字は結局数字を表していたという ことがわかったところで、試しに以下の色はRGBの どの色をどれだけ出力しているのか計算してみよう 。 ■（赤） #ff3333 ■（水色） #33a3a3 ■（黄） #ff950e 7 4.カラーコード分解実験(2) ここで厄介なのはもちろん16進数であることだ。「11」 と表記されていても「じゅういち」ではない。 1×16+1=17、「17」になるのである。 アルファベットにも気をつけて計算すると以下になる。 ■（赤） #ff3333 =R(15×16+15),G(3×16+3),B(3×16+3) =255,51,51 赤系の色は、やはり赤の出力が一番大きいことが数 値からもよくわかる。 8 4.カラーコード分解実験(3) 他の2色も計算してみよう。 ■（水色） #33a3a3 =R(3×16+3),G(10×16+3),B(10×16+3) =51,163,163 ■（黄） #ff950e =R(15×16+15),G(9×16+5),B(0×16+14) = 255,149,14 9 5.カラーコードの分類(1) 次に、各色の大まかな表し方を一覧にしてみた。 ちなみにすべて最大出力である。 #ffffff #ff0000 #00ff00 白 赤 緑 #000000 #00ffff #ff00ff 黒 水色 紫 下段に関しては、緑＋青＝水色、 赤＋青＝紫、赤＋緑＝黄色、と 覚えられたら使いやすいかもしれない。 #0000ff 青 #ffff00 黄色 10 5.カラーコードの分類(2) 先ほどの一覧を参考に考えてみよう。 例えばカーキ色を使いたいとき。緑系で、水色よりは 黄色に近く、暗めの色になる。 すると、数値の大きさはG>R>B、全体的に小さめの 可能性が高い。 例）■：355e00 淡い水色が欲しいなら、#ffffffと#00ffffの間で微調整 をしてみるといいだろう。 例）■：#99ccff 11 6.おまけ：セーフカラー 昔、多くのコンピューターが同時に表示できるのが 256色に限定された時代があった。このとき提案さ れたのがセーフカラーである。*2 これを使えば、ど のブラウザでも作成者が設定したほぼその通りの 色を表示できる。 一般的なのはカラーコードのRGBそれぞれにあたる 数値を00、33、66、99、cc、ffのどれかに限定した 256色である。 ただし、2007年時点で携帯電話でさえ問題なく256色 以上を表示できたなどの事情から、徐々に利用は 減っているようである。*2 12 7.まとめ インターネット上の色の多くは、カラーコードで 表現されている。つまり、このカラーコードをいかに 活用するかで閲覧者に与えるイメージはがらりと変 化させられるし、他者に差をつけて印象を残すこと もできる。 今回は残念ながら実際の色の使い方にまで迫る ことはできなかったが、カラーコードだけに焦点をし ぼったことでむしろ面白い考え方ができたように思 う。 13 8.参考・他 *1：Wikipedia 原色(2012/6/4) http://ja.wikipedia.org/wiki/%E5%8E%9F%E8%89%B2 *2：Wikipedia ウェブカラー(2012/6/4) http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82 %AB%E3%83%A9%E3%83%BC ※（）内は参照日付である。 14
© Copyright 2024 ExpyDoc
