色／カラー

since: 22nd/May/2002; Last Modified: 24th/Dec./2006

HTML 文書に、色をつけてみましょう。本稿では、次の HTML 文書をサンプルに説明します。

下記の HTML 文書は XHTML 1.1 の例です。ソースをテキストエディタにコピー＆ペーストし、ファイル名を genji01_kiritsubo.html として、文字コードを UTF-8 で保存してください。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>源氏物語 第一帖 桐壺 第一段</title>
</head>
<body>

<h1>源氏物語</h1>

<h2>第一帖 桐壺</h2>

<h3>第一段</h3>

<div class="section">
<p>いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき
際にはあらぬが、すぐれて時めきたまふありけり。</p>

<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>

<p>上達部、上人なども、あいなく目を側めつつ、「いとまばゆき人の御おぼえなり。唐
土にも、かかる事の起こりにこそ、世も乱れ、悪しかりけれ」と、やうやう天の下にもあ
ぢきなう、人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いと
はしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ
。</p>

<p>父の大納言は亡くなりて、母北の方なむいにしへの人のよしあるにて、親うち具し、
さしあたりて世のおぼえはなやかなる御方がたにもいたう劣らず、なにごとの儀式をもも
てなしたまひけれど、とりたててはかばかしき後見しなければ、事ある時は、なほ拠り所
なく心細げなり。</p>
</div> <!-- END section -->

<address>
Copyright (C) 2006 SUGAI, Manabu. Some rights reserved.
</address>

</body>
</html>

これはただのサンプルなので、内容は問わないで下さい。別の HTML 文書でも結構です。 HTML 4 を使う場合は、適宜読み替えてください。

スタイルシートの利用のための準備

外部スタイルシートを利用するために、 HTML 文書を編集します。これは一般的な作業です。

HTTP 応答ヘッダの指定

XHTML の場合は、ここでは特に何も記述しません。

HTML の場合は、 head 要素内に meta 要素で HTTP ヘッダと同等の指定を記述します。

上の例では、 head 要素は次のようになります：

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>源氏物語 第一帖 桐壺 第一段</title>
</head>

外部スタイルシートへのリンク

今から、外部スタイルシートを使って、サンプルの HTML 文書にスタイルを適用します。外部スタイルシート名を common.css として、 HTML 文書と同じディレクトリに保存する事にします。common.css を外部スタイルシートとして参照するために、head 要素に link 要素でリンクします。

上の例では、 head 要素は次のようになります：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 第一帖 桐壺 第一段</title>
</head>
:

外部スタイルシートの作成

外部スタイルシートを作成します。この HTML 文書と同じディレクトリに、ファイル名を common.css としてテキストファイルを作成してください。これからこのファイル内に、スタイルを記述していきます。

背景の指定 - `background`

要素に対して、背景を指定します。CSS で背景を指定するためのプロパティーが "background" です。

背景色を指定する CSS の書式

背景に画像を使わない場合は、背景色だけ指定します：

セレクタ { background: 背景色 }

背景画像を指定する CSS の書式

背景に画像を使う場合は、画像ファイルの URL と、画像が読み込めなかったときに表示される背景色の両方を同時に指定します。画像の URL は絶対 URL と相対 URLの両方が使えます。

セレクタ { background: url("画像ファイルのURL") 背景色 }

背景に濃い色の画像を使う場合は、文字を薄い色にしないと見えません。このとき、何らかの理由で画像が読み込めない場合に、背景色が指定されていないと、デフォルトの白が背景色になります。文字の色は薄く、背景色は白くなりますので、読めないことになります。画像と同じような色調の背景色も指定しましょう。

たとえば、このスタイルを適用する対象を h1 要素に選ぶのならば、次のようになります：

h1 { background: url("画像ファイルのURL") 背景色 }

背景に対するそのほかの指定

CSS2.1では、背景画像の表示体裁はほかにも次のような指定があります：

どの方向に繰り返すか： repeat | repeat-x | repeat-y | no-repeat
スクロールに対して固定するかどうか： scroll | fixed
どこに配置するか： [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

次の例は、 body 要素の背景指定です。

背景画像は ../moon.png
背景色は black
背景画像は縦方向に繰り返し repeat-y
背景画像はページスクロールに対して固定 fixed
背景画像は左上端から開始 left top

body { background: url("../moon.png") black repeat-y fixed left top }

本項ではこれらのプロパティについては説明しません。詳しくは「ＣＳＳとはなんだろうか」を参照ください。

サンプル

次のソースを、 common.css に記述して、文字コードを UTF-8 にして保存してください。

@charset "utf-8";

div.section { background : #ccf }

genji01_kiritsubo.html をブラウザで開くと、段落の背景色が薄青になっていることが確認できます。

更に、 common.css を次のように編集して保存してください。

@charset "utf-8";

html { background: url("./rindou5.gif") navy }
div.section { background : #ccf }

画像 rindou5.gif を、 CSS ファイルと同じディレクトリに保存してください。この画像は、平安素材「綺陽堂」から頂きました。

図：rindou5.gif

画像の保存は、次のようにします：

画像の上で右クリック、「名前を付けて画像を保存」(MS I.E.)、または「画像を名前を付けて保存」(N.C.4, Netscape 6)、または「画像イメージを保存」(Opera)
画像をブラウザでひらいて、ブラウザの「ファイル」、「名前を付けて保存」

HTML 文書と CSS ファイルと画像ファイルが同じディレクトリに保存されていれば、genji01_kiritsubo.html をブラウザで開くと、全体の背景に画像 rindou5.gif が敷き詰められていることが確認できます。それぞれを別のディレクトリに保存した場合は、相対 URL を適宜書き換えてください。

前景色の指定 - `color`

背景の上に描写されるものの色を前景色と呼びます。たとえば、文字の色が代表的なものです。 CSS で前景色を指定するプロパティーが "color" です。

前景色を指定する CSS の書式

セレクタ { color: 前景色 }

たとえば、このスタイルを適用する対象に strong 要素を選べば、次のようになります：

strong { color: 前景色 }

サンプル

common.css を次のように編集／保存してください。

@charset "utf-8";

html { background: url(./rindou5.gif) navy;
    color: #ccf }
div.section { background : #ccf;
    color: navy }
p:first-child:first-letter { color: red }

genji01_kiritsubo.html をブラウザで開くと、全体の文字色が薄青で、段落の文字色だけが濃紺になっていることが確認できます。今は、 h1 要素、 p 要素、 address 要素だけしかないので、 h1 と address は薄青文字、 div.section 要素は濃紺文字になっています。更に、擬似要素をサポートしているブラウザ (Opera, Firefoxなど）の場合は、最初の段落の一文字目が赤くなります。

親要素へのスタイルの指定は、子要素にも適用されます。 body 要素に指定したスタイルは子要素である h1, p, address に継承されますが、今は div.section 要素だけ別のスタイルが指定されています。

色の指定方法

CSS では、色を、名前と RGB と呼ばれる形式で表現します。

色の名前

CSS で定義されている色名は１６種類あります。

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

CSS2.1 では、これらに orange (#ffa500) が追加されました。

たとえば、段落 p 要素の文字色（前景色）を濃紺にしたければ、スタイルシートは次のようになります。

p { color: navy }

RGB

CSS では、光の三原色（赤、緑、青）を混成して表現します。三原色の一色あたりを１６進数（０，１，２，３，４，５，６，７，８，９、ａ、ｂ、ｃ、ｄ、ｅ、ｆ）で表現します。

"#RGB" という形で、三桁の１６進数で表現すれば、最大 4,096 色表現できます。これを "High Color" と呼びます。

"#RRGGBB" という形で、六桁の１６進数で表現すれば、最大 16,777,216 色表現できます。これを "True Color" と呼びます。

"#RGB" は "#R0G0B0" ではなく、 "#RRGGBB" と解釈されます。たとえば、 "#f00" は "#ff0000" に解釈されます。

純色の例

	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`

たとえば、次のようなスタイルシートは、 address 要素の背景色を暗い赤にします。

address { background: #800 }

混成色の例

より詳細な色見本が Appendix に用意されています。

"`#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`

"`#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`

"`#?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`

"`#?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`

"`#??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`

"`#??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`

たとえば、スタイルシートを次のように書けば、h1 要素の文字色（前景色）が青紫になります。

h1 { color: #90f }

色／カラー

スタイルシートの利用のための準備

HTTP 応答ヘッダの指定

外部スタイルシートへのリンク

外部スタイルシートの作成

背景の指定 - background

背景色を指定する CSS の書式

背景画像を指定する CSS の書式

背景に対するそのほかの指定

サンプル

前景色の指定 - color

前景色を指定する CSS の書式

サンプル

色の指定方法

色の名前

RGB

純色の例

混成色の例

背景の指定 - `background`

前景色の指定 - `color`