20XX-66-15135: CSSで利用する色の表現 (色コード)

CSSで利用する色の表現 (色コード)

CSSに必要な単位など

CSSでスタイル設定するときに必要な単位や色コードなどについて学習します。

CSSで利用する長さの単位

CSSでは暗黙の(デフォルトの)単位がありませんので、長さ(大きさ)を指定するときには必ず単位をつける必要があります。

CSSで指定できる長さの単位には、大きく分けて「絶対単位」と「相対単位」があります。

「絶対単位」というのは、mm(ミリメートル)、in (インチ)、pt (ポイント、1/72インチ)などの、我々が日常生活で使っている長さの単位です。 CSSでこれらの単位を用いてスタイルを指定すると指定された長さ(大きさ)がそのままWebブラウザで表現されるのですが、あまり好まれません。それは、Webブラウザの環境が、ディスプレイのサイズやそのときのブラウザのウィンドウサイズによって変わるため、どちらかと言うと絶対的なサイズよりその時点での環境に合わせた表示の方がより見やすいからです。

そこで登場するのが「相対単位」です。「相対単位」には次の３つがあります。

px (ピクセル)
em (font-sizeプロパティの値を１としたときの単位)
ex (小文字 x の高さを１としたときの単位)

通常、文字の大きさの単位は「em」を用い、それ以外の画像や文書ブロックの大きさなどの単位は「px」を用います。

いくつかのプロパティでは、整数だけではなく小数を含んだ実数が指定できるものもあります。

.sbig { font-size: 1.8em; }

一部のプロパティでは、「%」を単位とするパーセンテージ値が指定できるものもあります。

.ubig { font-size: 200%; }

CSSでURI参照する

CSSで値にURIを指定する場合は、「url()」関数を利用します。「url()」は、関数の引数 (関数の入力) として、相対URIまたは絶対URIを指定します。そのURIで指定されたファイルがその値として設定されます。

body { background-image: url("./img/bg.jpg"); }

上記の例では、HTML本文の背景画像として、CSSファイルから見た相対URI「./img/bg.jpg」の画像ファイルを指定しています。

ここで言う「関数」は、数学のときに出てきた関数と同じように何か値を入力すると、何らかの処理がされて出力が得られるものです。

url関数で利用する相対URIは、 CSSファイルから見た相対URIです。 HTMLファイルからの相対URIではありませんので注意して下さい。

CSSで利用する色の表現 (色コード)

色 - それは光の三原色(RGB)により構成される

PCの世界で色は、光の三原色(Red、Green、Blue)の強さを混成して表現します。三原色のそれぞれを16進数 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) で表現します。

"#RRGGBB" という 16進数六桁で表現するのでしたね。このように表現すると、R、G、Bがそれぞれ 256 (=16×16) 種類の値を取るので最大 16,777,216 (=256×256×256) 色を表現できます。 (このように表現された色は、「full-color」や「true-color」と呼ばれます。)

ただ、人間の目には、上記のような色の違いは分りませんので、もう少し荒い区別でも、十分利用できます。そのため、Webページの色としては、"#RGB" という 16進数三桁の表現も良く用いられます。このようにすれば、最大 4,096 (=16×16×16) 色が表現できます。

ただし、"#RGB" は "#R0G0B0" ではなく "#RRGGBB" と解釈されます。
たとえば、 "#fa8" は "#ffaa88" と同じです。

色の名前

以下の16種類の色は、代表的な色なので名称 (色名) が定義されています。これらの色は、16進数表記だけでなく色名で指定することができます。

RGB	色名	RGB	色名	RGB	色名	RGB	色名
#000000	black	#800000	maroon	#008000	green	#000080	navy
#c0c0c0	silver	#ff0000	red	#00ff00	lime	#0000ff	blue
#808080	gray	#800080	purple	#808000	olive	#008080	teal
#ffffff	white	#ff00ff	fuchsia	#ffff00	yellow	#00ffff	aqua

下記の2つのCSSの記述は、全く同じ効果を指定していることになります。

body {
  background-color: #00ffff;
}

body {
  background-color: aqua;
}

色サンプル

下のバーは、色表現のサンプルです。バーの下にある三原色のそれぞれの明るさ(強さ)を 0～255の範囲で変えることで、いろいろな色を出すことができます。

最初は、緑色になっていると思います。これは、三原色の１つである緑(G)の明るさを最大にして(レベル:255)、残りの赤(R)と青(B)を全く光らないようにして(レベル:0)あるからです。

R、G、Bの明るさを適当に変化させて、自分の必要な色を見つけて下さい。 16進表現ボックスに現われた数が、表示されている色のコードです。この数を、CSSで利用して下さい。

明るさを変化させるには、「▲」や「▼」をクリックするか、数字が現われている箱の中に、半角数字で直接、数値を0～255の範囲で書いてください。また、16進表現ボックスに、先頭のシャープ(#)を残したまま、直接16進6桁を書いて Enter キーを押して、色を確認することもできます。

代表的な色のサンプル (16進三桁表記)

RGBそれぞれ一つずつの強さを変えた色サンプルを以下に示します。

	0	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f
`#R00`	`#000`	`#100`	`#200`	`#300`	`#400`	`#500`	`#600`	`#700`	`#800`	`#900`	`#a00`	`#b00`	`#c00`	`#d00`	`#e00`	`#f00`
`#0G0`	`#000`	`#010`	`#020`	`#030`	`#040`	`#050`	`#060`	`#070`	`#080`	`#090`	`#0a0`	`#0b0`	`#0c0`	`#0d0`	`#0e0`	`#0f0`
`#00B`	`#000`	`#001`	`#002`	`#003`	`#004`	`#005`	`#006`	`#007`	`#008`	`#009`	`#00a`	`#00b`	`#00c`	`#00d`	`#00e`	`#00f`

RGBを混ぜ合わせた代表的な色のサンプルを以下に示します。

赤(R)を最大("f")にした例
`#fff`	`#fcf`	`#f9f`	`#f6f`	`#f3f`	`#f0f`
`#ffc`	`#fcc`	`#f9c`	`#f6c`	`#f3c`	`#f0c`
`#ff9`	`#fc9`	`#f99`	`#f69`	`#f39`	`#f09`
`#ff6`	`#fc6`	`#f96`	`#f66`	`#f36`	`#f06`
`#ff3`	`#fc3`	`#f93`	`#f63`	`#f33`	`#f03`
`#ff0`	`#fc0`	`#f90`	`#f60`	`#f30`	`#f00`

赤(R)を最小("0")にした例
`#0ff`	`#0cf`	`#09f`	`#06f`	`#03f`	`#00f`
`#0fc`	`#0cc`	`#09c`	`#06c`	`#03c`	`#00c`
`#0f9`	`#0c9`	`#099`	`#069`	`#039`	`#009`
`#0f6`	`#0c6`	`#096`	`#066`	`#036`	`#006`
`#0f3`	`#0c3`	`#093`	`#063`	`#033`	`#003`
`#0f0`	`#0c0`	`#090`	`#060`	`#030`	`#000`

緑(G)を最大("f")にした例
`#fff`	`#ffc`	`#ff9`	`#ff6`	`#ff3`	`#ff0`
`#cff`	`#cfc`	`#cf9`	`#cf6`	`#cf3`	`#cf0`
`#9ff`	`#9fc`	`#9f9`	`#9f6`	`#9f3`	`#9f0`
`#6ff`	`#6fc`	`#6f9`	`#6f6`	`#6f3`	`#6f0`
`#3ff`	`#3fc`	`#3f9`	`#3f6`	`#3f3`	`#3f0`
`#0ff`	`#0fc`	`#0f9`	`#0f6`	`#0f3`	`#0f0`

緑(G)を最小("0")にした例
`#f0f`	`#f0c`	`#f09`	`#f06`	`#f03`	`#f00`
`#c0f`	`#c0c`	`#c09`	`#c06`	`#c03`	`#c00`
`#90f`	`#90c`	`#909`	`#906`	`#903`	`#900`
`#60f`	`#60c`	`#609`	`#606`	`#603`	`#600`
`#30f`	`#30c`	`#309`	`#306`	`#303`	`#300`
`#00f`	`#00c`	`#009`	`#006`	`#003`	`#000`

青(B)を最大("f")にした例
`#fff`	`#cff`	`#9ff`	`#6ff`	`#3ff`	`#0ff`
`#fcf`	`#ccf`	`#9cf`	`#6cf`	`#3cf`	`#0cf`
`#f9f`	`#c9f`	`#99f`	`#69f`	`#39f`	`#09f`
`#f6f`	`#c6f`	`#96f`	`#66f`	`#36f`	`#06f`
`#f3f`	`#c3f`	`#93f`	`#63f`	`#33f`	`#03f`
`#f0f`	`#c0f`	`#90f`	`#60f`	`#30f`	`#00f`

青(B)を最小("0")にした例
`#ff0`	`#cf0`	`#9f0`	`#6f0`	`#3f0`	`#0f0`
`#fc0`	`#cc0`	`#9c0`	`#6c0`	`#3c0`	`#0c0`
`#f90`	`#c90`	`#990`	`#690`	`#390`	`#090`
`#f60`	`#c60`	`#960`	`#660`	`#360`	`#060`
`#f30`	`#c30`	`#930`	`#630`	`#330`	`#030`
`#f00`	`#c00`	`#900`	`#600`	`#300`	`#000`

上記以外の色やフルカラーの色見本を参照したいときは、google等で、「色見本」や「カラーコード」などをキーワードにして検索するとよいでしょう。

Last modified: Thursday, 3 October 2013, 10:38 AM

赤(R):	緑(G):	青(B):
(0～255)	(0～255)	(0～255)