8. 値

Revised: Aug./3rd/2004; Since: Jul./03rd/2004

CSS のプロパティの値で指定されるものには、プロパティごとに固有のもののほかに、プロパティ間で共通して指定できる値があります。ここでは、代表的なものを説明します。

区切り文字
inherit: 継承
10 進数
1. <number>
2. <integer>
<identifier>: 識別子
<string>: 文字列
<color>: 色
<length>: 長さ
<percentage>: パーセント値
<uri>: URI = URL + URN

区切り文字

複数の値を羅列するとき、区切り文字には、カンマか空白を使います。

カンマ区切り

カンマの出現が許されるプロパティや属性については明示されています。

空白区切り

空白区切りの場合は、許される文字は、半角スペース、改行、タブなど及び、それらの連続が含まれます。XML 文書の場合、 whitespace は、#x20 (space, U+0020), #xD (carriage return, U+000D), #xA (line feed, U+000A), #x9 (tab, U+0009) の四つです。CSS2 では #xC (form feed, U+000C) を加えた五つが空白類文字として定義されています。CSS2.1, CSS3 でも同様です。

本稿で区切り文字として半角スペースというときは、少なくとも、space, tab, line feed の何れか又はそれらの連続が許されます。

プラットフォームと改行文字

キャリッジリターン (CR、復帰) は、タイプライタの印字ヘッドを左端に戻すことです。ラインフィード (LF、改行) は、紙を一行分送ることです。連続メディアの場合、カーソルを左端に戻すことと、一行送ることに該当します。正規表現では、それぞれ \r と \n になります。

OS によって、改行を意味する制御文字は異なっていて、DOS/Windows では CR+LF、UNIX では LF、Mac OS 9 以前では CR、Mac OS X (BSD UNIX) では LF となっています。

文字コード間の変換テーブル
	Unicode	ASCII	EBCDIC
SPACE	0020	20	40
HT	0009	09	05
CR	000D	0D	0D
LF	000A	0A	25
CRLF	000D,000A	0D,0A	0D,25
FF	000C	0C	0C

`inherit`

inherit は親要素から値を継承することを明示する値です。

CSS は Cascading Style Sheet の省略であり、文書の木構造のノードの親子関係において、指定したスタイルが親から子へと継承されます。Cascading は「滝状の」という意味で、親から子へと値が継承されていくことを意味しています。継承されることを inherited と言い、継承可能性を inheritance と呼びます。

殆どのプロパティは、何も指定しなくとも、親から子へと指定した値が継承されますが、中には、デフォルトでは継承されないプロパティも存在します。

例えば、背景画像の URL を指定する 'background-image' は子要素へ指定が継承されません。親要素の指定を明示的に継承するように指定するためには、プロパティの値に inherit を指定します。

table { background-image: inherit }

'background-image' は子要素へ継承されませんが、その下敷きになる色を指定する 'background-color' の初期値が transparent （透明）なので、親要素の背景画像が透過して見えるようになっています。子要素で改めて背景画像を始めたい場合にだけ inherit を指定すれば良いようになっています。

他のプロパティでも、明示的に inherit を指定しなくとも、直感的には継承されているようにレンダリングされるはずです。明示的に親要素の値を継承したいときにだけ、inherit が指定されることになります。

10 進数

幾つかのプロパティでは、値に 10 進数の整数 (<integer>) 又は小数 (<number>) をとります。これらが値として定義されている場合は、そのとりうる範囲に制限がないかどうか注意してください。プロパティの中には、最小値と最大値が指定されているものがあります。また、あるものは負の値が不正となるものがあります。

<number> の例として、行の高さを指定する 'line-height' が挙げられます。フォントサイズに対する比率を 10 進数で与えるために、<number> を値に持ち得ますが、負の数は不正だとされます。

<integer> の例としては、描画面に対する垂直方向のレイヤーの順位を指定する 'z-index' が挙げられます。ボックス間で平面的に重なり合う場合、何れのボックスを上に表示するかを制御するためのスタック階層を整数で与えるために、<integer> を値に持ちえます。このプロパティでは、現在の局所スタックレベル（'z-index: 0'）よりも低い値を指定するために、負の値が許されます。

`<identifier>`

HTML では、文書中の一意の識別子として、id 属性を要素に与えることができます。id 属性の値は a 要素の href 属性の値として参照可能です。

英数文字 [A-Za-z0-9] と、ISO10646 文字の "U+00A1" 以上のコードポイント及び、~~プラス／~~ハイフン／アンダースコア(~~+,~~ - , _ )を含むことが許されます。

ただし、数字で始めることはできません。ハイフンで開始することは、プロパティ、値、単位、擬似クラス、擬似要素、@規則でだけ許されます。その他の、要素名、class 属性の値、id 属性の値などでは許されません。

識別子は、エスケープ文字 (\) と、ISO1064 文字の数値表現を含むことが許されます。例えば、 "B&W?" を識別子とする場合は、"B\&W\?" か "B\26 W\3F" と記述することができます。

CSS におけるエスケープ文字は、バックスラッシュ (\) を意味します（日本語のフォントでは、同じコードポイントに円記号の字形を割り振っています）。エスケープ文字の規則は、次の三つになります。

エスケープ文字の直後に改行が来る場合は、エスケープ文字は無視されます。
エスケープ文字の直後に来る文字は、CSS の枠組みの中での特殊文字であっても、通常の文字と同じように扱われます。例えば、"\"" というエスケープシーケンス（エスケープ文字と他の文字の連続）がある場合、二重引用符は CSS の引用符としては扱われません。"\{" としても同様で、CSS のブロックの開始文字とは解釈されません。
エスケープ文字に最大 6 個の 16 進数の文字 (0..9A..F: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) が続く場合、ISO10646 のコードポイントと解釈されます。6 個未満の文字を指定する場合は、半角スペースで後続の文字と区別します。例えば、"\26 B" であれば &B と等価になり、6 個の文字を "\00026B" のように連ねるのであればスペースは不要です。

次に、必ずしも全ての環境で単純なキーボード入力で使えるわけではない特殊な文字の ISO10646 のコードポイントを示します。

一部の特殊な文字のISO10646 コードポイント
表示	番号実体参照	ISO10646コード（16進）	説明
"	`"`	0022	QUOTATION MARK [the ASCII double quotation mark]
'	`'`	0027	APOSTROPHE [the ASCII single quotation mark]
‹	`‹`	2039	SINGLE LEFT-POINTING ANGLE QUOTATION MARK
›	`›`	203A	SINGLE RIGHT-POINTING ANGLE QUOTATION MARK
«	`«`	00AB	LEFT-POINTING DOUBLE ANGLE QUOTATION MARK
»	`»`	00BB	RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
‘	`‘`	2018	LEFT SINGLE QUOTATION MARK [single high-6]
’	`’`	2019	RIGHT SINGLE QUOTATION MARK [single high-9]
“	`“`	201C	LEFT DOUBLE QUOTATION MARK [double high-6]
”	`”`	201D	RIGHT DOUBLE QUOTATION MARK [double high-9]
„	`„`	201E	DOUBLE LOW-9 QUOTATION MARK [double low-9]

`<string>`

プロパティの値に文字列が許される場合は、<string> として定義されています。文字列は、一重引用付 (', ISO10646 x0027) か二重引用符 (", ISO10646 x0022) で括ることになっています。

引用符を文字列に含める場合は、エスケープ文字で無害化する必要があります。一重引用符を文字列に含める場合は "\'" 又は "\27 " 又は "\000027" とします。二重引用符の場合は、"\"" 又は "\22 " 又は "\000022" とします。

文字列中に改行を含む場合は、改行位置に "\a" と明記します。例えば、'content' の値に、改行を含む文字列を与えたい場合は、次のように指定することで、HTML の br と等価に扱われるはずです。

h1:before {
    display: block;
    text-align: center;
    white-space: pre;
    content: "chapter\A hoofdstuk\A chapitre\A 章"
}

表示概念図

 chapter   
hoofdstuk  
 chapitre  
   章      h1要素の内容

CSS の記述の中で、文字列の途中で改行する必要があれば、改行の直前にエスケープ文字を明記することで、エスケープ文字と改行が無視されて解釈されます。次の二つは CSS にとって等価となります。

/* 文字列中に改行を含まない */
a[title="a not so very long title"] {/*...*/}

/* s と o の間で改行して書かなければならない場合は、
   改行直前に \ を明記してエスケープする */
a[title="a not s\
o very long title"] {/*...*/}

`<color>`

プロパティの値で、<color> となっているのは、色の指定です。色名のキーワードか、RGB 値を数字で指定します。

色名キーワード

24 ビットの 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) が追加されて 17 色になっています。

strong { color: red }

RGB の数値指定

色を表現するのに、キーワードのほかに、数値による RGB 値の指定もできます。光の三原色 Red, Green, Blue の各々の強度を 256 段階の数値で指定します（16,777,216色）。各色当たり 256 階調で表現する色を 24ビットカラー（32ビットカラー、トゥルーカラー）と呼びます。赤／青を 32 階調、緑を 64 階調で表現する色を 16ビットカラー（ハイカラー）と呼びます。

指定方法は次の三種類になります。古い HTML でも使われていた 16 進数表現が一般的で、通常は各色当たり一桁の 16 進数（4,096色）で十分です。

16 進数値...各色毎に強さを二桁の 16 進数で表現します： #ffa500, #fa0
10 進数値...各色毎に強さを 0～255 の 10 進数で表現します： rgb(255,165,0)
パーセント値...各色毎に強さをパーセント値で表現します： rgb(100%,64.4%,0%)

16 進数で表す場合は、# のあとに、三桁もしくは六桁で表現します。三桁 #rgb の場合は、各値を二度繰り返すことで六桁 #rrggbb に解釈されます。#fff と #ffffff は等価です。

h1 { color: #f0c }	/* #ff00cc と等価 */
strong { color: #ff0000 }

色の強度(1)：0～7
	0	1	2	3	4	5	6	7
R	`#000`	`#100`	`#200`	`#300`	`#400`	`#500`	`#600`	`#700`
G	`#000`	`#010`	`#020`	`#030`	`#040`	`#050`	`#060`	`#070`
B	`#000`	`#001`	`#002`	`#003`	`#004`	`#005`	`#006`	`#007`

色の強度(2)：8～f
	8	9	a	b	c	d	e	f
R	`#800`	`#900`	`#a00`	`#b00`	`#c00`	`#d00`	`#e00`	`#f00`
G	`#080`	`#090`	`#0a0`	`#0b0`	`#0c0`	`#0d0`	`#0e0`	`#0f0`
B	`#008`	`#009`	`#00a`	`#00b`	`#00c`	`#00d`	`#00e`	`#00f`

10 進数で表す場合は、"rgb(" と ")" の間に、カンマ区切りの十進数かパーセントで表現します。十進数の場合は 0～255 の範囲で、その範囲外の指定は 0 か 255 に切り取られます。300 であれば 255 と等価です。

パーセント指定は 0%～100% の範囲で、その範囲外の指定は 0% か 100% に切り取られます。-50% であれば 0% と等価です。

h1 { color: rgb(255,0,80) } 
strong { color: rgb(100%,0%,31.3%) }

各指定方法の比較：

色の 10 進数と 16 進数と比率表現
	16進数	10進数	%
範囲	`00-ff`	`0-255`	`0%-100%`
形式	`#rrggbb`	`rgb(rrr,ggg,bbb)`	`rgb(rr%,gg%,bb%)`
例	`#000000`	`rgb(0,0,0)`	`rgb(0%,0%,0%)`
	`#003300`	`rgb(0,51,0)`	`rgb(0%,19.9%,0%)`
	`#ffffff`	`rgb(255,255,255)`	`rgb(100%,100%,100%)`

ウェブセーフカラー：

websafecolor
	値						形式
16進数	00	33	66	99	cc	ff	`#rrggbb`
10進数	0	51	102	153	204	255	`rgb(rrr,ggg,bbb)`
%	0%	20%	40%	60%	80%	100%	`rgb(rr%,gg%,bb%)`

カラーテーブル：

216 色: 6×6×6 色
512 色: 8×8×8 色

システムカラー

ユーザの利用環境のシステム色を利用することができます。利用者の GUI ごとに異なる色で表示されるので、背景色と前景色（文字色）のバランスに注意する必要があります。システムカラーを使うときは、周囲の色も、システムカラーで指定することが安全でしょう。利用者が馴染んでいる色で表示されることがメリットです。

システムカラー
表示例	システムカラー	備考
	`ActiveBorder`	アクティブなウィンドウの境界線。
	`ActiveCaption`	アクティブなウィンドウのキャプション。
	`AppWorkspace`	アプリケーション内のウィンドウの背景色。
	`Background`	デスクトップの背景。
	`ButtonFace`	三次元表示要素の表面。
	`ButtonHighlight`	三次元表示要素の暗影。
	`ButtonShadow`	三次元表示要素の影。
	`ButtonText`	ボタン上のテキスト。
	`CaptionText`	標題、サイズボックス、スクロールバーの矢印ボックスのテキスト。
	`GrayText`	グレー(使用不可)テキスト。
	`Highlight`	選択される項目。
	`HighlightText`	選択される項目のテキスト。
	`InactiveBorder`	非アクティブウィンドウの境界。
	`InactiveCaption`	非アクティブウィンドウの標題。
	`InactiveCaptionText`	非アクティブキャプションのテキストの色。
	`InfoBackground`	ツールの助言情報の背景色。
	`InfoText`	ツールの助言情報のテキスト色。
	`Menu`	メニューの背景。
	`MenuText`	メニューのテキスト。
	`Scrollbar`	スクロールバーのグレー領域。
	`ThreeDDarkShadow`	三次元表示要素の暗影。
	`ThreeDFace`	三次元表示要素の表面。
	`ThreeDHighlight`	三次元表示要素の強調色。
	`ThreeDLightShadow`	三次元表示要素の光源色。
	`ThreeDShadow`	三次元表示要素の影。
	`Window`	ウィンドウの背景。
	`WindowFrame`	ウィンドウのフレーム。
	`WindowText`	ウィンドウ内のテキスト。

`<length>`

プロパティの値で、<length> となっているものは、符号と単位付きの数字で、幅や高さを指定します。符号は、デフォルトではプラスです。単位は、デフォルト値がありませんので、指定が必須です。ただし、数字が 0 の場合の単位は任意です。

相対値指定の単位

em: フォントの大きさ 'font-size' を 1 とする。
ex: 小文字の高さ 'x-height' を 1 とする。
px: ピクセル。解像度に依存してサイズが決まる。

絶対値指定の単位

in: インチ。2.54 cm。
cm: センチメートル。
mm: ミリメートル。
pt: ポイント。1/72 インチ。
pc: パイカ。12 ポイント。

相対値指定

em （エム）単位は、そこで使われている 'font-size' の値と等価です。'font-size' 自身の値に使われるときは、親要素の 'font-size' の指定値と等しくなります。この単位は、組版の業界では、"quad-width" と呼ばれるそうです。

px （ピクセル）単位は、デバイスの解像度に依存した相対指定です。モニターであれば、解像度を高くすると、1 インチあたりに表示できるピクセル数 (ppi, pixel per inch) が大きくなるので、px 単位の指定値の物理的なサイズは小さくなります。プリンタであれば、1 インチあたりのドット数である dpi (dot per inch) の高いプリンタで出力した方が、小さくなります。

ピクセル数で指定する場合、古い Mchintosh の 72dpi でも、 Windows の 96dpi でも、ピクセルの個数としては共通する指定なので、同じモニタ解像度であれば（1ピクセルの大きさが同じであれば）、同じ物理サイズで表示されます。

CSS2 の仕様書では、デバイスの解像度と閲覧距離に対して、同じ視野角になるようにと推奨されていますが、実装しているユーザエージェントはないと思われます。

a reading distance of 71 cm (28 inch) results in a px of 0.28 mm, while a reading distance of 3.5 m (12 feet) requires a px of 1.4 mm [D]

an area of 1px by 1px is covered by a single dot in a low-resolution device (a computer screen), while the same area is covered by 16 dots in a higher resolution device (such as a 400 dpi laser printer)

ウェブページでは相対値指定だけ使うことが原則です。

テキストベースの一般的なページの場合、フォントのサイズなどのアクセシビリティに直結するものは、ブラウザで変更しやすい em 単位が良いでしょう。

改行位置に至るまで、デザインをきめ細かく作りこみたい場合は、px 単位が使いやすいはずです。フォントの大きさに px 単位を使う場合は、ブラウザの設定でフォントの大きさが変更できなくなるので、読みやすい文字の大きさを、十分考慮して指定する必要があります。

絶対値指定

絶対指定の単位は、出力メディアが物理的に特定できる場合にのみ指定すべきだとされています。in 指定の場合は、96dpi のモニタであれば 96px と同じ物理サイズになります。逆に言うと、同じモニタ解像度（1ピクセルの大きさ）でも、OS 解像度が 72dpi と 96dpi の場合は、in 指定に対する物理的サイズが異なります。

紙媒体でのデザイン同様に、ウェブページでもフォントの大きさにポイント (pt) で指定している例を見かけることがありますが、よくありません。解像度や OS によって、物理的なサイズが変わるため、全体のデザインの崩壊を招きます。また、ブラウザでフォントのサイズを変更できないことも、ユニバーサルデザイン（アクセシビリティ）の観点で好ましくありません。

`<percentage>`

プロパティの値で <percentage> となっているものは、符号と % 付きの数字です。各プロパティごとに、100% として参照する元になる値が定義されています。

例えば、プロパティ 'margin' や 'padding' の値であれば、親要素のボックスが設定する包含ブロック（親要素の内容領域）の幅を 100% として計算します。

`<uri>`

プロパティの値で <uri> となっているものは、"url(" で始まる、参照するリソースを指し示す文字列です。

URI (Uniform Resource Identifier) は、古くからある URL (Uniform Resource Locator) と、新しく提唱されている URN (Uniform Resource Name) をあわせた概念で、URN が現実的に利用可能ではないので、URL とほぼ等価です。

URL を引用符（' または "）で括ることができますが、任意です。括ると認識しないブラウザがあるので、括らない方が良いでしょう。

絶対 URL と相対 URL の両方が使われます。相対 URL を解決するベース URL は、当該スタイルシートが存在する場所になります。CSS が適用される文書の場所ではありません。

/* 当該スタイルシートファイルが記述されたファイルが存在する場所の、
   一つ上のディレクトリに存在するファイル "cover.png" を指定 */
body { background: black url(../cover.png) }