Webの色はRGBで指定しよう

ウェブ上の色（ウェブカラー）について学習しましょう。

ウェブの色

HTMLは文書構造を示す技術なので、HTMLでは色を付けません。

ウェブページなどのコンテンツに色を付けるには、基本的にCSSを使います。

CSSのcolorプロパティやbackground-colorプロパティの値に具体的な色を指定することで、文字や背景に色を付けることができます。

具体的な色を指定する方法はいくつかありますが、ここでは入門者らしく、よく使う方法だけを効率的に学習しましょう。

基本的な考え方はRGBを指定するということです。RGBとはRedGreenBlue、つまり赤緑青の三色のことです。

赤緑青の三色の絵の具の量をそれぞれどれくらい混ぜた色なのか、という考え方でウェブ上の色を指定します。

CSSでウェブカラーを指定する方法のひとつが、三色の絵の具の量を0から255までの数値で表現するという方法です。

CSSを次のように書くと赤のウェブカラーになります。

	.red{
		color:rgb(255,0,0);
	}

これはサンプルです。赤いですか？

赤を255、緑と青は0の割合で混ぜると、色は真っ赤になるという仕組みです。

では、赤の数値を240に減らしてみましょう。

	.red{
		color:rgb(240,0,0);
	}

これはサンプルです。赤味が弱まりましたか？

少しわかりにくいので、どんどん並べてみましょう。

255、 240、 220、 200、 180、 160、 140、 120、 100、 80、 60、 40、 20、 0

このように、赤の数値を減らしていくと赤味が減って最終的には黒になります。

三色をすべて0にすると黒になり、255にすると白になります。

原色として三色用意すれば、あらゆる色を生成できるとされています。この方法では256段階を３つ指定するので、256x256x256=約1677万もの色を表現できる計算になります。

256段階ではなく、100段階として次のように％を使う方法も用意されています。

	.red{
		color:rgb(100%,0%,0%);
	}

こちらの方法の方が直感的に色を想像しやすいかもしれません。

なお、0から255までの数値方式と％方式は３色内では混合して使えないようです。

この方法は、ウェブカラーをRGBで表現するときにそれぞれの量を16進数2桁で表します。ウェブカラーの指定方法としては、こちらの方がメジャーかもしれません。

16進数というのは0からFまでの16文字を使って16パターンを表現する方法です。16進数を2桁並べて、16x16=256パターンを表現します。0から255までの数値方式と同じ種類のウェブカラーを表現できます。

CSSでは（括弧）やカンマは使わずに#を頭に付けてウェブカラーを表現します。

	.red{
		color:#FF0000;
	}

redやblueといった代表的なウェブカラーであれば、ダイレクトに色の名前を書いて指定することができます。

代表的といっても100種類以上は用意されているので、大体の色は表現できます。

CSSでは決められたスペルでウェブカラーの名前を記述するだけです。

	.red{
		color:red;
	}