前へ   次へ   目次   プロパティ一覧   索引  

4 構文と基本データ型

目次

4.1 構文

このセクションでは、あらゆるCSSレベル（CSS 2.2を含む）に共通する文法（および前方互換性のあるパース規則）について説明します。将来のCSSのアップデートもこの基本構文に準拠しますが、追加の構文制約が加えられる場合があります。

これらの説明は規範的です。また、付録Gで示される規範的な文法規則によって補完されます。

本仕様書では、「直前」や「直後」という表現は、間に空白やコメントが一切入らないことを意味します。

4.1.1 トークン化

CSSのすべてのレベル（レベル1、レベル2、将来のレベル）は、同じ基本構文を使用します。これにより、ユーザーエージェントは作成時点で存在しなかったCSSのレベルで記述されたスタイルシートもパース（完全には理解できなくても）できます。デザイナーはこの機能を利用して、古いユーザーエージェントでも動作し、かつ最新CSSの機能を活用するスタイルシートを作成できます。

字句レベルでは、CSSスタイルシートはトークンの並びから構成されます。CSSのトークン一覧は以下の通りです。定義にはLex形式の正規表現を使用しています。8進コードはISO 10646([ISO10646])を参照します。Lexと同様、複数一致した場合は最長一致がトークンになります。

トークン 定義
IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
BAD_STRING {badstring}
BAD_URI {baduri}
BAD_COMMENT {badcomment}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI {U}{R}{L}\({w}{string}{w}\)|
{U}{R}{L}\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE u\+[?]{1,6}|
u\+[0-9a-f]{1}[?]{0,5}|
u\+[0-9a-f]{2}[?]{0,4}|
u\+[0-9a-f]{3}[?]{0,3}|
u\+[0-9a-f]{4}[?]{0,2}|
u\+[0-9a-f]{5}[?]{0,1}|
u\+[0-9a-f]{6}|
u\+[0-9a-f]{1,6}-[0-9a-f]{1,6}
CDO <!--
CDC -->
: :
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/*][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM 上記の規則に一致しないその他すべての文字。ただし、シングルクォートまたはダブルクォートは除く

上記の中括弧（{}）で示したマクロの定義は以下の通りです。

マクロ 定義
ident [-]?{nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape {unicode}|\\[^\n\r\f0-9a-f]
nmchar [_a-z0-9-]|{nonascii}|{escape}
num [+-]?([0-9]+|[0-9]*\.[0-9]+)(e[+-]?[0-9]+)?
string {string1}|{string2}
string1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2 \'([^\n\r\f\\']|\\{nl}|{escape})*\'
badstring {badstring1}|{badstring2}
badstring1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\\?
badstring2 \'([^\n\r\f\\']|\\{nl}|{escape})*\\?
badcomment {badcomment1}|{badcomment2}
badcomment1 \/\*[^*]*\*+([^/*][^*]*\*+)*
badcomment2 \/\*[^*]*(\*+[^/*][^*]*)*
baduri {baduri1}|{baduri2}|{baduri3}
baduri1 {U}{R}{L}\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}
baduri2 {U}{R}{L}\({w}{string}{w}
baduri3 {U}{R}{L}\({w}{badstring}
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
L l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
R r|\\0{0,4}(52|72)(\r\n|[ \t\r\n\f])?|\\r
U u|\\0{0,4}(55|75)(\r\n|[ \t\r\n\f])?|\\u

例：

例えば、最長一致の規則により"red-->"は、IDENT "red--"とDELIM ">"に分割され、IDENTの後にCDCとはなりません。

以下はCSSの基本構文です。続くセクションでその使い方を説明します。付録Gでは、よりCSSレベル2言語に近い制限された文法を記載しています。付録Gの文法ではパースできない部分は、パースエラー処理規則に従い無視される対象となります。 

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector? '{' S* declaration-list '}' S*;
declaration-list: declaration [ ';' S* declaration-list ]?
              | at-rule declaration-list
              | /* empty */;
selector    : any+;
declaration : property S* ':' S* value;
property    : IDENT;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
              ] S*;
unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;

「unused」生成式はCSSでは使用されず、将来の拡張でも使用されません。これはエラー処理の助けのためだけに含めています。（4.2「パースエラー処理規則」参照）

COMMENTトークンは文法には現れません（可読性のため）が、他のトークンの外側には任意の数だけ出現可能です。（ただし、@charset規則の前や中にコメントがあると@charsetが無効になります）

上記文法のSトークンは空白を表します。空白に含まれるのは「スペース」（U+0020）、「タブ」（U+0009）、「ラインフィード」（U+000A）、「キャリッジリターン」（U+000D）、「フォームフィード」（U+000C）のみです。"em-space"（U+2003）や"全角スペース"（U+3000）のようなその他の空白類文字は空白に含まれません。

トークン化やパースできない入力の意味はCSS 2.2では未定義です。

4.1.2 キーワード

キーワードは識別子の形式を持ちます。キーワードは引用符（"..."または'...'）で囲んではいけません。 

red

これはキーワードですが、 

"red"

はキーワードではありません（これは文字列です）。その他の不正な例： 

width: "auto";
border: "none";
background: "red";

4.1.2.1 ベンダー固有拡張

CSSでは、識別子は'-'（ハイフン）や'_'（アンダースコア）で始めることができます。 プロパティ名やキーワードが-や_で始まる場合、それはベンダー固有拡張用に予約されています。 ベンダー固有拡張は次のいずれかの形式であるべきです： 

'-' + ベンダー識別子 + '-' + 意味のある名前
'_' + ベンダー識別子 + '-' + 意味のある名前

例：

例えば、XYZ組織が表示の東側の境界線の色を指定するプロパティを追加する場合、-xyz-border-east-colorと名付けるでしょう。

他の既知の例：

-moz-box-sizing
-moz-border-radius
-wap-accesskey

先頭のダッシュやアンダースコアは、現行または将来のCSSのプロパティやキーワードで使われることは決してありません。そのため、一般的なCSS実装はこれらのプロパティを認識せず、パースエラー処理規則に従い無視することがあります。ただし、先頭のダッシュやアンダースコアは文法の一部なので、CSS 2.2実装者はベンダー固有拡張をサポートしなくてもCSS準拠のパーサーを必ず使用できます。

著者はベンダー固有拡張の使用を避けるべきです。

4.1.2.2 参考 歴史的注記

このセクションは参考情報です。

執筆時点で、以下のプレフィックスが存在することが知られています：

プレフィックス 組織
-ms-, mso- Microsoft
-moz- Mozilla
-o-, -xv- Opera Software
-atsc- Advanced Television Standards Committee
-wap- WAPフォーラム
-khtml- KDE
-webkit- Apple
prince- YesLogic
-ah- Antenna House
-hp- Hewlett Packard
-ro- Real Objects
-rim- Research In Motion
-tc- TallComponents

4.1.3 文字と大文字小文字

以下の規則は常に成立します：

4.1.4 ステートメント

CSSスタイルシート（CSSの任意のレベル）は、ステートメントのリストで構成されます（文法参照）。ステートメントには2種類あります：at規則と規則セットです。ステートメントの周囲には空白があってもかまいません。

4.1.5 At規則

At規則はatキーワード（'@'文字＋直後に識別子）で始まります（例：'@import', '@page'など）。

At規則は、次のセミコロン（;）または次のブロック（どちらか先に現れる方）までが全体となります。

CSS 2.2のユーザーエージェントは、ブロック内や、@charset規則や@import規則以外の無視されないステートメントの後に現れる'@import'規則は無視しなければなりません。

例えば、CSS 2.2パーサーが次のスタイルシートを検出したとします： 

@import "subs.css";
h1 { color: blue }
@import "list.css";

2つ目の'@import'はCSS 2.2では不正です。CSS 2.2パーサーは、規則全体を無視し、スタイルシートは実質的に次のようになります： 

@import "subs.css";
h1 { color: blue }

次の例では、2つ目の'@import'規則は'@media' ブロック内にあるため無効です。 

@import "subs.css";
@media print {
  @import "print-main.css";
  body { font-size: 10pt }
}
h1 {color: blue }

この場合、'print'メディア用のスタイルシートだけをインポートしたいなら、@import規則のメディア構文を使ってください。例： 

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

4.1.6 ブロック

ブロックは左中括弧（{）で始まり、対応する右中括弧（}）で終わります。その間には任意のトークンが入りますが、丸括弧（()）、角括弧（[]）、中括弧（{}）は必ずペアで現れ、入れ子にできます。シングルクォート（'）とダブルクォート（"）も必ずペアで現れ、その間の文字は文字列としてパースされます。 文字列の定義はトークン化参照。

次はブロックの例です。ダブルクォート内の右中括弧はブロックの開始中括弧と対応しておらず、2つ目のシングルクォートはエスケープされた文字なので最初のシングルクォートと対応しません： 

{ causta: "}" + ({7} * '\'') }

この規則はCSS 2.2としては有効ではありませんが、上記の定義上はブロックです。

4.1.7 規則セット・宣言ブロック・セレクター

規則セット（「規則」とも呼ぶ）は、セレクターの後に宣言ブロックが続きます。

宣言ブロックは左中括弧（{）で始まり、対応する右中括弧（}）で終わります。その間には0個以上の宣言とat規則のリストが入ります。宣言はセミコロン（;）で終わりますが、リストの最後の宣言はセミコロン不要です。

注：CSSレベル2では宣言ブロック内に現れるat規則はありませんが、将来のCSSレベルで定義される可能性があります。

セレクター（セレクターも参照）は、最初の左中括弧（{）の直前までのすべてです。セレクターは必ず宣言ブロックとセットになります。ユーザーエージェントがセレクターをパースできない場合（CSS 2.2として有効でない場合）、そのセレクターと続く宣言ブロック（あれば）を無視しなければなりません。

CSS 2.2ではセレクター中のカンマ（,）に特別な意味がありますが、将来のCSSでカンマに別の意味が付加される可能性があるため、セレクター内にエラーがあればステートメント全体を無視すべきです（CSS 2.2の他部分が妥当でも）。

例えば、「&」はCSS 2.2のセレクターでは有効なトークンではないので、CSS 2.2のユーザーエージェントは2行目全体を無視し、H3の色は赤に設定されません： 

h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }

例：

もう少し複雑な例です。最初の2つの中括弧ペアは文字列内にあり、セレクターの終端にはなりません。これは有効なCSS 2.2規則です。 

p[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 宣言とプロパティ

宣言は空か、プロパティ名＋コロン（:）＋プロパティ値で構成されます。これらの間には空白があってもかまいません。

セレクターの仕組みにより、同じセレクターに対して複数の宣言をセミコロン（;）区切りでまとめることができます。

例：

例えば次の規則：

h1 { font-weight: bold }
h1 { font-size: 12px }
h1 { line-height: 14px }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }

は次のようにまとめられます：

h1 {
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

プロパティ名は識別子です。プロパティ値には任意のトークンが使えます。丸括弧（()）、角括弧（[]）、中括弧（{}）、シングルクォート（'）、ダブルクォート（"）はペアで現れ、文字列以外のセミコロンはエスケープしてください。括弧は入れ子可。クォート内の文字は文字列としてパースされます。

値の構文は各プロパティごとに個別に定義されていますが、いずれも識別子・文字列・数値・長さ・パーセンテージ・URI・色などから成ります。

ユーザーエージェントは、プロパティ名や値が無効な宣言を無視しなければなりません。各CSSプロパティは受け入れる値について独自の構文・意味的制約を持っています。

例えば、CSS 2.2パーサーが次のスタイルシートを検出した場合： 

h1 { color: red; font-style: 12pt }  /* 無効な値: 12pt */
p { color: blue;  font-vendor: any;  /* 無効なプロパティ: font-vendor */
    font-variant: small-caps }
em em { font-style: normal }

1行目の2つ目の宣言は値'12pt'が無効です。2行目の2つ目の宣言は未定義プロパティ'font-vendor'です。CSS 2.2パーサーはこれらの宣言を無視し、実質次のスタイルシートになります： 

h1 { color: red; }
p { color: blue;  font-variant: small-caps }
em em { font-style: normal }

4.1.9 コメント

コメント は"/*"で始まり"*/"で終わります。他のトークンの外側ならどこにでも記述可能で、内容はレンダリングに一切影響しません。コメントの入れ子はできません。

CSSでは、SGMLコメント区切り（"<!--"と"-->"）も文法で定められた特定箇所で許可されていますが、これはCSSコメントの区切りにはなりません。HTMLソース文書（STYLE要素内）にスタイル規則を書く際、HTML 3.2未満のユーザーエージェントからスタイル規則を隠すために使われます。詳細はHTML 4仕様（[HTML4]）参照。

4.2 パースエラー処理規則

不正なスタイルシートの一部はユーザーエージェントが無視しなければならない場合があります。本仕様では、無視は、ユーザーエージェントが不正部分をパースして開始と終了を特定するが、それ以外は存在しなかったものとして扱うことを意味します。 CSS 2.2では、ダッシュやアンダースコアで始まらない識別子を含むプロパティ:値の組み合わせや@キーワードは将来のCSS更新用に予約されており、実装は（将来のCSSで導入されない限り）それらの組み合わせを無視しなければなりません。

将来の拡張性のため、ユーザーエージェントは以下の状況に遭遇した場合、次の規則に従う必要があります：

4.3 値

4.3.1 整数と実数

ある値の型は整数値（<integer>）または実数値（<number>）を持つ場合があります。実数値と整数値は10進数表記のみで指定されます。<integer>は1つ以上の数字"0"から"9"で構成されます。<number>は、<integer>であるか、0個以上の数字に続けてドット（.）と1つ以上の数字が続くものです。整数値および実数値の前に"-"または"+"が付いて符号を示す場合があります。-0は0と等価で、負の数ではありません。

整数または実数値を許可する多くのプロパティは、実際には値を特定の範囲に制限することがあり、その多くは非負値に制限されます。

4.3.2 長さ

長さは距離の測定を指します。

長さ値（この仕様では<length>と表記）の形式は、<number>（小数点の有無にかかわらず）に続けて単位識別子（例：px、emなど）が付くものです。ゼロの長さの場合、単位識別子は省略可能です。

一部のプロパティでは負の長さ値を許可しますが、これはフォーマットモデルを複雑にする場合があり、実装固有の制限がある場合があります。負の長さ値がサポートできない場合、サポート可能な最も近い値に変換されるべきです。

負の長さ値を許可しないプロパティに負の長さ値が設定された場合、その宣言は無視されます。

使用される長さがサポートされない場合、ユーザーエージェントはそれを実際の値に近似する必要があります。

長さ単位には2種類があります：相対単位と絶対単位。 相対長さ単位は、他の長さプロパティに対して相対的な長さを指定します。 スタイルシートで相対単位を使用することで、1つの出力環境から別の環境へのスケーリングが容易になります。

相対単位は以下の通りです：

例：

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */

'em'単位は、使用される要素の'font-size'プロパティの計算値と等しい。ただし、'em'が'font-size'プロパティ自体の値として使用される場合は、親要素のフォントサイズを基準とします。垂直または水平の測定に使用できます。（タイポグラフィの文献ではquad-widthと呼ばれることもあります。）

'ex'単位は、要素の最初に利用可能なフォントによって定義されます。 ただし、'ex'が'font-size'プロパティの値として使用される場合は、親要素の'ex'を基準とします。

'x-height'は、小文字の"x"の高さと等しいことが多いため、このように呼ばれます。ただし、"x"を含まないフォントでも'ex'は定義されています。

フォントのx-heightはさまざまな方法で見つけることができます。一部のフォントにはx-heightの信頼できるメトリックが含まれています。信頼できるフォントメトリックが利用できない場合、ユーザーエージェントは小文字のグリフの高さからx-heightを決定することがあります。1つの可能なヒューリスティックは、小文字の"o"のグリフがベースラインからどれだけ下に伸びているかを調べ、その値をバウンディングボックスの上部から引く方法です。x-heightを決定することが不可能または非実用的な場合は、0.5emの値を使用すべきです。

例：

次の規則： 

h1 { line-height: 1.2em }

これは"h1"要素の行の高さが、その"h1"要素のフォントサイズより20%大きいことを意味します。一方： 

h1 { font-size: 1.2em }

これは"h1"要素のフォントサイズが、"h1"要素が継承するフォントサイズより20%大きいことを意味します。

文書ツリー（例：HTML）ルートで指定された場合、'em'と'ex'はプロパティの初期値を基準とします。

子要素は、親要素に指定された相対値を継承しません。計算値を継承します。

例：

次の規則の場合、"h1"要素の'text-indent'プロパティの計算値は36pxであり、"h1"が"body"要素の子である場合でも45pxにはなりません。 

body {
  font-size: 12px;
  text-indent: 3em;  /* つまり、36px */
}
h1 { font-size: 15px }

絶対長さ 単位は互いに固定された関係を持ちます。 これは、出力環境が既知の場合に主に役立ちます。 絶対単位には物理単位（in、cm、mm、pt、pc）およびpx単位が含まれます：

CSSデバイスでは、これらの寸法は次のいずれかによって固定されます：(i)物理単位をその物理測定に関連付ける、または(ii)ピクセル単位を参照ピクセルに関連付ける。 印刷媒体や同様の高解像度デバイスの場合、アンカー単位はインチ、センチメートルなどの標準的な物理単位であるべきです。 低解像度デバイスや、異常な視距離を持つデバイスの場合、アンカー単位はピクセル単位であることが推奨されます。 そのようなデバイスでは、ピクセル単位が参照ピクセルに最も近い整数のデバイスピクセルを指すことが推奨されます。

注意：アンカー単位がピクセル単位の場合、物理単位がその物理測定と一致しない可能性があります。 逆に、アンカー単位が物理単位の場合、ピクセル単位が整数のデバイスピクセルにマップされない可能性があります。

注意：このピクセル単位と物理単位の定義は、以前のCSSのバージョンとは異なります。 特に、以前のCSSバージョンでは、ピクセル単位と物理単位は固定比率で関連付けられていませんでした。 物理単位は常にその物理測定に結び付けられ、ピクセル単位は参照ピクセルに最も近い値に変化しました。 （この変更は、96dpiの仮定に依存する既存のコンテンツが多すぎ、その仮定を壊すとコンテンツが壊れるために行われました。）

参照ピクセルは、 96dpiのピクセル密度を持つデバイスで、読者から腕の長さの距離にある1ピクセルの視覚的角度を指します。 標準的な腕の長さ28インチの場合、視覚的角度は約0.0213度です。 腕の長さで読む場合、1pxは約0.26mm（1/96インチ）に相当します。

下の画像は、視距離が参照ピクセルのサイズに及ぼす影響を示しています： 71cm（28インチ）の読書距離では参照ピクセルは0.26mm、 一方3.5m（12フィート）の読書距離では参照ピクセルは1.3mmになります。

視距離が増加するとピクセルが大きくなる必要があることを示す   [D]

次の画像は、デバイスの解像度がピクセル単位に及ぼす影響を示しています： 低解像度デバイス（例：一般的なコンピュータディスプレイ）では1px x 1pxのエリアが1つのドットで覆われますが、 高解像度デバイス（例：プリンタ）では同じエリアが16個のドットで覆われます。

高解像度デバイスでは、1px x 1pxエリアを覆うのにより多くのデバイスピクセル（ドット）が必要であることを示す   [D]

例：

h1 { margin: 0.5in }      /* インチ */
h2 { line-height: 3cm }   /* センチメートル */
h3 { word-spacing: 4mm }  /* ミリメートル */
h4 { font-size: 12pt }    /* ポイント */
h4 { font-size: 1pc }     /* パイカ */
p  { font-size: 12px }    /* px */

4.3.3 パーセンテージ

パーセンテージ値（この仕様では<percentage>と表記）の形式は、 <number>に続けて'%'が付くものです。

パーセンテージ値は常に他の値に対して相対的な値を示します。例えば、長さなどです。 パーセンテージを許可する各プロパティは、パーセンテージが参照する値も定義します。 その値は、同じ要素の別のプロパティ、先祖要素のプロパティ、または整形コンテキストの値（例：包含ブロックの幅）である場合があります。 ルート要素rootのプロパティにパーセンテージ値が設定されており、 そのパーセンテージがあるプロパティの継承値を参照すると定義されている場合、 結果の値はそのプロパティの初期値にパーセンテージを掛けた値となります。

例：

子要素は一般的に親要素の計算値を継承するため、 以下の例では、P要素の子要素は'line-height'の値として12pxを継承し、パーセンテージ値（120%）は継承しません： 

p { font-size: 10px }
p { line-height: 120% }  /* 'font-size' の120% */

4.3.4 URLとURI

URI値（Uniform Resource Identifiers、[RFC3986]参照、URLやURNなどを含む）は、この仕様では<uri>と表記されます。 プロパティ値でURIを示すために使用される機能的な表記は"url()"です。例：

例：

body { background: url("http://www.example.com/pinkish.png") }

URI値の形式は、'url('に続けてオプションの空白、 オプションのシングルクォート（'）またはダブルクォート（"）、 その後にURI自体、続けてオプションのシングルクォート（'）またはダブルクォート（"）、 さらにオプションの空白、最後に')'で終わります。2つのクォート文字は同じでなければなりません。

例：

クォートなしの例： 

li { list-style: url(http://www.example.com/redball.png) disc }

クォートされていないURIに含まれる括弧、空白文字、シングルクォート（'）、ダブルクォート（"）などの文字は、 バックスラッシュでエスケープする必要があります。結果として得られるURI値がURIトークンになるようにします：'\(', '\)'。

URIの種類によっては、上記の文字をURIエスケープ（"(" = %28, ")" = %29など）として記述することも可能です。 詳細は[RFC3986]を参照してください。

注：COMMENTトークンは他のトークン内に出現できません。 したがって、"url(/*x*/pic.png)"はURI"/*x*/pic.png"を示し、"pic.png"ではありません。

モジュール化されたスタイルシートを作成し、リソースの絶対位置に依存しないようにするために、著者は相対URIを使用できます。 相対URI（[RFC3986]で定義）は、ベースURIを使用して完全なURIに解決されます。 RFC 3986のセクション5は、このプロセスの規範的なアルゴリズムを定義しています。 CSSスタイルシートの場合、ベースURIはソース文書ではなくスタイルシートのURIです。

例：

例えば、次の規則があるとします：

body { background: url("yellow") }

この規則が次のURIで指定されたスタイルシートに含まれている場合：

http://www.example.org/style/basic.css

ソース文書のBODYの背景は、次のURIで指定されたリソースが示す画像でタイル状に敷き詰められます： 

http://www.example.org/style/yellow

ユーザーエージェントは、無効なURIや、利用できないまたは適用できないリソースを指定するURIをどのように処理するかが異なる場合があります。

4.3.5 カウンター

カウンター は大文字小文字を区別する識別子で指定されます（'counter-increment'および 'counter-reset'プロパティを参照）。 カウンターの値を参照するには、 'counter(<identifier>)' または 'counter(<identifier>, <'list-style-type'>)' という表記を使用します。トークン間には空白を入れることができます。 デフォルトのスタイルは 'decimal' です。

同じ名前のネストされたカウンターのシーケンスを参照するには、 'counters(<identifier>, <string>)' または 'counters(<identifier>, <string>, <'list-style-type'>)' という表記を使用します。 トークン間には空白を入れることができます。

"ネストされたカウンターとスコープ"（生成されたコンテンツ に関する章）を参照して、ユーザーエージェントがカウンターの値をどのように決定する必要があるかを確認してください。 また、'content'プロパティのカウンター値の定義を参照し、 これらの値を文字列に変換する必要があります。

CSS 2.2では、カウンターの値は'content'プロパティからのみ参照できます。 'none' は可能な <'list-style-type'> であり、'counter(x, none)' は空の文字列を生成します。

例：

以下は、各章（h1）ごとに段落（p）を番号付けするスタイルシートの例です。 段落はローマ数字で番号付けされ、その後にピリオドとスペースが続きます： 

p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}

4.3.6 色

<color> はキーワードまたは数値RGB指定のいずれかです。

色のキーワード一覧は次の通りです：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。この17色は次の値を持ちます：

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

これらの色キーワードに加えて、ユーザーはユーザー環境内の特定のオブジェクトで使用される色に対応するキーワードを指定できます。 詳細はシステムカラーのセクションを参照してください。

例：

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

数値によるRGBカラーモデルが色指定に使用されます。次の例はすべて同じ色を指定しています：

例：

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

16進表記でのRGB値の形式は、'#'に続けて3桁または6桁の16進文字が続きます。 3桁のRGB表記（#rgb）は桁の繰り返しで6桁形式（#rrggbb）に変換され、ゼロを追加するわけではありません。 例えば、#fb0は#ffbb00に展開されます。これにより、白（#ffffff）は短縮表記（#fff）で指定でき、 表示の色深度に依存しない指定が可能です。

関数表記でのRGB値の形式は、'rgb('に続けてカンマ区切りの数値（整数値またはパーセンテージ値）3つを記載し、 最後に')'で閉じます。整数値255は100%に対応し、16進表記のFまたはFFに対応します： rgb(255,255,255) = rgb(100%,100%,100%) = #FFF。 空白文字は数値の周りに許容されます。

すべてのRGB色はsRGBカラースペースで指定されます（[SRGB]参照）。 ユーザーエージェントはこれらの色を表現する際の忠実度が異なる場合がありますが、 sRGBを使用することで色の定義が明確かつ客観的に測定可能となり、国際標準（[COLORIMETRY]参照）と関連付けられます。

適合するユーザーエージェントは、与えられた色に対してガンマ補正を行うだけに色表示の努力を制限することができます。 sRGBは特定の視聴条件下で2.2のディスプレイガンマを指定します。 ユーザーエージェントは、CSSで指定された色を調整し、出力デバイスの「自然な」ディスプレイガンマと組み合わせて、 効果的なディスプレイガンマが2.2になるようにする必要があります。 なお、CSSで指定された色だけが影響を受けます。例えば、画像などは独自の色情報を持つことが期待されます。

デバイスの色域外の値は、色域が既知の場合、切り捨てまたは色域内にマッピングされるべきです： 赤、緑、青の値はデバイスでサポートされる範囲内に収まるよう変更されなければなりません。 ユーザーエージェントは、色を1つの色域から別の色域にマッピングする際に、より高品質な処理を行うことができます。 一般的なCRTモニター（デバイス色域がsRGBと同じ）の場合、以下の4つの規則は等価です：

例：

em { color: rgb(255,0,0) }       /* 整数範囲 0 - 255 */
em { color: rgb(300,0,0) }       /* rgb(255,0,0) にクリップ */
em { color: rgb(255,-10,0) }     /* rgb(255,0,0) にクリップ */
em { color: rgb(110%, 0%, 0%) }  /* rgb(100%,0%,0%) にクリップ */

プリンタなどの他のデバイスは、sRGBとは異なる色域を持ちます。 0..255のsRGB範囲外の色が表現可能である場合もあれば、 逆に0..255のsRGB範囲内の色がデバイスの色域外でありマッピングされる場合もあります。

注記。 色値のマッピングやクリッピングは、既知であれば実際のデバイス色域に対して行うべきです （0..255より大きいまたは小さい場合があります）。

4.3.7 文字列

文字列は、 ダブルクォートまたはシングルクォートで記述できます。ダブルクォート内にダブルクォートを含めることはできませんが、 エスケープすることで可能です（例："\" または "\22"）。シングルクォートの場合も同様です（例："\'" または "\27"）。

例：

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

文字列には直接改行を含めることはできません。 改行を文字列に含めるには、ISO-10646（U+000A）のラインフィード文字を表すエスケープ（例："\\A" または "\\00000a"）を使用します。 この文字はCSSにおける一般的な「改行」の概念を表します。 例については'content'プロパティを参照してください。

美観やその他の理由で文字列を複数行に分割することが可能ですが、その場合、改行自体をバックスラッシュ（\）でエスケープする必要があります。 例えば、次の2つのセレクターは全く同じです：

例：

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

4.3.8 未サポート値

ユーザーエージェントが特定の値をサポートしていない場合、スタイルシートをパースする際にその値を無視するべきです。 これは、その値が不正な値であるかのように扱われます。例えば：

例：

  h3 {
    display: inline;
    display: run-in;
  }

'display'プロパティの'run-in'値をサポートするユーザーエージェントは、最初のdisplay宣言を受け入れ、 次にその値を2つ目のdisplay宣言で「上書き」します。 'run-in'値をサポートしていないユーザーエージェントは、最初のdisplay宣言を処理し、2つ目のdisplay宣言を無視します。

4.4 CSSスタイルシート表現

CSSスタイルシートは、ユニバーサル文字集合（[ISO10646]参照）からの文字のシーケンスです。 転送および保存のために、これらの文字はUS-ASCIIで利用可能な文字集合をサポートする文字エンコーディング（例：UTF-8、ISO 8859-x、SHIFT JISなど）によってエンコードされなければなりません。 文字集合と文字エンコーディングの優れた入門書については、HTML 4仕様（[HTML4]、第5章）を参照してください。 また、XML 1.1仕様（[XML11]、セクション2.2および4.3.3、および付録E）も参照してください。

スタイルシートがHTMLのSTYLE要素や"style"属性などの他の文書に埋め込まれている場合、スタイルシートは文書全体の文字エンコーディングを共有します。

スタイルシートが別ファイルにある場合、ユーザーエージェントはスタイルシートの文字エンコーディングを決定する際、次の優先順位に従う必要があります（優先度の高い順から低い順）：

  1. HTTPの"Content-Type"フィールド内の"charset"パラメータ（または他のプロトコルの類似パラメータ）
  2. BOMおよび/または@charset（以下参照）
  3. <link charset="">またはリンク機構からのその他のメタデータ（あれば）
  4. 参照元のスタイルシートまたは文書の文字セット（あれば）
  5. UTF-8を仮定

@charset規則を使用する著者は、規則をスタイルシートの先頭に配置し、 その前に文字を置いてはなりません。（使用するエンコーディングにバイト順マークが適切な場合、@charset規則の前に置くことができます。）

"@charset"の後、著者は文字エンコーディングの名前を（引用符内に）指定します。例： 

@charset "ISO-8859-1";

@charsetは文字通りに記述されなければなりません。すなわち、10文字の'@charset "'（小文字、バックスラッシュエスケープなし）、 エンコーディング名、続けて'";'です。

名前はIANAレジストリに記載されている文字セット名でなければなりません。 完全な文字セットのリストについては[CHARSETS]を参照してください。 著者はIANAレジストリで「preferred MIME name」としてマークされている文字セット名を使用するべきです。

ユーザーエージェントは少なくともUTF-8エンコーディングをサポートする必要があります。

上記の規則1（HTTPの"charset"パラメータまたは類似のもの）が文字エンコーディングを指定し、 それがUTF-8、UTF-16またはUTF-32のいずれかである場合、次のようにファイルの先頭にあるバイト順マーク（BOM）がその文字エンコーディングを上書きします：

先頭バイト（16進数） 結果のエンコーディング
00 00 FE FF UTF-32, ビッグエンディアン
FF FE 00 00 UTF-32, リトルエンディアン
FE FF UTF-16, ビッグエンディアン
FF FE UTF-16, リトルエンディアン
EF BB BF UTF-8

規則1がUTF-16BE、UTF-16LE、UTF-32BEまたはUTF-32LEの文字エンコーディングを指定した場合、 ファイルの先頭にBOMがあるとエラーです。 CSSユーザーエージェントは、指定されたエンコーディングを無視し、上記の表を使用して回復しなければなりません。

注：UTF-16BE、UTF-16LE、UTF-32BEまたはUTF-32LEにおいてファイル先頭のBOMがエラーであるという事実は、 [UNICODE]によって規定されています。

ユーザーエージェントは、スタイルシートの先頭以外にある@charset規則を無視しなければなりません。 ユーザーエージェントがBOMおよび/または@charset規則を使用して文字エンコーディングを検出する場合、次の規則に従うべきです：

ユーザーエージェントは、不明なエンコーディングのスタイルシートを無視しなければなりません。

4.4.1 文字エンコーディングで表現できない文字の参照

スタイルシートは、現在の文字エンコーディングで表現できない文字を参照する必要がある場合があります。 このような文字は、ISO 10646文字へのエスケープ参照として記述する必要があります。 これらのエスケープは、HTMLやXML文書の数値文字参照と同じ目的を果たします（[HTML4]、第5章および第25章を参照）。

文字エスケープ機構は、この方法で表現する必要がある文字がわずかである場合に使用するべきです。 スタイルシートのほとんどがエスケープを必要とする場合、著者はより適切なエンコーディングでエンコードするべきです （例：スタイルシートにギリシャ文字が多く含まれる場合、著者は"ISO-8859-7"や"UTF-8"を使用するかもしれません）。

異なる文字エンコーディングを使用する中間プロセッサは、これらのエスケープシーケンスをそのエンコーディングのバイトシーケンスに変換する場合があります。 ただし、中間プロセッサは、ASCII文字の特殊な意味を打ち消すエスケープシーケンスを変更してはなりません。

適合するユーザーエージェントは、 認識する文字エンコーディング内のすべての文字をISO-10646に正しくマッピングしなければなりません （またはそのように振る舞わなければなりません）。

例えば、ISO-8859-1（Latin-1）として送信されたスタイルシートには、ギリシャ文字を直接含めることはできません： "κουρος"（ギリシャ語："kouros"）は "\3BA\3BF\3C5\3C1\3BF\3C2"と書く必要があります。

注記。 HTML 4では、 数値文字参照は"style"属性値で解釈されますが、STYLE要素の内容では解釈されません。 この非対称性のため、著者は"style"属性とSTYLE要素の両方で数値文字参照ではなく CSS文字エスケープ機構を使用することを推奨します。 例えば、次のように記述することをお勧めします： 

<SPAN style="font-family: L\FC beck">...</SPAN>

次のように記述するのではなく：

<SPAN style="font-family: L&#252;beck">...</SPAN>

前へ   次へ   目次   プロパティ一覧   索引