CSS3のモジュール:値と単位

摘要

このCSS3のモジュールは、CSSのプロパティが受け入れるさまざまな値や単位を説明する。また、どのようにスタイルシートが含む"明示された値"が"計算された値"と"現実の値"に処理されるのかをもまた説明する。

この文書の地位

これはCSSのレベルの3のモジュールの草案である。W3Cの勧告になる前に、おそらく何かのほかのモジュールとともにくくられるだろう。

CSSのレベルの2にも存在するここで説明されるプロパティと特徴は、後方への互換性があるように意図されている。(実際はこの草案にはひとつも新しい特徴がなく、ただCSSのレベルの2の適切な部分をCSS3のモジュールの形で書き直すためだけに供給されるが、未来のバージョンにおいてはあるだろう。)

この草案、"策定進行中"としてのほかは引用されるべきではない。CSSを策定する団体の策定項目で、また、スタイルの活動の一部である。やがてどんな時点でも、修正されたり完全に中断されたりするかもしれない。仕様書の実験をする目的のための実装は、実験用とはっきり示さえすれば、歓迎される。

この草案に関する意見は請われる。議論のための好まれる場所は、(記録された)公開のメーリングリストのwww-style@w3.orgである。W3Cのメンバも、CSSのWGのメーリングリストにコメントを送ることができる。

現在のW3Cの勧告や、策定中の草案や覚書を含むその他の技術上の文書の一覧表はhttp://www.w3.org/TRで手に入れることができる。

目次

• 1. ほかのモジュールへの依存
• 2. 序論
• 3. 値
  • 3.1. キーワード
  • 3.2. 数
  • 3.3. 単位の識別子のある数
    • 3.3.1. 長さ
    • 3.3.2. パーセンテージ
    • 3.3.3. 角度
    • 3.3.4. 時間
    • 3.3.5. 周波数
  • 3.4. 文字列
  • 3.5. 関数
    • 3.5.1. 属性の識別子
    • 3.5.2. URI
    • 3.5.3. カウンタ
  • 3.6. 特殊な事例
    • 3.6.1. フォントファミリ
    • 3.6.2. 色
• 4. 明示された、計算された、および現実の値
  • 4.1. 明示された値
  • 4.2. 計算された値
  • 4.3. 現在の値
• 謝意
• 参考文献
• 索引

1. ほかのモジュールへの依存

このCSS3のモジュールは次に続くほかのCSS3のモジュールに依存している。

• "カスケード処理と継承のモジュール"。これは、いくつかの競い合っている値から"結果として生じる値"を見出す方法を説明する。また、"inherit"というキーワードを継承された値と取り替える方法も説明する。
• "構文のモジュール"。これは、語彙の水準での値の構文を説明する。

2. 序論

CSSにおいて、値の五つの主要な型がある。

1. キーワード(たとえば、"pitch-range: inherit")
2. 数(たとえば、"orphans: 3")
3. 単位の識別子のある数(たとえば、"border-width: 0.2em")
4. 文字列(たとえば、"content: 'Figure: '")
5. 関数(たとえば、"background: url(http://www.w3.org/image)")
6. 特殊な事例(たとえば、"color: #F00"や"font-size: Helvetica")

ほとんどのプロパティは上に述べた型の幾つかから値を受け入れる。プロパティの中には、値のスペースやコンマで分けられたリストを受け入れるものもある。

おのおののCSSのプロパティには、プロパティの説明の中で見つけることができる、どの種類の値を受け入れるかの正式な定義がある。

[正式なCSSの文法が上に述べた値の分類と違っている理由についての本文を加える]

3. 値

3.1. キーワード

プロパティの値の正式な定義において、キーワードは文字どおりに現れる。

値: collapse | separate | inherit

table { border-collapse: separate }

すべてのCSS3のプロパティがキーワードの値である"inherit"を受け入れる。キーワードは決して引用符で囲まれない。

3.2. 数

数の値は、整数または実数かどちらかでありうる。整数の値は、<integer>で示され、実数の値は、<number>で示される。整数と実数は十進表示でのみ明示される。<integer>は、ひとつあるいはもっと多い数字の"0"から"9"からなる。<number>は、<integer>または、一つあるいはもっと多いアラビア数字に伴われる小数点(.)に伴われるゼロあるいはもっと多いアラビア数字かどちらかでありえる。整数も実数も両方とも、符号を示すため"-"か"+"を前置きとしてもよい。

値として整数や実数を受け入れる多数のプロパティが、実際は値をある範囲に、しばしば負でない値に制限することに注意せよ。

3.3. 単位の識別子のある数

3.3.1. 長さ

長さは、水平面か鉛直の寸法のことをさす

<length>で示される長さの値の形式は、単位の識別子(たとえば、px、degなど)にじかに伴われる(小数点があるかまたはない)<number>にじかに伴われる任意の符号の記号('+'か'-'、'+'についてデフォルトである)である。'0'の長さのあとには、単位の識別子は任意である。

プロパティの中には負の長さの値を受け入れるものもあるが、これはフォーマット処理を複雑にするかもしれず、実装に特有の制限があるかもしれない。もしも負の値の長さの値がサポートされていなければ、サポートされることのできる最も近い値に変えられるべきである。

相対的なものと絶対的なものという、二種類の長さの単位がある。相対的な長さの単位は別の長さのプロパティと関連している長さを明示する。相対的な単位を用いるスタイルシートは、ある媒体からほかのものに(たとえば、コンピュータのディスプレイからレーザプリンタに)もっと簡単に縮小・拡大できるだろう。

相対的な単位は、

• em : 妥当なフォントの'font-size'
• ex : 妥当なフォントのx-height
• px : ピクセル。見るための装置に関係のがある

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

'em'という単位は、使われている要素の'font-size'というプロパティの計算された値と等しい。例外は、'em'が'font-size'のプロパティそのものの値に存在するときである。水平面や鉛直の寸法に用いられてよい。(この単位は、時々印刷上の文書において四角形の幅とも呼ばれる。)

'ex'という単位はフォントのフォントのx-heightで定義される。x-heightは、小文字の"x"の高さとしばしば等しいからそのように呼ばれる。しかしながら'ex'は"x"を含まないフォントに対してさえも定義される。

H1 { line-height: 1.2em }

H1 { font-size: 1.2em }

文書の木の根に対して明示されたとき、(たとえば、HTMLにおける"HTML")、'em'と'ex'はプロパティの初期値を参照する。

ピクセルという単位は、見るための装置、すなわち、最もしばしばには、コンピュータのディスプレイの解像度に関係がある。 もしも出力装置のピクセルの密度が典型的なコンピュータのディスプレイのそれと大いに異なっていれば、ユーザエージェントはピクセルの値を再調整すべきである。参考のピクセルが、90dpiのピクセルの密度と読者から腕の長さの距離がある、装置の視覚的な角度であることが推奨される。それゆえに、28インチという名目の腕の長さの場合は、視覚的な角度は、約0.0227度である。

だから、腕の長さで読む場合は、1pxが約0.28mm(1/90インチ)と一致する。レーザプリンタに印刷されるときには、腕の長さ(55cm,21インチ)より少し少ない場所で読むのを意図される。300ドット毎インチ(dpi)のプリンタでは、それが3ドット(0.25mm)に切り上げられてもよい。600dpiのプリンタでは、5ドットに丸められてもよい。

下の二つの画像は、ピクセルの大きさに関する見ている距離の効果と装置の解像度の効果を説明する。最初の画像において、71cm(28インチ)という読んでいる距離は、0.28mmのpxに帰着する。同時に3.5m(12フィート)の読むための距離は1.4mmのpxを必要とする。

第2番目の画像において、1pxごとの領域は、低解像度の装置(コンピュータの画面)でのただ1つのドットに包含されるが、一方同じ領域がもっと高い解像度の装置(400dpiのレーザプリンタ)での16ビットに包含される。

子供の要素は、その親に対して明示されている相対的な値を継承しない。(一般的に)計算された値を継承する。

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* i.e., 36pt */
}
H1 { font-size: 15pt }

絶対的な長さの単位は、ただ出力媒体の物理的な特性が知られているときにだけ役に立つ。

• in : インチ -- 1インチは2.54センチメートルと等しい
• cm : センチメートル
• mm : ミリメートル
• pt : ポイント -- CSS2で使われているポイントは、インチの1/72と等しい。
• pc : パイカ -- 1パイカは12ポイントと等しい。

H1 { margin: 0.5in }      /* インチ  */
H2 { line-height: 3cm }   /* センチメートル */
H3 { word-spacing: 4mm }  /* ミリメートル */
H4 { font-size: 12pt }    /* ポイント */
H4 { font-size: 1pc }     /* パイカ */

明示された長さがサポートされることができない場合においては、ユーザエージェントは現実の値の状態に接近させなければならない。

3.3.2. パーセンテージ

(この仕様書では<percentage>で示される)パーセンテージの値の形式は、'%'にじかに伴われる<number>にじかに伴われる任意の符号文字('+'か'-'、'+'についてデフォルトである)である。

パーセンテージの値は、常にほかの値と関係がある。パーセンテージを認めるおのおののプロパティは、パーセンテージが参照する値もまた定義する。値は、同じ要素に対する別のプロパティか、先祖の要素に対するプロパティか、フォーマットするための前後関係(たとえば、包含しているブロックの幅)の値のそれであるかもしれない。パーセンテージの値が、根の要素のプロパティに定められたり、パーセンテージが、あるプロパティの継承された値を参照するように定義されたりすると、結果として生じる値はそのプロパティの初期値のパーセンテージ倍である。

P { font-size: 10pt }
P { line-height: 120% }  /* 'font-size'の120% */

3.3.3. 角度

(本文中では<angle>で示される)角度の値は、聴覚のスタイルシート[参照を追加する]で用いられる。

その形式は、角度の単位の識別子にじかに伴われる<number>にじかに伴われる任意の符号文字('+'か'-'、'+'についてデフォルトである)である。

角度の単位の識別子は、

• deg : 度
• grad : 傾斜度
• rad : ラジアン

角度の値は負であってもよい。ユーザエージェントによって0-360degの範囲に統一されるべきである。たとえば、-10degと350degは同等である。

たとえば、直角の角度は'90deg'か'100grad'か'1.570796326794897rad'である。

3.3.4. 時間

(本文中では<time>で示される)時間の値は聴覚的なスタイルシート[参照を追加する]で使われる。

その形式は、時間の単位の識別子にじかに伴われる<number>である。

時間の単位の識別子は

• ms : 秒の1000分の1
• s : 秒

時間の値は負であってはならない。

3.3.5. 周波数

(本文中では<frequency>で示される)振動数の値は音声のカスケード処理のスタイルシート[参照を追加する]で使われる。

その形式は、周波数の単位の識別子にじかに伴われる<number>である。

周波数の単位の識別子は、

• Hz : ヘルツ
• kHz : キロヘルツ

周波数の値は負であってはならない。

たとえば、200Hz(かまたは200hz)はバス声部の音、6kHz(かまたは6khz)は最高声部の音である

3.4. 文字列

文字列は、二重引用符かまたは一重引用符とともに書かれる。二重引用符は、もしも(たとえば'\"'や'\22'のような)エスケープされなければ、二重引用符の内部に存在できない。一重引用符("\'"や"\27")に対しても類似している。

"これは'文字列'"
"これは\"文字列\""
'これは"文字列"'
'これは\'文字列\''

文字列は復帰改行を直接に含むことはできない。文字列の中に復帰改行を含むためには、エスケープ"\A"(十六進法のAはユニコードにおける行送りであるが、CSSにおいては"復帰改行"の一般的な表記を表す)。たとえば、'content'というプロパティを調べてみよ。

美やほかの理由のために、数行に渡って文字列を切断することは可能であるが、そのような場合においては、復帰改行自体が、バックスラッシュでエスケープされなければならない。たとえば、次に述べる二つのセレクタは、ぴったり同じである

A[TITLE="そのよ\
うにあまり長い題名ではない"] {/*...*/}
A[TITLE="そのようにあまり長い題名ではない"] {/*...*/}

3.5. 関数

3.5.1. 属性の識別子

[attr(x)などを説明する]

3.5.2. URI

URL(不変の資源の場所を指定するもの。[RFC1738]と[RFC1808]を見よ。)ウェブ上の資源のアドレスを提供する。資源を見分ける期待されている新しい方法が、URN(不変の資源の名前)と呼ばれる。あわせて、URIs(不変の資源の識別子。[URI]を見よ)と呼ばれる。この仕様書は、用語URIを用いる。

この仕様書の中のURIの値は、<uri>で示される。プロパティの値の中でURIを示すのに用いられる関数の表記は、

BODY { background: url("http://www.bg.com/pinkish.gif") }

におけるように"url()"である。URIの値の形式は、')'に伴われる任意の空白に伴われる、任意の一重引用符(')か二重引用符(")の文字に伴われるURIそのものに伴われる、任意の一重引用符(')か二重引用符(")の文字に伴われる任意の空白に伴われる'url('である。

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

URIの中に現れる丸括弧、コンマ、空白文字、一重引用符(')と二重引用符(")は、\('、'\)'、'\,'のようにエスケープされなければならない。

URIの様式によって、[URI]の中で説明されているように、("(" = %28、")" = %29であるなどの)URIのエスケープとして上に述べた文字を書くこともまた、可能である。

資源の絶対的な場所に依存しないモジュールのスタイルシートを創造するために、作者は相対的なURIを用いてもよい。([RFC1808]の中で定義された)相対的なURIは、基礎のURLを用いて完全なURLに解決される。RFCの1808の第3節は、この過程のための規範的なアルゴリズムを定義する。CSSのスタイルシートの場合において、基礎のURLは、源の文書のそれではなくスタイルシートのそれである。

BODY { background: url("yellow") }

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

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

ユーザエージェントは、利用できないか適用できない資源を示すURIを処理する方法の点で一様でない。

3.5.3. カウンタ

カウンタは識別子で示される('counter-increment'と'counter-reset'のプロパティを見よ)。カウンタの値を参照するのに、表記'counter(<identifier>)'か'counter(<identifier>, <list-style-type>)'が用いられる。デフォルトのスタイルは'decimal'である。

同じ名前の入れ子にされたカウンタの連続を参照するためには、表記は'counters(<identifier>, <string>)'か'counters(<identifier>, <string>, <list-style-type>)'である。生成要素[参照を追加する]に関連した章の中の"入れ子にされたカウンタと範囲"[参照を追加する]を見よ。

CSS2において、カウンタの値はただ'content'というプロパティからだけ参照されることができた。'none'は可能な<list-style-type>で、 'counter(x, none)'はからの文字列を生む。

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

'counter-reset'の範囲[参照を追加する]の中にないカウンタは、当然根の要素の'counter-reset'で0におきなおされていると思われる。

3.6. 特殊な事例

[(#のため)色と、(あるべきところにない引用符が正当であるため)フォントファミリという、前文で説明された種類の外に落ちる二つの普通の事例がある。

3.6.1. フォントファミリ

[フォントファミリは、それを取り囲む引用符を落としてもよいことを除いては、文字列と似ている。]

3.6.2. 色

<color>という値は、キーワードか、関数の表記の数字で表されたRGBの列挙かまたは、十六進法の表記での数字で表されたRGBの列挙のいずれかである。

キーワードの色の名前のリストは、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、whiteとyellowである。これらの16色は、HTMLの4.0([HTML40])で定義される。その色のキーワードのほかに、ユーザの環境におけるある物体で使われる色と一致するキーワードを明示してもよい。もっと多量の情報のためにシステムの色の項[参照を追加する]を調べてください。

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) }      /* 整数の範囲 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* 浮動小数点の範囲 0.0% - 100.0% */

十六進法の表記におけるRGBの値の形式は、三つかまたは六つの十六進法の文字のいずれかによってじかに伴われる'#'である。三つのアラビア数字のRGBの表記(#rgb)は、ゼロを加えることによってではなく、アラビア数字を複写することによって、六つのアラビア数字のRGBの形式(#rrggbb)に変えられる。たとえば、#fb0は#ffbb00に拡大する。これは、白(#ffffff)が短い表記(#fff)で明示されることができることを保証し、ディスプレイの色の深さへの依存を取り除く。

関数の表記におけるRGBの値の形式は、')'に伴われる三つの数字で表された値のコンマで分けられたリスト(三つの整数の値かまたは三つのパーセンテージの値のいずれか)に伴われる'rgb('である。rgb(255,255,255) = rgb(100%,100%,100%) = #FFFであるように、整数の値255は100%および、十六進法の表記法におけるFかFFと一致する。空白文字は数字で表された値を取り囲むのを許される。

すべてのRGBの色は、RGBの色の空間([SRGB]を見よ)の中で明示される。ユーザエージェントは、それらの色が表す忠実の点で一様でないが、sRGBを用いることが、色があるべき、あいまいでなく、客観的なある程度の定義を提供し、それは国際的な標準([COLORIMETRY]を見よ)に関係がある。

適合しているユーザエージェントは、それらに関するガンマの補正をするのに色を表示する努力を限定してもよい。sRGBは、見ている状態を明示された下で2.2のディスプレイのガンマを明示する。ユーザエージェントは、出力装置の"自然な"ディスプレイのガンマとの連携操作において、2.2の有効なディスプレイのガンマが引き起こされるように、CSSで与えられる色を調整すべきである。さらに進んだ細部については、ガンマの補正[参照を追加する]を見よ。ただCSSで指定された色だけが影響を及ぼされ、たとえば、画像はそれ自身の色の情報をもつと予期されることに注意せよ。

装置の全範囲の外の値は、赤、緑と青の値が、装置によってサポートされている範囲内に落ちるように変えられなければならないように、切られるべきだ。装置の全範囲がsRGBと同じである典型的なCRTのモニタに対して、下の三つの規則が同等である。

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%)に切られる */

4. 明示された、計算された、および現実の値

与えられた要素に対するCSS3のプロパティの最終的な値は、値がスタイルシートの中で明示され("明示された値")、必要ならば絶対的な値に解決され("計算された値")、最後に特定の環境の制限にしたがって変えられる("現実の値")という、三段階の計算の結果である。

4.1. 明示された値

明示された値は、スタイルシートで指定される値である。"勝者である宣言"が明示された値を含む。しばしば、明示された値は少しも計算を必要としないが、これが下の表の中の実例aにおける場合である。

もしも指定された値が簡略的表記法のプロパティに定められているならば、すべての個々のプロパティ設定されるとみなされる。下の表の中の実例bを見よ。

勝者である宣言がひとつもなければ、明示された値はない。下の表の実例gを見よ。

4.2. 計算された値

明示された値は絶対的か、(すなわち、たとえば'red'や'2mm'のような、別の値に関係があると明示されている)であるかもしれないし、相対的(すなわち、たとえば'auto'、'2em'や'12%'のような、別の値に関係があると明示されている)であるかもしれない。絶対的な値の場合においては、少しの計算も、計算された値を調べるのに必要とされない。

相対的な値は、これに反して、パーセンテージは参考値にかけられなければならず、相対的な単位(em、ex、px)のある値は適切なフォントかピクセルの大きさとかけることによって絶対的にされなければならず、'auto'という値は、おのおののプロパティとともに与えられた方式によって計算されなければならず、一定のキーワード('smaller'、'border'、'inherit')はその定義に従って置き換えられなければならないように、計算された値に変えられなければならない。下の表の中の実例c、d、およびeを見よ。

ほかの状態で、もしプロパティの説明によって明示されていなければ、子供の要素はその親から計算された値を継承する。

計算された値を調べるために、"はじめの包含しているブロック"の幅と、根の要素のフォントの大きさは、知られていなければならない。行がまだ割付されていなければ、計算された値の中には、"auto"のままであるものもあるだろう。下の表の中の実例fを見よ。

4.3. 現実の値

計算された値は原則としては用いられる準備ができているが、ユーザエージェントは与えられた環境の中で値を利用できないかもしれない。たとえば、ユーザエージェントは、整数のピクセルの幅のあるボーダーしか描写できないかもしれないし、それゆえに計算された幅を近づけなければならないかもしれない。また、要素のフォントの大きさが、フォントが利用できることや、'font-size-adjust'というプロパティの値に基礎付けられた調整を必要とするかもしれない。現実の値は、調整がされた後の計算された値である。

要素の現実の値を厳密に調べることによって、どんなふうに文書が割り付けられたかについて多くが学ばれる。しかしながら、すべての情報が現実の値に記録されるわけではない。たとえば、'page-break-after'の現実の値は、要素の後にページの変わり目があるかどうかを反映しない。同様に、'orphans'の現実の値は、どれだけ多くの孤児の行がある要素の中にあるかを反映しない。下の表の中の実例hとiを見よ。

謝意

[謝意]

参考文献

[COLORIMETRY]

Colorimetry, Second Edition. CIE Publication 15.2-1986. ISBN 3-900-734-00-3 URL: http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html

[HTML40]

Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.0 Specification. 8 July 1997. W3C Recommendation. URL: http://www.w3.org/TR/REC-html40

[RFC1738]

T. Berners-Lee; L. Masinter; M. McCahill. Uniform Resource Locators (URL). December 1994. Internet RFC 1738. URL: ftp://ftp.nordu.net/rfc/rfc1738.txt

[RFC1808]

R. Fielding. Relative Uniform Resource Locators. June 1995. Internet RFC 1808. URL: ftp://ftp.nordu.net/rfc/rfc1808.txt

[SRGB]

Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB. IEC 61966-2-1 (1999-10). ISBN: 2-8318-4989-6 ­ ICS codes: 33.160.60, 37.080 ­ TC 100 ­ 51 pp. URL: http://www.iec.ch/nr1899.htm

[URI]

T. Berners-Lee; R. Fielding; L. Masinter. Uniform Resource Identifiers (URI): generic syntax. August 1998. Internet RFC 2396. URL: http://www.isi.edu/in-notes/rfc2396.txt

索引

• Absolute length, #
• Actual values, #, #
• cm (centimeters), #
• Computed values, #, #
• 'counter(<identifier>)', #
• 'counter(<identifier>, <list-style-type>)', #
• deg (degrees), #
• em, #
• em (unit), #
• ex, #
• ex (unit), #
• grad (grads), #
• Hz (Hertz), #
• in (inches), #
• kHz (kilohertz), #
• <angle>
  • definition of, #
• <color>
  • definition of, #
• <counter>, definition of, #
• <frequency>
  • definition of, #
• <integer>, #
• <length>, #
• <number>, #, #, #, #, #
• <percentage>
  • definition of, #
• <string>, definition of, #
• <time>
  • definition of, #
• <uri>
  • definition of, #
• mm (millimeters), #
• ms (milliseconds), #
• newline, #
• pc (picas), #
• pixel units, #
• pt (points), #
• px (pixel), #
  • definition of, #
• quad width, #
• rad (radians), #
• reference pixel, #
• Relative length units, #
• Resource Identifier (URI), #
• Specified values, #, #
• s (seconds), #
• Uniform Resource Locator (URL), #
• Uniform Resource Name (URN), #
• URI (Uniform Resource Identifier), #
• URL (Uniform Resource Locator), #
• URN (Uniform Resource Name), #
• x-height, #