文字・背景の色を変える

RGBカラーというもの

文字の色を変えるタグは、「color:#RGB;」、背景の色を変えるタグは、「background-color:#RGB」もしくは「background:#RGB」で、#の後のRGBはRed（赤）,Green（緑）,Blue（青）の略で、3色それぞれが0,1,2・・・9,a・・fまでの16段階（16進法ですね）の濃さを持っています。

0は色がないことで、fは色が最も濃いことを表します。「#RGB＝#00f」の場合は、赤と緑に色がなく、青がMAXなので、真青色となります。

「#RGB＝#000」は全ての色がないので黒色、「#RGB＝#fff」は全ての色が重なり合って白色となります（太陽の光はいろんな色の光の集まりですが、重なり合って透明になっています。空に水滴が多いときは屈折して色がバラバラになってしまいます。これが虹です）。

ついでにもう一つ、バラが赤くみえるのは、太陽の光（うち可視光線）がバラに当たったときに、バラが赤以外の光を吸収してしまうため、吸収されない赤色の光が反射して目に入ってきて赤と認識されるためです。

話は戻り、#の後の数字の桁数は本来6桁（R＋G＋B＝2桁＋2桁＋2桁）まであります。上では3桁しか書いてませんが、これは#0000ffは#00fと同じなのでそうしているだけです。

もちろん#0000f2とかだったら3桁に直すことはできません。

ぶっちゃけ3桁で十分だと思いますので、3桁サンプル（30通り／4096通り）を下に示しますが、3桁で表現できない色を使いたいアナタはペイントソフトで好きな色を指定して表示される6桁の数字を使うとよいでしょう。

#000	#400	#800	#b00	#f00
#fff	#bff	#8ff	#4ff	#0ff
#000	#040	#080	#0b0	#0f0
#fff	#fbf	#f8f	#f4f	#f0f
#000	#004	#008	#00b	#00f
#fff	#ffb	#ff8	#ff4	#ff0

サンプルの文字・背景色を変える

RGB値を指定してサンプルの文字色と背景色を変えてみましょう。

bodyに背景色を指定するとブラウザ画面全体の背景色を変えることができます。

@charset "shift_jis";
body {
	background-color:#efe;
	}
h2 {
	font-size:16px;
	color:#494;
	}
h3 {
	font-size:14px;
	color:#f44;
	}
dl {
	background-color:#fff;
	}
dt,dd {
	font-size:13px;
	}
ul {
	font-size:14px;
	color:#555;
	}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

Lesson3～CSSを使った装飾～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>