滋賀県のホームページ制作 有限会社エクルス

滋賀県のホームページ 企画 制作会社です。Webサイトのサポートならお任せ下さい。

http://www.ecrus.co.jp

色の指定

基本的にHTMLドキュメントで画面の背景色やフォント色を指定する方法として16進数をもちいた光の3原色(RGB)で記述します。少し複雑な内容になりますが、知っておいた方がいい内容です。この章では、16進数と光の3原色の関係について説明します。

■ 16進数とは

16進数を詳しく説明すると頭が変になりますから、できるだけ簡単に説明します。
そもそもコンピュータは2進数で動作しています。要するに「あるか無いか」です。
理由は簡単!コンピュータが電気回路で作られているからです。

電気が流れる (ある = 1 )
電気が流れない(無い = 0 )

この 1 と 0 のふたつの組み合わせで色々な計算をしたり表現をしたりしているわけです。

例えば、生活の中で人間が最もよく使う
10進数(0〜9)をコンピュータに解る2進数で表すと下の表のようになります。

10進数 0 1 2 3 4 5 6 7 8 9 10
2進数 0 1 10 11 100 101 110 111 1000 1001 1010

何か余計に理解できなくなりましたよね。なぜなら10進数の小さな数字でも2進数ではすごい桁数になるからです。プログラマにとってこんなわずらわしいものはありません。そこで人間にわかりやすくコンピュータの2進数にピッタリあてはまる16進数が考え出されました。

下の表を見てください。

これは上の表と同じように16進数と2進数を比べたものです。
2段に分かれてますが連続したものです。

16進数 0 1 2 3 4 5 6 7 8 9
2進数 0000 0001 0010 0011 0100 0101 0110 0111 1000 1001
16進数 A B C D E F
2進数 1010 1011 1100 1101 1110 1111

何がピッタリなのか解りますか?

2進数の0000から1111までが丁度16になります。要するに2進数に変換する時、ピッタリ割り切れるわけです。但し、あくまで16進数は人間が理解するために利用するものでコンピュータの動作は2進数に変りありません。

それと16進数を表す場合、1文字だけで16種類を表現するには数字以外の文字(アルファベット)を使わなければ表現できないため0〜9とA〜Fの計16文字を使うことになりました。

さーて!理解できましたか?(=^^=)

おぼろげながら理解していただければ結構です。次に進みましょう!

■ 光の3原色

色を表現する方法には2種類あります。ひとつは「光の3原色(RGB)」もうひとつが「色の3原色(CMY)」です。パソコンの画面で表現される色は「光の3原色」で表します。光の3原色は赤(Red)・緑(Green)・青(Blue)の3色で作られています。これらの頭文字をとってRGBといわれています。この3色ですべての色を表現することができます。お疑いでしたらテレビ画面を虫眼鏡でご覧下さい。この3色の光量を調整して色を表現しているのが確認できます。パソコンでも同様にこの3色を調整することで色の表現をするようになっています。その表現方法として16進数をもちいています。ひとつの色に256段階の光量変化を付けて色を表現することで1677万色の色を表すことができます。

【各色の16進数表現】

0〜F(16段階)×0〜F(16段階)=00〜FF(256段階)

例)16進数の「0A」は2進数で「0000 1010」です。
組み合わせは全部で「0〜255」の256種類になります。

【1677万色(フルカラー)】

赤(R256段階)×緑(G256段階)×青(B256段階)=16777216

 

 

【各色の16進数表記を並べて文字で表すと】
すべての色を発色しないと
000000 黒
すべての色を発色すると
FFFFFF 白
赤(R)だけ発色すると
FF0000 赤

※ 文字色や背景色を指定する場合は、16進数表記の頭に「#」をつけます。