補章: 値と単位

CSSの値には、例えば「色」とか「長さ」を指定することになっている場合があります。具体的にどんな値を指定すればいいのか解説します。

色

colorプロパティ他多くに使用例が見られます。

rgbパーセンテージ型

CSS、というかコンピュータの世界では色は光の三原色で表されます。光の三原色とは赤、緑、青の3つで、この3つの色の光を合わせると白い光になります。また、この3つをうまい割合で混ぜ合わせるとどんな色でも作れます。例えば、赤と緑を混ぜると黄色になり、緑と青を混ぜると水色になるなどします。

ちなみにこの光の原色は動物の種類によって異なるそうで、原色が2つだけだったり、4つあったりする動物もいるそうです。だから、写真をとって画面にうつすと、人間の目には本物と同じ色で見えるが、他の動物には本物とは違う色で見えたりするそうです。これはディスプレイが、人間の光の三原色にあわせて作られているからです。また、この赤、緑、青を使って色を表現する方式をRGBといい、RGBにもいくつか規格がありますが、CSSはsRGBという規格をもとに定められています。

コンピューター上では、この赤、緑、青の強さを決めることで色が作られます。赤、緑、青が全部最大（100%）だと白で、まったく色がない（全部0%）だと黒です。CSSにおけるひとつの色の表し方は、rgb(赤,緑,青)という形です。それぞれの色は、0%～100%で指定します。例えば白は、全部100%ですから、rgb(100%,100%,100%)と指定します。黒はrgb(0%,0%,0%)です。また赤は、赤の色だけ100%で他はないですから、rgb(100%,0%,0%)です。例えば黄色は赤と緑が100%で青がないので、rgb(100%,100%,0%)です。また、同じ割合のまま量を少なくすると暗くなっていきます。例えばrgb(50%,0%,0%)は赤を暗くした色になります。またrgb(50%,50%,50%)は白を暗くしていった色、すなわち灰色です。

rgb値型

コンピュータの世界では、0%～100%というパーセンテージによる指定より、0～255という256段階の指定のほうが一般的で、パーセンテージの指定はこの0～255に変換されて使用されます。255までの理由は、0から255までの数字をちょうど1バイトで表すことができて都合がいいからです。この数字を用いることもできます。例えば白はrgb(255,255,255)で、黒はrgb(0,0,0)です。

<p style="color:rgb(255,0,255)">ピンクっぽい色の段落</p>

#rrggbb型

色の表現方法として長い歴史を持つのが、上の0～255を16進数で表す方法です。16進数が何かわからない人は調べて下さい。

上の、255までをちょうど1バイトで表せるということと関係して、255は16進数で表すとFFで、0～255は16進数では2文字で収まります。これを用いて赤、緑、青を2文字ずつで表し、先頭に#をつけて表す方法があります。順番は同じく赤、緑、青です。また一桁の場合は0を付けて2桁にします。つまり、白は#ffffff、赤は#ff0000などのように表せます。英文字は、大文字でも小文字でも構いません。

<p style="color:#008000">暗い緑色の段落</p>

#rgb型

上の形には省略形があります。#111111や#aabbccのように、赤、緑、青それぞれで同じ数字が2つ並んだ値を取る場合は、これを#111や#abcのように省略できます。他にも例えば、#00fなら#0000ffと同じで青です。

rgba型

RGBに加えて、透明度（alpha）の情報をもった色を指定することができます。透明度は0～1の数字で表され、0だと完全な透明、1だと不透明（透明度情報無しと同じ）です。書き方はrgba(赤,緑,青,透明度)です。

例えば半透明の赤はrgba(255,0,0,0.5)と表せます。また、赤緑青の部分は、0～255の表し方のほかに0%～100%の表し方も使えます。例えばrgba(0%,0%,100%,0.1)などです。

またCSSで小数を書く場合、最初が0ではじまる小数はその0を省略できます。例えば、.6は0.6を表します。

HSL

RGBとは別の色の表し方としてHSLというものがあります。H（色彩）、S（彩度）、L（輝度）の3つの値を用いて色を表します。詳しくは調べて下さい。

CSSでは、Hは0～359の値で表し、SとVは0%～100%のパーセンテージで表します。書式はhsl(H,S,L)です。

<p style="color:hsl(240,100%,50%)">青色（#0000FFと同じ）の段落</p>

また、rgbaと同様に、hslaもあります。4番目に0～1の透明度を指定します。

色名

一部の色には、色名が定められています。例えばredは#FF0000を表します。この色名を使うことができます。使用できる色名はCSS Color Module Level 3に載っています。

また、他に特殊な色名としてtransparentがあります。これは「透明」ということで、rgba(0,0,0,0)を表します。aの値が0なので完全な透明です。けっこう使いどころがあります。

currentColor

またcurrentColorという特殊な値を指定することが可能で、日本語に訳すと「今の色」です。これはcolorプロパティと同じ色ということです。これをcolorプロパティに指定してしまった場合は、無視されます。

長さ

長さは、font-sizeプロパティをはじめとしてさまざまな場面で出てきます。表し方も豊富です。

長さはもちろん数値です。ですから長さにおいては、単位を示すのが重要です。さまざまな単位がありますが、大きく二つに大別されます。絶対的長さと相対的長さです。絶対的長さは、例えばセンチメートルとか、物理的な定義をもち、他のものによらない長さです。ですから、一般にどんな状況でも表す長さが変わりません。対して相対的長さは、他のものを基準にとるため、その基準が変わるとともなって変動します。

絶対的長さ

物理的定義による単位として以下のものがあります。

cm

センチメートル。

mm

ミリメートル。

in

インチ。1インチは25.4ミリメートル。

pt

ポイント。出版業界で使われることがある単位で、1ptは1/72in。

pc

パイカ。同じく出版系で使われるらしい。1pcは12pt(=1/6in)。

<div style="background-color:red;width:1in;height:1.5cm">例</div>

これらの単位の他に、かなりよく使われる単位としてpx（ピクセル）があります。絶対単位の中では、ピクセルによる指定がWebデザインと直結していて分かりやすいでしょう。

ちなみに、CSSは96dpiを基準として定めているらしく、96pxで1inということになっているそうですが、そこまで気にする機会は少ないでしょう。

<div style="background-color:blue;width:96px;height:192px">例</div>

相対的長さ

相対的長さにも分類がありますが、まずはフォントに関係した単位を紹介します。Webページの基本はやはり文字ですから、これらの単位を使えば文字を基準としたデザインを作ることが可能です。remを除いて、現在のフォントを基準にします。

em

その中でも特によく使われるのがこのemです。1emは、フォントの高さ（font-sizeプロパティの値と同じ値）を表します。だから例えば、3emとすれば3行分の長さということです。また、日本語では文字はだいたい正方形ですから、3文字分の横幅にも近似できます。

ex

フォントはふつう、x-heightというものを持ちます。これは、小文字のxの高さです。1exはこのx-heightに等しい長さを表します。そのため、普通は1exは1emよりも小さくなります。半角文字1文字の横幅に近い値となることが多いです。

ch

あまり使われず、ブラウザのうちOperaなどがまだ（2013年3月現在）対応していません。数字の0の横幅とされています。

rem

多分語源はroot emです。emと似ていて、emは現在のフォントにおける高さを表しましたが、remはルート要素（HTMLの場合はhtml要素におけるフォントの高さを表します。つまり、スタイルシートでhtml要素に対してfont-sizeを指定していれば別ですが、特に何もなければデフォルトのフォントの高さを表します。

もう一つの相対単位は、ビューポート（表示領域）を基準にとった長さです。表示領域とは、ページを表示する画面のことです。これは便利ですが比較的新しく、Operaがまだ（2013年3月現在）対応していません。

vw

1vwは、表示領域の横幅の1%を表します。つまり、100vwで表示領域の横幅と同じになります。

vh

vwと違い、縦幅の1%です。

vmin

表示領域の横幅と縦幅のうち、小さいほうの1%です。つまり横幅のほうが小さいときはvwと同じで、縦幅のほうが小さいときはvhと同じです。

vmax

vminの逆で、大きい方を基準にとります。

次のサンプルを試してみましょう。ブラウザの画面の大きさを変えるとそれにともなって大きさが変わります。

<div style="background-color:green;width:50vw;height:50vh">例</div>

ちなみに、絶対長さも相対長さも、長さが0のときは単位を省略できます。つまり0pxとか0emとかかく代わりに0として構いません。これは、どんな単位だろうと0なら0だということで納得がいきます。