16.4.9. 補足

CSS において色や長さを指定する方法を詳しく述べます。

長さの単位 #

スタイルを指定する際、長さの指定をすることがよくあります。例えば font-size プロパティや text-indent プロパティ、他にも border, padding に関係するプロパティでは長さを指定しなければいけません。長さの指定には相対指定と絶対指定があります。

相対指定 #

CSS では、基準となる長さとして次の 3 つが定められています。

em: 標準のフォントサイズ

ex: “x” の文字の高さ (x-height)

px: 1 ピクセルのサイズ

これらの前に倍率となる数字を書いて、長さを指定することができます。

ソース

ここはインデントがありません。margin を指定したのは、行間を狭くして見やすくするためです。

こっちには 1.2em 分のインデントがあります。インデント幅が行頭の「こ」の字の幅の 1.2 倍になっています。

出力

ここはインデントがありません。margin を指定したのは、行間を狭くして見やすくするためです。

こっちには 1.2em 分のインデントがあります。インデント幅が行頭の「こ」の字の幅の 1.2 倍になっています。

絶対指定 #

長さを絶対的な数字で直接指定する方法です。CSS では in (インチ), cm (センチメートル), mm (ミリメートル), pt (ポイント), pc (パイカ) の 5 つの単位が用意されています。1pt は 1/72 インチで、1pc は 12pt の意味です。

ソース

ここのフォントサイズは 1cm です。出力

ここのフォントサイズは 1cm です。

といってもディスプレイに映る画面は小さなピクセルから構成されているので、厳密に言うと 1 ピクセル単位の長さ調整しかすることができません。絶対指定をした時は、ピクセル単位で表したときに最も近い値で表示されるということになります。

しかし安易に絶対指定を行うと、環境によってレイアウトが崩れる恐れがあります。例えば ECCS の iMac 端末では 1cm という長さは普通に思えるかもしれません。ですが長さ 1cm のものを大きな 40 インチディスプレイで見たら、きっと小さすぎると思うでしょう。このようにウェブブラウザの表示環境が変わると、絶対指定が不適切になることがあります。ですから、なるべく相対指定をすることをお勧めします。

色の指定方法 #

CSS で色を記述する方法には RGB 値、色名および HSL という3種類の方法があります。これらの方法を順番に説明します。なお人間にとって RGB 値より HSL の方が分かりやすいのですが、HSL は CSS3 になって初めて実装される機能なので古いブラウザでは動かない可能性があります。ですので色名、RGB 値、HSL の順で説明することにします。

色名による指定 #

よく使われる色は名前を書いて使うことができます。次の 17 色は CSS Color Module Level 3 の中で基本色として定義されています。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

これ以外にもたくさんの拡張色が定義されており、新しいブラウザでは使うことができます。定義されている色のリストは

CSS Color Level 3, 4.3 節にあります。

RGB 値による指定 #

よく知られているとおり、光の色は「光の三原色」と言われる赤色・緑色・青色の光の強さで決まります。現在広く普及しているディスプレイでは光の三原色の強さをそれぞれ 0 から 255 までの 256 段階の数字で指定することができ、それぞれの色の強さを決めることで一つの色を表現します。たとえば白色は、赤色・緑色・青色の全ての強さを 255 にすると得られます。また、青色の強さを 0 にして赤色と緑色の強さを 255 にすると、黄色になります。

HTML/CSS において色を指定するときは、赤色・緑色・青色の光の強さを 16 進数で表します。255 は 16 進数で FF ですから、それぞれの光の強さは 16 進数で 2 桁で表されます。この 2 桁の数字 3 つを赤・緑・青の順に並べて頭に#を付けると、色名になります。

ソース

赤=255(ff), 緑=0(00), 青=0(00)とすると赤色になります。
赤=100(64), 緑=200(c8), 青=150(96) とすると今度は緑っぽい色になります。出力

赤=255(ff), 緑=0(00), 青=0(00)とすると赤色になります。

赤=100(64), 緑=200(c8), 青=150(96) とすると今度は緑っぽい色になります。

次のように 10 進数で色の強さ指定することもできます。また、255 に対する割合を % で指定することもできます。

ソース

赤=255(ff), 緑=0(00), 青=0(00)とすると赤色になります。
赤=100(64), 緑=200(c8), 青=150(96) とすると今度は緑っぽい色になります。出力

赤=255(ff), 緑=0(00), 青=0(00)とすると赤色になります。

赤=100(64), 緑=200(c8), 青=150(96) とすると今度は緑っぽい色になります。

これで赤・青・緑それぞれ 256 段階ずつ、合わせて 16777216 個の色を使い分けることができるわけです。しかし求める色に対応する数字を求めることは、人の手ではまず出来ません。色に対応する数字を調べるには、OS についているペイントソフトなどを使ってください。

HSL による指定 #

HSL とは色相 (Hue), 彩度 (Saturation), 輝度 (Lightness) の頭文字を並べたものです。この 3 つを指定することで色を指定できます。まず色相とは0 度から360 度までの範囲で色を配置したもので、赤色を 0 度として補色がちょうど 180 度離れるようになっています。0 度から 360 度までの色の変化は、次のようになります (hsl 指定を使っているので、古いブラウザでは正しく表示できないかもしれません)。

0 360彩度は % で指定し、100% が純色、0% が灰色となっています。また輝度も % で指定し、0% が黒、100% が白に対応しています。hsl で色指定をするには、次のように hsl キーワードに色相、彩度、輝度の値をこの順番で渡します。

ソース

hsl のテストです。出力

hsl のテストです。