色／カラー

since: 22nd/May/2002; Last Modified: 25th

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

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

<?xml version="1.0" encoding="Shift_JIS" 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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>「夜長姫と耳男」を読む</title>
</head>
<body>
<h1>「夜長姫と耳男」を読む</h1>
<p>昭和２７年初出、３０年に没した安吾晩年の作品に分類できます。自己模倣の罠には
まっている恨みもありますが、美しい小品です。</p>
<p>この短編のキーワードは「イノチ」。「イノチ」とは呪うほど強く望むこと、苦悶す
る衒気が描かれています。人は、ギリギリの、のっぴきならない場に居続ける事に疲れ
て、ややもすると悟達や諦念、成熟に安堵する。呪詛、苦悶、己の欲望から目を背けてし
まう。それは自己韜晦であり、己の魂の簒奪です。</p>
<p>安吾は「欲望」、「堕落」を称揚するかのようですが、それは「人間」を描く事であ
り、人品の卑しさを嫌悪し、魂の純潔を尊ぶことです。そしてあらゆる形の愛に収斂して
いくものです。</p>
<address>
Copyright (C) 2002 SUGAI, Manabu. All rights reserved.
</address>
</body>
</html>

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

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

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

HTTP 応答ヘッダの指定

今作った HTML 文書にスタイルシートを適用していることを示すために、 head 要素内に meta 要素で HTTP ヘッダを記述します。これはスタイルシートを利用する場合は、必ず行うことです。

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

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>「夜長姫と耳男」を読む</title>
</head>

ここで指定した HTTP 応答ヘッダは、スタイルシートを利用する場合は必ず記述するものです。

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

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

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

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>「夜長姫と耳男」を読む</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen"  />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>

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

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

背景の指定 - `background`

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

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

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

セレクタ { background: 背景色 }

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

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

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

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

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

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

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

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

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

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

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

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

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

サンプル

次のソースを、 ango.css に記述して保存してください。

p { background : #ccf }

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

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

body { background: url("./rindou5.gif") navy }
p { background : #ccf }

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

図：rindou5.gif

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

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

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

前景色の指定 - `color`

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

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

セレクタ { color: 前景色 }

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

strong { color: 前景色 }

サンプル

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

body { background: url(./rindou5.gif) navy;
    color: #ccf }
p { background : #ccf;
    color: navy }

yonagahime.html をブラウザで開くと、全体の文字色が薄青で、段落の文字色だけが濃紺になっていることが確認できます。今は、 h1 要素、 p 要素、 address 要素だけしかないので、 h1 と address は薄青文字、 p 要素は濃紺文字になっています。

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

色の指定方法

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

たとえば、段落 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`