基本データ型

整数値 <integer>

[0-9]の数字を1つ以上並べた形式です(10進数)。

実数値 <number>

整数値と同じか、0個以上の数字の後に小数点を表す[.]と1つ以上の数字が続く形式です(10進数)。

長さ <length>

長さの値は縦横の大きさをあらわします。長さをあらわすには、実数値に単位を付けて指定します。単位には「相対単位」と「絶対単位」の2つがあります。

単位は、数値が0の場合には省略できます。

相対単位

em	その要素の文字サイズ「font-size」を1とする単位
ex	その要素の文字xのサイズ「x-height」を1とする単位
px	1ピクセルを1とする単位

ルート要素(html要素)にemやexを用いた場合、プロパティの初期値を参照します。

絶対単位

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

%値 <percentage>

パーセント値を利用して長さをあらわすには、実数値に[%]を付けてほかの値に対する割合を指定します。どの値に対する割合となるかはプロパティによって異なりますので、各プロパティを参照してください。ルート要素(html要素)に%値を用いた場合、プロパティの初期値を参照します。

パーセント値は常にほかの値に対する相対値となります。したがって参照元となる値が明確に指定されている必要があります。

子要素は一般に親要素の算出値を継承するので、次の例において、p要素の子要素が継承するline-heightの値は%値(120%)でなく算出値の12ptになります。


p { font-size: 10pt }

p { line-height: 120% } /* 120% of 'font-size' */

URI <uri>

CSSで、URIを示す場合には「url(URI)」という関数を使用します。スタイルシートで示す相対URIは、「url(URI)」の記述があるスタイルシートからの相対URIとなります。ブラウザによってはスタイルシートを呼び出したHTML文書からの相対URIとなるバグもあるようなので、注意が必要です。

スタイルシートにおける基準URIは、ソース文書のURIではなく、スタイルシートのURIです。

カッコ内に記述するURIの前後に引用符["][']を付けて記述することもできます。以下の3つは同じ意味を持ちます。「url(URI)」関数のURIの前後(カッコのすぐ内側)には自由に空白文字を入れることができます。


p {background: url(../img/foo.gif)}     /* 引用符なし */

p {background: url("../img/foo.gif")}   /* 二重引用符 */

p {background: url('../img/foo.gif')}   /* 単引用符 */

URIの中に出現する各種括弧、コンマ[,]、空白文字、一重引用符[']、二重引用符["]はバックスラッシュ[\]でエスケープする必要があります。URIの種類によっては、前記の文字をURI特有の方法でエスケープすることもできます(「(」を%28で、「)」を%29で表すなど)。

URL(Uniform Resource Locator)とは、Web上でのリソースのありかを示す1つの方式です。また、リソースを識別するための新しい拡張方式にURN(Uniform Resource Name)があります。この両者を合わせてURI(Uniform Resource Identifier)と呼びます。

カウンタ <counter>

カウンタは内容モデル(要素内容)に自動的に番号を付けたい場合に使用します。カウンタを操作するには下記の3つのプロパティを使用します。

counter-increment プロパティ C2- ie8-

カウンタを進めます。値には識別子(カウンタ名)を指定します。

counter-reset プロパティ C2- ie8-

カウンタをリセットします。値には、識別子(カウンタ名)を指定します。

content プロパティ C2- ie8- N6-

「:before」疑似要素または「:after」疑似要素に対して指定しカウンタを表示させます。「counter()」関数や「counters()」関数を値として指定します。

要素に単に番号を振る場合には「counter()」関数を用います。要素に「1.1.1」、「1.1.2」のような番号を付ける場合には「counters()」関数を用います。

「counter()」関数は、以下のような形式で指定します。表示形式のデフォルトは、10進数字をあらわす「decimal」です。


counter(識別子)

counter(識別子, 表示形式)


OL { counter-reset: item }

LI { display: block }

LI:before { content: counter(item) ". "; counter-increment: item }



このように指定されたカウンタは以下のように表示されます。



1. content 1

  1. foundation #1

  2. foundation #2

2. content 2

「counters()」関数は、以下のような形式で指定します。文字列には区切り文字を指定します。表示形式のデフォルトは、10進数字をあらわす「decimal」です。「表示形式」には、list-style-typeプロパティ(C1- ie4- N4-)で指定できる値(<'list-style-type'>)を指定することができます。


counters(識別子, 文字列)

counters(識別子, 文字列, 表示形式)


OL { counter-reset: item }

LI { display: block }

LI:before { content: counters(item, "."); counter-increment: item }



このように指定されたカウンタは以下のように表示されます。



1 content 1

  1.1 foundation #1

  1.2 foundation #2

2 content 2

counter-incrementプロパティ(C2- ie8-)で参照したカウンタが、counter-resetプロパティ(C2- ie8-)の作用範囲にも当てはまらないカウンタは、ルート要素(*1)で「0」に初期化されます。

*1 CSS2におけるルート要素とは、親要素を持たない要素のことをあらわしますが、ここでいうルート要素とは、「counter-reset」の作用範囲外の要素だと考えられます。

関連項目: 自動番号振りカウンタサンプル詳細

色 <color>

色は、キーワードかRGB値のいずれかで指定します。　

WebSafeColors　

ColorNames

RGB値で指定する場合は、下記の4つの指定方法があります。以下の文字色(colorプロパティ)の指定はすべて同じ意味を持ちます。


em { color: #f00 }              /* #rgb */

em { color: #ff0000 }           /* #rrggbb */

em { color: rgb(255,0,0) }      /* 10進数の整数値 0 - 255 */

em { color: rgb(100%, 0%, 0%) } /* 小数点以下も許可されるパーセント値 0.0% - 100.0% */



em { color: red }               /* キーワード */

#f00 あるいは #ff0000

16進数のRGB値は、シャープ[#]に続けて3桁あるいは6桁の16進数値が続く形式になります。3桁のRGB値(#rgb)は、6桁のRGB値(#rrggbb)に変換されます。

rgb(255,0,0) あるいは rgb(100%,0%,0%)

「rgb()」関数によるRGB値は、カッコ内にコンマ[,]で区切った3つの数値(10進数の整数値または小数点以下も許可されるパーセント値)を並べる形式になります。整数値の255が、パーセント値の100%、16進数値のffに対応しています。各数値の前後には自由に空白文字を入れることができます。

色をキーワードで指定する場合には、CSS2の16色のほかに、ユーザのシステムのGUI環境の色を指定することができます。該当する色が存在しない場合には、近い色、あるいはデフォルトの色が適用されます。

CSS2の16色

black=	"#000000"	green=	"#008000"
silver=	"#c0c0c0"	lime=	"#00ff00"
gray=	"#808080"	olive=	"#808000"
white=	"#ffffff"	yeliow=	"#ffff00"
maroon=	"#800000"	navy=	"#000080"
red=	"#ff0000"	blue=	"#0000ff"
purple=	"#800080"	teal=	"#008080"
fuchsia=	"#ff00ff"	aqua=	"#00ffff"

ウェブセーフカラーとカラーネーム

異なったOSや256色モードなどの制限されたカラーモードにおいても同じ色で表現することができるカラーをウェブセーフカラーといいます。また、キーワードとして指定することができるカラーネームには、Netscapeによって定義されIEでもサポートされているカラーネームがあります。

システムカラー

テキストや背景に対して決まった色を指定する以外にも、ユーザのPC設定環境の色を指定することができます。システムカラーの値は、大文字小文字を区別しません。

	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	ウィンドウの文字色

色の指定方法の対応状況

角度 <angle>

角度は、音声スタイルシートで使用されます。角度の値をあらわすには、実数値に続けて角度をあらわす単位を指定します。

deg	度
grad	グラッド
rad	ラジアン

時間 <time>

時間は、音声スタイルシートで使用されます。時間の値をあらわすには、実数値に続けて時間をあらわす単位を指定します。負の値を指定することはできません。

ms	ミリ秒
s	秒

周波数 <frequency>

周波数は、音声スタイルシートで使用されます。周波数の値をあらわすには、実数値に続けて周波数をあらわす単位を指定します。負の値を指定することはできません。

Hz	ヘルツ
kHz	キロヘルツ

文字列 <string>

文字列は、単引用符[']あるいは二重引用符["]で囲んで示すことができます。単引用符内に単引用符を記述したり、二重引用符の内に二重引用符を記述することはできません。そうしたい場合は、単引用符の際は[\']あるいは[\27]と記述し、二重引用符の際は[\"]あるいは[\22]と記述します。


"this is a 'string'"

"this is a \"string\""

'this is a "string"'

'this is a \'string\''

文字列の中に改行を直接入れることはできません。改行を入れる場合は、[\A]を使用します。また、体裁上文字列を複数行にわたって記述したい場合などには改行文字自体をバックスラッシュ[\]でエスケープします。以下のセレクタは同じ意味を持ちます。


a[title="a not s\

o very long title"] {...}


a[title="a not so very long title"] {...}

16進数の後に紛らわしい数字や文字が続く場合、コードの終端を明確にする必要があります。それには2つの方法があり、終端を半角スペースで示す[\22 A]("A)あるいは、6桁に満たない16進数でも上位桁を補う[\000022A]("A)のように指定します。

16進数の後では空白文字が1つだけ無視されるので、数値エスケープ文字の後に本当のスペースを挿入するには、スペース自体をエスケープするか、半角スペースを2つ続けなければならないことに注意しなければなりません。

文字と活字ケース詳細