熊本大学大学院教授システム学専攻
目次:
【第10回】CSS(2)
第1章
第3章
現在の場所: ホームページ > [2]HTMLとCSS > 【第10回】CSS(2) > 第2章 CSSに必要な単位など

CSSに必要な単位など

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

長さの単位

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

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

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

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

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

(註1) いくつかのプロパティでは、整数だけではなく小数を含んだ実数が指定できるものもあります。
p.sbg { font-size: 1.8em; }
(註2) 一部のプロパティでは、 「%」を単位とするパーセンテージ値が指定できるものもあります。
p.db { font-size: 200%; }

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ではありませんので、注意して下さい。

色の表現 (色コード)

色 -- それは光の三原色(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色名
#000000black #800000maroon #008000green #000080navy
#c0c0c0silver #ff0000red #00ff00lime #0000ffblue
#808080gray #800080purple #808000olive #008080teal
#ffffffwhite #ff00fffuchsia #ffff00yellow #00ffffaqua

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

body {
  background-color: #00ffff;
}
body {
  background-color: aqua;
}

色サンプル

下のバーは、色表現のサンプルです。 バーの下にある三原色のそれぞれの明るさ(強さ)を、 0?255の範囲で変えることで、 いろいろな色を出すことができます。
最初は、緑色になっていると思います。これは、 三原色の1つである緑(G)の明るさを最大にして(レベル:255)、 残りの赤(R)と青(B)を全く光らないようにして(レベル:0)あるからです。

(16進表現の色コード)
赤(R):   緑(G):   青(B):
(0?255)       (0?255)      (0?255)     

R、G、Bの明るさを適当に変化させて、 自分の必要な色を見つけて下さい。 16進表現ボックスに現われた数が、 表示されている色のコードです。この数を、CSSで利用して下さい。
明るさを変化させるには、「▲」や「▼」をクリックするか、 数字が現われている箱の中に、 半角数字で直接、 数値を0?255の範囲で書いてください。また、16進表現ボックスに、 直接16進六桁を書いて Enter キーを押して、色を確認することもできます。

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

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

0123456789abcdef
#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等で、 「色見本」や「カラーコード」などをキーワードにして検索するとよいでしょう。
Copyright (C) Kenichi Sugitani 2005, All Rights Reserved