W3CREC-CSS1-19990111

Cascading Style Sheets, level 1

W3C 1996年12月17日勧告 1999年1月11日改訂

本版:
http://www.w3.org/TR/1999/REC-CSS1-19990111
最新版:
http://www.w3.org/TR/REC-CSS1
前版:
http://www.w3.org/TR/REC-CSS1-961217
著者:
Håkon Wium Lie: <howcome@w3.org>
Bert Bos: <bert@w3.org>

この文書の位置付け(Status of this document)

この文書はWorld Wide Web Consortium(以下W3C)の勧告文書であり、W3C成員による検討の結果使用されるに十分な内容であるという統一的見解に達した。 したがって本書は決定稿であり、他文書において標準参照資料として引用してよい。 W3Cは本勧告を幅広く普及させる。

現在のW3C勧告及びその他技術文書の一覧はhttp://www.w3.org/pub/WWW/TR/より得られる。

本書は1996年12月17日付け勧告の改訂版である。 前版からの変更点については附記Fを参照されたい。 本仕様で今までに判明している誤りの一覧はhttp://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errataより得られる。

総目次(Table of contents)

  1. 基礎概念
    1. HTMLへの組み込み
    2. グループ化
    3. 継承
    4. クラスセレクタ
    5. 一意セレクタ
    6. 文脈セレクタ
    7. コメント
  2. 疑似クラスと疑似要素
    1. アンカー疑似クラス
    2. 印刷術的疑似要素
    3. 'first-line'疑似要素
    4. 'first-letter'疑似要素
    5. セレクタ内の疑似要素
    6. 疑似要素の複合
  3. カスケード処理
    1. 'important'
    2. カスケード処理の順序
  4. 整形モデル
    1. ブロック要素
      1. 垂直方向の整形
      2. 水平方向の整形
      3. リスト項目の要素
      4. フロート要素
    2. インライン要素
    3. 置換要素
    4. 行の高さ
    5. キャンバス
    6. 'BR'要素
  5. CSS1プロパティ
    1. プロパティ値の表記法
    2. フォントのプロパティ
      1. フォントのマッチング
      2. 'font-family'
      3. 'font-style'
      4. 'font-variant'
      5. 'font-weight'
      6. 'font-size'
      7. 'font'
    3. 色と背景のプロパティ
      1. 'color'
      2. 'background-color'
      3. 'background-image'
      4. 'background-repeat'
      5. 'background-attachment'
      6. 'background-position'
      7. 'background'
    4. テキストのプロパティ
      1. 'word-spacing'
      2. 'letter-spacing'
      3. 'text-decoration'
      4. 'vertical-align'
      5. 'text-transform'
      6. 'text-align'
      7. 'text-indent'
      8. 'line-height'
    5. ボックスのプロパティ
      1. 'margin-top'
      2. 'margin-right'
      3. 'margin-bottom'
      4. 'margin-left'
      5. 'margin'
      6. 'padding-top'
      7. 'padding-right'
      8. 'padding-bottom'
      9. 'padding-left'
      10. 'padding'
      11. 'border-top-width'
      12. 'border-right-width'
      13. 'border-bottom-width'
      14. 'border-left-width'
      15. 'border-width'
      16. 'border-color'
      17. 'border-style'
      18. 'border-top'
      19. 'border-right'
      20. 'border-bottom'
      21. 'border-left'
      22. 'border'
      23. 'width'
      24. 'height'
      25. 'float'
      26. 'clear'
    6. 分類のプロパティ
      1. 'display'
      2. 'white-space'
      3. 'list-style-type'
      4. 'list-style-image'
      5. 'list-style-position'
      6. 'list-style'
  6. 値の種類
    1. 長さ
    2. 割合
    3. URL
  7. CSS1へ適合するには
    1. 上位互換の解析規則
  8. 参照資料
  9. 謝辞

概要(Abstract)

この文書はCascading Style Sheetsの第1版(CSS1)の仕組みを規定している。 CSS1はスタイルシートの単純な仕組みであり、文書作成者及び読者はHTML文書に対してフォント、色分け、スペーシングなどのスタイルを与えることができる。 CSS1は人間に読み書き可能な言語で記述され、平易なDTP用語を用いてスタイルを表現する。

CSSの基本的特徴の1つは、複数のスタイルシートの競合をカスケード処理できることである。 すなわち、文書作成者側から好みのスタイルシートを与えることができる一方で、読者側も個人的あるいは技術的な不都合を調節するためのスタイルシートを持つことができる。 異なるスタイルシート間の競合についての規則は本仕様に定める。

本勧告はW3Cのスタイルシート関連活動の結果生じたものである。 スタイルシートの背景についての情報は、[STYLE]を参照のこと。

用語(Terminology)

attribute - 属性
HTMLの属性。
author - 文書作成者
HTML文書の作成者、記述者のこと。
block-level element - ブロック要素
自身の前後に改行を挿入する要素(たとえばHTMLにおけるH1要素)。
canvas - キャンバス
ユーザエージェントが描画を行う面のことで、文書はここに表示される。
child element - 子供要素
[SGML]用語における副要素(subelement)のこと。
contextual selector - 文脈セレクタ
木構造内での位置に基づいて要素のマッチングを行うセレクタのこと。 文脈セレクタは複数の単純セレクタから成る。 たとえば、「H1.initial B」という文脈セレクタは、「H1.initial」「B」という2つの単純セレクタから構成される。
CSS
カスケーディング・スタイル・シート。
CSS1
カスケーディング・スタイル・シートの第1版。 本仕様ではその平易な仕組みを定義している。
CSS1 advanced features
訳出語は不定。 本仕様にCSS機能の1つとして記述が存在するものの、CSS1の段階では実装必須の項目として扱われない機能のこと。
CSS1 core features
訳出語は不定。 CSS1への適合を称するすべてのユーザエージェントが実装を要求される機能。
CSS1 parser - CSS1パーサ
CSS1スタイルシートを解析できるユーザエージェント。
declaration - 宣言
プロパティ及び値から成る1対の組合わせ。
designer - 設計者
スタイルシートの作成者。
document - 文書
HTMLで書かれた文書のこと。
element - 要素
HTML要素。
element type - 要素名
[SGML]用語における総称識別子(generic identifier)のこと。
fictional tag sequence - 仮想タグ
疑似クラス及び疑似要素の働きを記述するための便宜的概念。
font size - フォントサイズ
そのサイズは一般に、下に突き出たgpyなどの文字の最下部から上に突き出たbklなどの文字(言語に依ってはåèüなどの発音区別符号を含む)の最上部までの距離と近似する。
HTML
SGML応用の1つである「HyperText Markup Language」のこと。 詳細は[HTML]を参照のこと。
HTML extension - 拡張HTML
特定のユーザエージェント実装者に導入されたこれらのマーク付けの殆どは、ある種の体裁効果を提供している。 FONT、CENTER、BLINKなどの要素や、bgcolor属性などがその例である。 CSSの目標の1つは、これら拡張HTMLに代わる体裁制御方法の提供である。
inline element - インライン要素
自身の前後に改行を挿入しない要素(たとえばHTMLにおけるSTRONG要素)。
intrinsic dimensions - 内在寸法
周囲の状況に決定されるのではなく、要素そのものが元々独立して備えている幅及び高さのこと。 本仕様では、すべての置換要素が(そして置換要素のみが)内在寸法を持つと考える。
parent element - 親要素
[SGML]用語におけるコンテナ要素(containing element)こと。
pseudo-element - 疑似要素
構造を組み立てる要素というよりも寧ろ、印刷術で体裁制御に用いる様な項目(たとえば要素の最初の1行)を、セレクタ内に組み込む場合に用いる。
pseudo-class - 疑似クラス
HTMLソースとは無関係の情報に従って要素を分類する項目(たとえばアンカーが既に閲覧済みであるという事実)を、セレクタ内に組み込む場合に用いる。
property - プロパティ
CSSで制御可能な体裁を表すパラメータ。 本仕様では、プロパティとそれに対応する値の一覧を定義している。
reader - ユーザ
レンダリング後の文書を読む人。 「user」と同義。
replaced element - 置換要素
CSSのフォーマッタその内在寸法のみを認識する要素。 HTMLでいえば、IMG、INPUT、TEXTAREA、SELECT、OBJECTなどが置換要素になる。 たとえば、IMG要素はsrc属性で指定された画像に置き換えられる。 CSS1では内在寸法の取得方法を定義しない。
rule - 規則
宣言及びセレクタから成る1対の組合わせ。
selector - セレクタ
対応する規則が適用される要素を識別するための文字列。 セレクタの種類には単純セレクタと、複数の単純セレクタから成る文脈セレクタがある。
SGML
参照[SGML]に示した「Standard Generalized Markup Language」のこと。 HTMLはこのマーク付け言語の1種の応用である。
simple selector - 単純セレクタ
木構造内の位置ではなく、要素の種類や属性に基づいて参照を行うセレクタ。 たとえば「H1.initial」というのは単純セレクタである。
style sheet - スタイルシート
規則の集合体。
ユーザエージェント
Web関連のプログラム一般。 ブラウザやクライアントを指す場合が多い。
user - ユーザ
「reader」と同義。
weight - 優先度
規則の優先順位。

本仕様において、アポストロフィで括られた語句はHTMLやCSSの抜粋語句を示す。 【訳注:訳文についてはこの限りではない。 HTMLの要素は大文字、属性は小文字で、CSSのプロパティ及びその値は小文字と一重引用符で、その他抜粋及び文字列は適宜鉤括弧で示すことが多い。】


1 基礎概念(Basic concepts)

単純なスタイルシートを設計するのは容易であり、必要なのはHTML及びDTP用語の基本的な知識だけである。 たとえば、H1要素の文字色を青に設定したければ、次の様に記述するとよい:

  H1 { color: blue }

この例はごく単純なCSS規則である。 規則はセレクタ「H1」及び宣言「color:blue」という2つの部分から成り、更に宣言はプロパティ「color」及び値「blue」という2つの部分から成る。 上の例では、HTML文書の表示に必要なプロパティのうち1つを操作しているにすぎないが、その1行だけでスタイルシートが成立する。 他のスタイルシートと組合わせることで文書の最終的な体裁が決定する(CSSの基本的特徴の1つはスタイルシートを組合わせられる点にある)。

セレクタはHTML文書とスタイルシートの間をリンクする役割を持ち、すべてのHTML要素はセレクタとして用いることができる。 HTML要素の種類は、[HTML]仕様に定義されている。

'color'は、文書の体裁を決定する約50ものプロパティの中の1つである。 プロパティ及び対応する使用可能な値の一覧は、本仕様に定める。

文書作成者は自分の文書に特別な体裁装飾を施したい場合に限って、スタイルシートを記述する必要がある。 なぜなら各ユーザエージェント(ブラウザとかクライアントなどと呼ばれる場合が多い)にはおそらく、ごくありふれた妥当な体裁を設定するデフォルトのスタイルシートが備わっているからである。 [A. HTML 2.0におけるスタイルシートの例]には、[RFC1866]が推奨している、デフォルトスタイルシートのサンプルがある。

CSS1言語の正式な文法は[B. CSS1の文法]に定める。

1.1 HTMLへの組み込み(Containment in HTML)

スタイルシートが体裁に影響を与えるには、まずユーザエージェントがその存在を認識する必要がある。 スタイルシートとHTML文書をリンクする手段については、[HTML]仕様に定めてある。 したがって、この章は補完情報を提供するのみで標準情報ではない:

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="http://style.com/cool" TITLE="Cool">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.
  </BODY>
</HTML>

上の例において、スタイルシートをHTML文書に組み込む4通りの方法を示した。 LINK要素で外部スタイルシートをリンクする方法、HEAD要素内にSTYLE要素を記述する方法、'@import'構文を用いた方法、BODY内部の要素にstyle属性を付ける方法、以上の4通りである。 後ろに示した方法ほど内容と体裁の混在を招き、伝統的なスタイルシートの利点が失われる。

LINK要素は、代替スタイルシートを選択する余地をユーザに与える。 一方、@importによって取り込まれたスタイルシートは自動的に他のスタイルシートに結合される。

ユーザエージェントには未知のタグを無視するという慣習があった。 旧式のユーザエージェントはSTYLE要素を認識しないだろうから、その内容は文書の一部として表示されてしまう。 スタイルシートが普及する間、STYLE要素の内容はSGML式コメントとして隠すとよい:

  <STYLE TYPE="text/css"><!--
    H1 { color: green }
  --></STYLE>

STYLE要素はDTDでCDATAとして宣言されている([HTML]参照)ので、SGML適合パーサが上記のスタイルシートをコメントとして取り除いてしまうことはない。

1.2 グループ化(Grouping)

スタイルシートの小さくするために、複数のセレクタをコンマで区切ってグループ化してよい:

  H1, H2, H3 { font-family: helvetica }

同様に宣言もグループ化してよい:

  H1 { 
    font-weight: bold; 
    font-size: 12pt;
    line-height: 14pt; 
    font-family: helvetica; 
    font-variant: normal;
    font-style: normal;
  }

更に、プロパティによってはグループ化のために独自の構文を持っている場合もある:

  H1 { font: bold 12pt/14pt helvetica }

この宣言は1つ前に示した宣言の羅列と等価である

1.3 継承(Inheritance)

仕様の冒頭でH1要素の色を青に設定する例を示した。 今度は、内部にEM要素を伴うH1要素を考えてみよう:

  <H1>The headline <EM>is</EM> important!</H1>

もしEM要素に色が設定されていなければ「is」という強調文字列は親要素の色を継承して青になるだろう。 他にも同様に値を継承するプロパティがある(たとえば'font-family''font-size'など)。

文書のデフォルトとなるスタイルを設定するには、あらゆる可視要素のルートに当たる要素にプロパティを設定するとよい。 HTML文書では、BODY要素がこの役割を担う:

  BODY { 
    color: black;
    background: url(texture.gif) white;
  }

HTMLパーサは省略タグを補うので、上の規則はBODYタグが記述されない場合でも機能する(BODYの省略は不正ではない)。 上の例では前景色を黒に、背景に画像を設定している。 背景画像が利用不可能な場合は白い背景になる(詳細は[5.3. 色と背景のプロパティ]を参照のこと)。

プロパティによっては親要素から子供要素に値を継承しない場合もある。 その理由は非常に直観的な場合が多い。 たとえば'background'は継承性を持たないが、デフォルトでは親要素の背景が透けるので実質はそう変わりない。

他のプロパティを相対参照するパーセント値というものもある:

  P { font-size: 10pt }
  P { line-height: 120% }  /* relative to 'font-size', i.e. 12pt */

パーセント値を取れる各プロパティには、各々どのプロパティを相対参照するのかが定められている。 この場合、P要素の子供要素はパーセント値を継承するのではなく、'line-height'の算出値を継承する(上の例では'120%'ではなく'12pt'を継承する)。

1.4 クラスセレクタ(Class as selector)

要素をより詳細に制御するために、[HTML]に新しくclass属性が加わった。 BODY要素の内部にあるすべての要素にclass属性を指定することができ、その値はスタイルシートから参照可能になっている:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
    H1.pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=pastoral>Way too green</H1>
 </BODY>
</HTML>

クラスを与えられた要素でも継承規則には通常通りに従い、文書構造の親要素から値を継承する。

また、セレクタの中でタグ名を省略すると、同じクラスに属するすべての要素を参照することが可能である:

  .pastoral { color: green }  /* all elements with CLASS pastoral */

1つのセレクタに取り付けられるクラスは1つだけである。 したがって「P.pastoral.marine」というセレクタはCSS1では不正である(後で説明する文脈セレクタでは、各単純セレクタに対して1つずつクラスを指定できる)。

CSSではclass属性が大変強力なので、多くの場合どのHTML要素にクラスを与えるかは問題にさえならず、他のどの要素にも劣らない便利な要素を作り出すことができる。 しかし、この力に依存することは、普遍的意味を持つ構造(HTML要素)の水準を下げることに繋がるのであまり奨められない。 class属性に依存した構造は、クラスの意味に合意が取れている限られた範囲内においてのみ有効なのである。

1.5 一意セレクタ(ID as selector)

ある要素が文書を通じて一意性を持つ手段として、[HTML]にはidという属性も導入された。 これによってセレクタに特別な重要性を与えることができる。 一意属性はシャープ記号(#)を伴う形でセレクタに取り込める:

  #z98y { letter-spacing: 0.3em }
  H1#z98y { letter-spacing: 0.5em }

  <P ID=z98y>Wide text</P>

上の例において、前者のセレクタはid属性によってP要素とマッチする。 それに対して後者のセレクタは要素名と一意属性値を両方指定してあるので、P要素とマッチしない。

id属性をセレクタで利用すれば、個々の要素に細かく値を設定できる。 ただ、スタイルシートは文書構造の向上を目指して設計されたにも拘わらず、この方法だとHTMLの構造化要素を利用しなくてもキャンバス上に優れた見栄えを作り上げることができてしまう。 したがって、この手段を用いたスタイルシートは奨められない。

1.6 文脈セレクタ(Contextual selectors)

継承性はCSS設計の労力を省いてくれる。 全要素にプロパティ設定を行わずとも、デフォルトのスタイルを設定して例外だけを列挙すれば済むのである。 H1要素内部のEM要素に別の色を設定するには、次の様に指定するとよい:

  H1 { color: blue }
  EM { color: red }

このスタイルシートが有効な時、H1要素の内部であるかに関わらず、すべてのEM要素は色が赤になるだろう。 H1内部のEM要素だけ赤にしたければ、おそらく次の様に指定するとよい:

  H1 EM { color: red }

この時、セレクタは目的の要素を探し出すためのパターンを示しており、この種のセレクタは文脈セレクタ(contextual selector)と呼ばれる。 文脈セレクタは、空白類文字で区切られた複数の単純セレクタ(本仕様で今まで説明してきたセレクタはすべて単純セレクタである)から成る。 最後尾に来る単純セレクタ(この場合はEM)にマッチする要素の中で、なお且つ指定されたパターンを満たす要素のみが、文脈セレクタにマッチする。 CSS1の文脈セレクタは大まかな入れ子関係しか表現できないが、次版以降では他の関係(たとえば親子関係)も表現できるだろう。 上の例では、H1要素の子孫であるEM要素(つまりEM要素がH1要素の内部にある場合)にマッチする。

  UL LI    { font-size: small }    
  UL UL LI { font-size: x-small }

この例で、前者のセレクタは、祖先部に少なくとも1つのUL要素が存在するLI要素にマッチする。 それに対して後者は、前者にマッチする要素の中でも特に、祖先部に少なくとも2つULを持っているLI要素にマッチする。 この両者は競合は、後者のパターンの方がより長くて詳細であることから解決する。 セレクタの競合についての詳細は[3.2. カスケード処理の順序]を参照のこと。

文脈セレクタ内では、要素名、class属性,id属性、及びこれらの組合わせを用いることができる:

  DIV P           { font: small sans-serif }
  .reddish H1     { color: red }
  #x78y CODE      { background: blue }
  DIV.sidenote H1 { font-size: large }

以上の4例は各々以下にマッチする:
1つめは祖先部にDIV要素が存在するP要素。 2つめは祖先部にreddishクラスの要素を持つH1要素。 3つめは祖先部に一意属性値「x78y」の要素を持つCODE要素。 4つめは祖先部にsidenoteクラスのDIV要素が存在するH1要素。

複数の文脈セレクタをグループ化することもできる:

  H1 B, H2 B, H1 EM, H2 EM { color: red }

これは以下と等価である:

  H1 B { color: red }
  H2 B { color: red }
  H1 EM { color: red }
  H2 EM { color: red }

1.7 コメント(Comments)

CSSスタイルシートのコメント区切り子は[C言語]と同様である:

  EM { color: red }  /* 赤、赤だってば!! */

コメントは入れ子にできない。 CSS1パーサはコメントを空白類文字として扱う。

2 疑似クラスと疑似要素(Pseudo-classes and pseudo-elements)

CSS1のスタイル設定は、木構造内での要素の位置に基づいて行われる。 多くの場合はこの単純なモデルで十分なスタイル設定が可能だが、平易な効果でもカバーできないものがある。 疑似クラス及び疑似要素の概念は、CSS1セレクタの要素特定方法を拡張し、外部情報を用いたスタイル設定を可能にする。

疑似クラス及び疑似要素はCSSのセレクタ内で使用できるが、HTMLソース内に対応する記述は無い。 寧ろこれらは、スタイルシートが位置特定を行うために、状況に応じてユーザエージェントが挿入するものである。 これらを「クラス」「要素」と呼んでいるのは働きを説明するのに都合が良いからで、その詳しい働きは仮想タグを用いて定められる。

疑似要素はある要素の一部を参照するのに用いられ、疑似クラスは要素を異なる視点で分類するのに用いられる。

2.1 アンカー疑似クラス(Anchor pseudo-classes)

ユーザエージェントは通常、閲覧したばかりのアンカーと大分前に閲覧したアンカーを区別して表示する。 CSS1では、A要素の疑似クラスでこの区別を扱える。

  A:link { color: red }       /* 未訪のリンク */
  A:visited { color: blue }   /* 既訪のリンク */
  A:active { color: lime }    /* 動作中のリンク */

href属性を持つすべてのA要素は、常にこれらのうちいずれか1つの状態に分類されるだろう(リンク対象としてのアンカーには無効である)。 一定時間が経つと、ユーザエージェントはアンカーを'visited'から'link'の状態に戻してもよい。 また、'active'とはユーザによって現在選択状態にあるアンカーを意味する(たとえばマウスで押されている状態)。

アンカー疑似クラスは、アンカー要素にクラスが手動で挿入されたかの様に整形される。 ユーザエージェントは、疑似クラスの変化に伴って現在表示されている文書を再整形する必要はない。 たとえば、':active'リンクのフォントサイズを':visited'リンクより大きく指定することはできるが、アンカー選択時にユーザエージェントが動的に文書を更新する必要はない。

疑似クラスは通常のクラスとマッチしない。 逆もまた同様である。 したがって下の例は何の効果も無い:

  A:link { color: red }

  <A CLASS="link" NAME="target5"> ... </A>

CSS1のアンカー疑似クラスは、A要素以外には無効である。 したがってセレクタの要素名を省略できる:

  A:link { color: red }
  :link { color: red }

CSS1では、上の両セレクタは同じ要素を指す。

疑似クラス名は大文字と小文字を区別しない。

疑似クラスは文脈セレクタと組み合わせることができる:

  A:link IMG { border: solid blue }

通常のクラスとも組み合わせることができる:

  A.external:visited { color: blue }

  <A CLASS=external HREF="http://out.side/">external link</A>

この例のリンクが閲覧済みであれば、表示時の文字色は青になる。 セレクタには通常のクラスを先に、疑似クラスを後に書くことに注意せよ。

2.2 印刷術的疑似要素(Typographical pseudo-elements)

平易な印刷術効果の中には、文書構造ではなく、キャンバスに整形する際の体裁に関連するものがある。 CSS1では、これらの印刷術効果のうち2つを疑似要素で操作できる。 すなわち、要素の1行目1文字目である。

CSS1コア: ユーザエージェントはセレクタ内に'first-line'あるいは'first-letter'を含む全規則を無視してよい。 あるいは、プロパティの一部をサポートするだけでもよい。 そのことは不適合を意味しない。

2.3 :first-line疑似要素(The 'first-line' pseudo-element)

'first-line'疑似要素は、要素をキャンバスに整形した時の1行目に特別なスタイルを適用する:

  <STYLE TYPE="text/css">
    P:first-line { font-variant: small-caps }
  </STYLE>

  <P>The first line of an article in Newsweek.

テキスト中心のユーザエージェントなら、これを次の様に整形する:

  THE FIRST LINE OF AN
  article in Newsweek.

仮想タグは以下の様になる:

  <P>
  <P:first-line>
  The first line of an 
  </P:first-line>
  article in Newsweek.
  </P>

'first-line'の終了タグは、キャンバス上に整形した時の1行目末尾に挿入される。

'first-line'疑似要素はブロック要素にのみ取り付けられる。

'first-line'疑似要素は、インライン要素に類似しているがある制約を受ける。 'first-line'に適用できるのは以下に挙げるプロパティのみである:
[5.2. フォントのプロパティ][5.3. 色と背景のプロパティ][5.4.1. 'word-spacing'][5.4.2. 'letter-spacing'][5.4.3. 'text-decoration'][5.4.4. 'vertical-align'][5.4.5. 'text-transform'][5.4.8. 'line-height'][5.5.26. 'clear']

2.4 :first-letter疑似要素(The 'first-letter' pseudo-element)

疑似要素'first-letter'は、「initial caps」「drop caps」などと呼ばれる、平易な印刷術効果を実現するのに利用する。 'first-letter''float'の値が'none'であればインライン要素扱い、それ以外の時はフロート要素扱いになる。 'first-letter'に適用可能なプロパティを以下に挙げる:
[5.2. フォントのプロパティ][5.3. 色と背景のプロパティ][5.4.3. 'text-decoration'][5.4.4. 'vertical-align']'float'の値が'none'である場合のみ)、[5.4.5. 'text-transform'][5.4.8. 'line-height'][5.5.1-5.5.5. マージンのプロパティ][5.5.6-5.5.10. パディングのプロパティ][5.5.11-5.5.22. ボーダーのプロパティ][5.5.25. 'float'][5.5.26. 'clear']

以下では先頭文字を2行に亘って強調している:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
 </BODY>
</HTML>

この疑似要素に対応しているテキスト中心のユーザエージェントなら次の様に整形する:

  ___
   | HE FIRST few
   | words of an 
  article in the
  Economist.

仮想タグは次の様になる:

  <P>
  <SPAN>
  <P:first-letter>
  T
  </P:first-letter>he first
  </SPAN> 
  few words of an article in the Economist.
  </P>

'first-letter'のタグが内容(つまり先頭文字)の前後に挿入されることに注意せよ。 'first-line'の場合はこれとは異なり、疑似要素を取り付けた要素の開始タグ直後に'first-line'の開始タグが挿入される。

どの文字までを'first-letter'疑似要素に含むかはユーザエージェント次第である。 通常、先頭文字の前に来る引用符は含むべきである:

  ||   /\    bird in 
      /  \   the hand
     /----\  is worth
    /      \ two in
  the bush," says an 
  old proverb.

段落がこの他の記号類(たとえば各種括弧や省略符号)や、一般に文字とみなされないもの(たとえば数字や数学記号)で始まる場合、'first-letter'疑似要素は無視される。

言語によっては特定の文字列を1つにまとめて扱うことがある。 たとえばオランダ語では、単語の先頭に来る「ij」という文字列は'first-letter'疑似要素内にまとめて入れるべきである。

'first-letter'疑似要素はブロック要素にのみ取り付けられる。

2.5 セレクタ内の疑似要素(Pseudo-elements in selectors)

文脈セレクタには、セレクタの末尾にのみ疑似要素を取り付けることができる:

  BODY P:first-letter { color: purple }

疑似要素はクラスセレクタと組み合わせることができる:

  P.initial:first-letter { color: red }

  <P CLASS=initial>First paragraph</A>

この例では、「class="initial"」であるP要素の先頭文字色が赤になる。 疑似要素を通常のクラスや疑似クラスと組み合わせる場合は、疑似要素をセレクタの末尾に付けなければならない。 1つのセレクタにつき疑似要素を1つだけ指定できる。

2.6 疑似要素の複合(Multiple pseudo-elements)

疑似要素は複数組み合わせることができる:

  P { color: red; font-size: 12pt }
  P:first-letter { color: green; font-size: 200% }
  P:first-line { color: blue }

  <P>Some text that ends up on two lines</P>

この例では、P要素の先頭文字をフォントサイズ24ptの緑色にする。 キャンバス上に整形された第1行のうち、先頭文字以外は青になる。 そして段落の残りの部分は赤になる。 ここで「ends」という単語の直前に改行があると仮定しよう。 仮想タグは次の様になる:

  <P>
  <P:first-line>
  <P:first-letter> 
  S 
  </P:first-letter>ome text that 
  </P:first-line> 
  ends up on two lines 
  </P>

'first-letter''first-line'の内側に入ることに注意する。 これによって'first-line'に設定した値は'first-letter'に継承されるが、それらは'first-letter'に同じプロパティを設定してやれば上書きされる。

もし疑似要素が通常の要素を分断する場合は、仮想タグ内に必要なタグを追加しなければならない。 たとえば、SPAN要素が</P:first-line>タグをまたぐ時は、SPANの終了タグと開始タグを新たに生成する必要がある。 仮想タグは以下の様になる:

  <P>
  <P:first-line>
  <SPAN> 
  This text is inside a long 
  </SPAN>
  </P:first-line>
  <SPAN> 
  span element 
  </SPAN>

3 カスケード処理(The cascade)

CSSでは複数のスタイルシートで同時に体裁を扱えるが、これには主に2つの理由がある。 第1にスタイルシートをモジュール化できること、そして第2に文書作成者とユーザの釣り合いがとれることである。

モジュール化(modularity)
複数の部分的スタイルシートを組み合わせて記述の余分な重複を省くことができる:
  @import url(http://www.style.org/pastoral);
  @import url(http://www.style.org/marine);

  H1 { color: red }     /* override imported sheets */
文書作成者とユーザの釣り合い
文書作成者とユーザは、両者共がスタイルシートを通して体裁を操作できる。 それによって、両者が同じスタイル言語を用いることになり、誰もが情報発信者になれるというWebの基本的特徴を反映することになる。 個々人のスタイルシートを参照する方法についてはユーザエージェントに委ねられる。

複数のスタイルシート間ではしばしば競合が生じるだろう。 この競合は、各規則の優先度に基づいて解決する。 デフォルトでは、ユーザ側の規則が文書作成者側の規則よりも優先度が低くなっている。 すなわち、もし文書内で指定されたスタイルシートとユーザ個人のスタイルシートが競合を起こす場合には、文書作成者側の規則が適用されることになるだろう。 また、文書作成者の規則もユーザの規則も、ユーザエージェントのデフォルト値より優先する。

インポートされるスタイルシート同士もまた、インポートされる順に以下の章に定めるカスケード処理規則に従う。 主体のスタイルシートに指定された規則は、インポートされるスタイルシートの規則を上書きする。 すなわち、インポートされるスタイルシートは、主体のスタイルシートよりもカスケード処理順序が低いということである。 また、インポートされるスタイルシート自身も更に別のスタイルシートをインポートでき、同様にインポートされる側の規則を上書きする。

CSS1では、すべての@import文をあらゆる宣言より前、すなわちスタイルシートの先頭に記述しなければならない。 これによって、インポートする側とされる側の上書き関係が理解し易くなる。

3.1 最重要指定('important')

スタイルシート設計者は宣言の優先度を高めることができる:

  H1 { color: black ! important; background: white ! important }
  P  { font-size: 12pt ! important; font-style: italic }

この例では、最初の3つの宣言が高い優先度になり、最後の宣言が通常の優先度になっている。

ユーザ指定の最重要規則は、文書作成者の通常規則を上書きする。 一方文書作成者の最重要規則は、ユーザ指定の最重要規則を上書きする。

3.2 カスケード処理の順序(Cascading order)

規則同士の競合はCSSの仕組みに内在する問題である。 ある要素とプロパティの組み合わせに対する値をみつけるには、以下のアルゴリズムに従う必要がある:

  1. 問題の要素とプロパティに適用されるすべての宣言を検索する。 適用される宣言とは、そのセレクタが問題の要素とマッチする宣言である。 適用される宣言が存在しない場合は継承値を用いる。 更に継承値も存在しない場合は初期値を用いる。
  2. 明らかな優先度の差に基づいて宣言をソートする。 すなわち最重要指定された宣言が通常の宣言より優先する。
  3. 宣言の出所に基づいてソートする。 文書作成者のスタイルシートはユーザのそれより優先され、更にユーザのスタイルシートはユーザエージェントのデフォルトより優先される。 インポートされるスタイルシートは主体のスタイルシートと同じ出所になる。
  4. セレクタの詳細度に基づいてソートする。 より詳細なセレクタが一般的なセレクタを上書きする。 詳細度を算出するには、まずセレクタ内の一意属性を数える(その数をaとする)。 次にセレクタ内のクラス名を数える(その数をbとする)。 そしてセレクタ内のタグ名を数える(その数をcとする)。 以上3つの数字を1列に並べたものが詳細度になる。 但し十分大きな基数の記進法で考えるものとする。 例を挙げると:
      LI            {...}  /* a=0 b=0 c=1 -> 詳細度 =   1 */
      UL LI         {...}  /* a=0 b=0 c=2 -> 詳細度 =   2 */
      UL OL LI      {...}  /* a=0 b=0 c=3 -> 詳細度 =   3 */
      LI.red        {...}  /* a=0 b=1 c=1 -> 詳細度 =  11 */
      UL OL LI.red  {...}  /* a=0 b=1 c=3 -> 詳細度 =  13 */ 
      #x34y         {...}  /* a=1 b=0 c=0 -> 詳細度 = 100 */ 
    
    疑似要素及び疑似クラスは、それぞれ通常の要素及びクラスとして数える。
  5. 指定順序に基づいてソートする。 複数の規則が同じ優先度である場合、より後に指定された規則が優先する。 インポートされたスタイルシート内の規則は、主体のスタイルシートに記述されたすべての規則より前にあるとみなす。

以上に掲げた過程の途中である規則が他の適用可能な規則より高い優先度になれば、その時点でアルゴリズムを抜けてよい。

この方法は、ユーザよりも文書作成者のスタイルシートにかなり高い優先権を付与している。 したがって、ユーザが(たとえばプルダウンメニューなどで)あるスタイルシートの効果の有無を切り換えられるのは重要なことである。

要素内のstyle属性による宣言(例は[1.1. HTMLへの導入]を参照)は、スタイルシート最後尾にある一意セレクタと同じ優先度を持つ:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

上に示した例では、P要素の前景色が赤になるだろう。 どちらの宣言もセレクタの詳細度は同じだが、カスケード処理規則の5番に従えば、style属性の宣言がSTYLE要素の宣言を上書きすることになる。

ユーザエージェントは、align属性の様に体裁を指定するHTML属性を尊重することもある。 これらの属性は詳細度1の対応するCSS規則に置き換えて考える。 また、その置き換えられた規則は文書作成者のスタイルシートの先頭にあるとみなし、それ以降に続く規則で上書きできる。 スタイルシートが普及する間、この方針で体裁関連の属性とスタイルシートとの共存を容易にできる。

4 整形モデル(Formatting model)

CSS1では、整形対象となる各要素が1つ以上の矩形ボックスを生成するという、単純なボックス指向の整形モデルを想定している(ただし'display'の値が'none'である要素は整形されず、したがってボックスも生成しない)。 すべてのボックスは中心部に内容領域を、その周りにパディング、ボーダー、マージンといった周辺領域を有することが可能である。

    _______________________________________
   |                                       |
   |           margin (transparent)        |
   |   _________________________________   |
   |  |                                 |  |
   |  |        border                   |  |
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |     padding               |  |  |
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |  content            |  |  |  |
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|

            |    element width    |

   |               box width               |

各周辺領域の大きさは各々プロパティで指定できる([5.5.1-5.5.5. margin], [5.5.6-5.5.10. padding], [5.5.11-5.5.22. border])。 パディング領域には要素自身と同じ背景を用いる([5.3.2-5.3.7. background properties]で設定する)。 また、ボーダーの色及び形式を'border'プロパティで指定できる。 マージン領域は、常に透明なので親要素が透けて見える。

ボックスの大きさは、要素の幅(つまり整形済みのテキストや画像の幅)、パディング、マージン、そしてボーダー領域の合計になる。

フォーマッタから見ると要素は主に2つの種類に大別される。 ブロック要素とインライン要素である。

4.1 ブロック要素(Block-level elements)

'display'の値が'block'もしくは'list-item'である要素をブロック要素(block-level elements)と言う。 また、フロート要素('float'の値が'none'以外である要素)もブロック要素とみなす。

次例では、マージン及びパディングが、2つの子供要素を持つUL要素をどう整形するかを示している。 図を見易くするためにボーダーは省いてある。 なお、この例において文字定数を用いているのは正式な文法ではなく、図とスタイルシートの関連付けに便宜を図っているに過ぎない。

    <STYLE TYPE="text/css">
      UL { 
        background: red; 
        margin: A B C D;      
        padding: E F G H;
      }
      LI { 
        color: white;    
        background: blue;     /* だから青地に白字だよ */ 
        margin: a b c d; 
        padding: e f g h;
      }
    </STYLE>
    ..
    <UL>
      <LI>1st element of list
      <LI>2nd element of list
    </UL>
   _______________________________________________________
  |                                                       |
  |    A      UL margin (transparent)                     |
  |    _______________________________________________    |
  | D |                                               | B |
  |   |    E   UL padding (red)                       |   |
  |   |    _______________________________________    |   |
  |   | H |                                       | F |   |
  |   |   |    a   LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   | d |                               | b |   |   |
  |   |   |   |    e    LI padding (blue)     |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  1st element of list      f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |     max(a, c)                         |   |   | <- note the max
  |   |   |    _______________________________    |   |   |
  |   |   |   |                               |   |   |   |
  |   |   | d |    e    LI padding (blue)     |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  2nd element of list      f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |   c    LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |_______________________________________|   |   |
  |   |                                               |   |
  |   |    G                                          |   |
  |   |_______________________________________________|   |
  |                                                       |
  |   C                                                   |
  |_______________________________________________________|

文法上、パディング及びマージンのプロパティは継承性を持たない。 しかし上の例が示すように、要素の位置は祖先要素や兄弟要素に対して相対的に決まるので、パディングやマージンのプロパティは子供要素にも影響を及ぼすことになる。

上の例でボーダーがあるとすれば、パディングとマージンの間に現れる。

次の図を見てみよう。 以下の説明ではこの図に示した用語を導入する: 【訳注:対応する訳語は、「top」が外上辺、「inner top」が内上辺、「left outer edge」が外左辺など、以下同様に訳出する。】

                               --------------- <-- top
                                 top margin
                               ---------------
                                 top border
                               ---------------
                                top padding
                               +-------------+ <-- inner top
    |        |        |        |             |         |         |         |
    |--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
    | margin | border | padding|             | padding | border  | margin  |
    |        |        |        |             |         |         |         |
                               +-------------+ <-- inner bottom
    ^                          ^             ^                             ^
    left         left inner edge             right inner edge          right
    outer                                                              outer
    edge                        bottom padding                          edge
                               ---------------
                                 bottom border
                               ---------------
                                 bottom margin
                               --------------- <-- bottom

外左辺(left outer edge)とは、周辺領域も含めた要素全体の左辺を指す。 内左辺(left inner edge)とは、周辺領域の内側にある内容領域の左辺を指す。 右辺についても同様である。 外上辺(top)とは、周辺領域も含めた要素全体の上辺を指す。 外上辺はインライン要素とフロート要素に対してのみ定義し、フロートしないブロック要素には定義しない。 内上辺(inner top)とは、周辺領域の内側にある内容領域の上辺を指す。 外下辺(bottom)とは、周辺領域も含めた要素全体の下辺を指す。 外下辺はインライン要素とフロート要素に対してのみ定義し、フロートしないブロック要素には定義しない。 内下辺(inner top)とは、周辺領域の内側にある内容領域の下辺を指す。

要素の幅(width)とは内容領域の幅のことであり、内左辺と内右辺の距離を指す。 同様に高さ(height)とは内容領域の高さのことであり、内上辺と内下辺の距離を指す。

4.1.1 垂直方向の整形(Vertical formatting)

フロートしないブロック要素のマージン幅は、周囲のボックス辺との最小距離を示している。 2つ以上の隣接する垂直マージンがある(すなわちマージン同士の間にボーダー、パディング、内容が無い)時、それらは相殺し合って最も大きなマージン幅が用いられる。 大抵の場合、垂直マージンが相殺し合った後の方が視覚的により優れたものになり、設計者の意図に近いデザインになる。 上の例では、2つのLI要素間にあるマージンが相殺され、前方のLI要素の'margin-bottom'の値と、後方のLI要素の'margin-top'の値のうち、大きい方の値が用いられる。 同様に、UL要素と1つ目のLI要素の間にパディング(図中のE)が無ければ、その間にあるマージンが相殺されただろう。

隣接する垂直マージンに負の値が混在する場合、最大値と最小値を足し合わせた値をマージン幅に用いる。 また、隣接するすべての垂直マージンが負の値である場合、最小値をマージン幅に用いる。

4.1.2 水平方向の整形(Horizontal formatting)

フロートしないブロック要素の、水平位置と大きさを決めるプロパティは7種類ある:
'margin-left''border-left''padding-left''width''padding-right''border-right''margin-right'
これら7つの値の合計は、常に親要素の'width'プロパティ値と等しくなる。

デフォルトでは'width'のプロパティ値は'auto'である。 これはすなわち、置換要素以外の'width'プロパティ値はユーザエージェントが算出するという意味であり、上に挙げた7つのプロパティ値の合計が親要素の幅と等しくなるようにするのである。 置換要素の場合、'width'の値'auto'は自動的に要素の内在寸法に置き換えられる。

これら7種類のプロパティのうち、'margin-left''width''margin-right'の3つは値に'auto'を設定できる。 置換要素の場合'width'の値'auto'は内在寸法に置き換わるので、実質的には残り2つのプロパティにのみ'auto'を設定できる。

'width'の値には、ユーザエージェントが定める負でない最小値がある。 この最小値は要素ごとに異なる場合もあるし、他のプロパティに依存することもある。 'width'がこの最小値より小さく指定されている場合や、以下の規則に従って'auto'の値を計算した結果が最小値を下回る場合は、代わりに最小値を用いることになる。

'margin-left''width''margin-right'のうちいずれか1つが'auto'であれば、ユーザエージェントは上記7つのプロパティ値の合計が親要素の幅と等しくなるように値を算出する。

これら3つのプロパティがいずれも'auto'でなければ、強制的に'margin-right'を'auto'に設定する。

これら3つのプロパティのうち'width'を含む2つ以上が'auto'であれば、'width'以外の'auto'はゼロに設定され、'width'の'auto'だけは、上記7つのプロパティ値の合計が親要素の幅と等しくなるように値を算出する。

これら3つのプロパティのうち、'margin-left''margin-right'が'auto'であれば、この両者は同じ値に設定される。 すなわちこの場合、要素は親要素内部でセンタリングされることになる。

以上の規則はフロートしないブロック要素についてである。 インライン要素あるいはフロート要素において上記7つのプロパティに'auto'という値があれば、その値はゼロとして扱われる。

垂直方向のマージンと違って、水平方向のマージンは相殺されない。

4.1.3 リスト要素(List-item elements)

'display'の値が'list-item'である要素はブロック要素として整形されるが、自身の前にリスト項目のマーカーが付く。 マーカーの種類は'list-style(-type)'プロパティで決まり、マーカーの位置は'list-style(-position)'プロパティで決まる:

  <STYLE TYPE="text/css">
    UL         { list-style: outside }
    UL.compact { list-style: inside }
  </STYLE>
  
  <UL>
    <LI>first list item comes first
    <LI>second list item comes second
  </UL>

  <UL CLASS=COMPACT>
    <LI>first list item comes first
    <LI>second list item comes second
  </UL>

これは次の様に整形される:

* first list item 
  comes first

* second list item
  comes second

  * first list
  item comes first

  * second list
  item comes second

書字方向が右から左なら、マーカーはボックスの右側に位置することになる。

4.1.4 フロート要素(Floating elements)

'float'プロパティを用いると、通常フローに属さない(outside the normal flow)要素を宣言でき、その要素はブロック要素として整形される。 たとえば、ある画像の'float'プロパティを'left'に設定すれば、この画像は他のブロック要素の周辺領域にぶつかるところまで左に寄せられる。 そして、通常フローはその右側を回り込んでいくことになる。 フロート要素自体のマージン、ボーダー、パディングなどは尊重されることとなり、隣接するマージンとの相殺は決して起こらない。

フロート要素は次の制約に従って配置される(用語に説明については[4.1. ブロック要素]を参照のこと):

  1. 左にフロートした要素の外左辺は、親要素の内左辺よりも左にきてはならない。 右にフロートした要素についても同様である。
  2. 左にフロートした要素について、その外左辺がソース内でそれ以前に出現するすべての左フロート要素の外右辺より左であるか、そうでなければ要素の外上辺(top)がソース内でそれ以前に出現するすべての左フロート要素の外下辺より下でなければならない。 右にフロートする要素についても同様である。
  3. 左にフロートした要素の外右辺は、その真右にある右フロート要素の外左辺よりも右にきてはならない。 右にフロートする要素についても同様である。
  4. フロート要素の外上辺は、親要素の内上辺より上にきてはならない。
  5. フロート要素の外上辺は、ソース内でそれ以前に出現するフロート要素あるいはブロック要素の外上辺より上にきてはならない。
  6. フロート要素の外上辺は、ソース内でそれ以前に出現する内容を伴う行ボックス[4.4. 行の高さ]を参照のこと)より上にきてはならない。
  7. フロート要素は(これらの制約の中で)できる限り上に位置しなければならない。
  8. 左にフロートした要素はできる限り左に、右にフロートした要素はできる限り右に寄せなければならない。 ただし、左寄せ右寄せよりは、できる限り上寄せをすることの方が優先する。
  <STYLE TYPE="text/css">
    IMG { float: left }
    BODY, P, IMG { margin: 2em }
  </STYLE>

  <BODY>
    <P>
      <IMG SRC=img.gif>
      Some sample text that has no other...
  </BODY>

この例は次の様に整形される:

   ________________________________________
  |
  |          max(BODY margin, P margin)
  |          ______________________________
  |    |    |             Some sample text
  | B  | P  | IMG margins that has no other
  | O  |    |    _____    purpose than to 
  | D  | m  |   |     |   show how floating
  | Y  | a  |   | IMG |   elements are moved
  |    | r  |   |     |   to the side of the
  | m  | g  |   |_____|   parent element
  | a  | i  |             while honoring
  | r  | n  |             margins, borders
  | g  |    |             and padding. Note
  | i  |    |how adjacent vertical margins  
  | n  |    |are collapsed between non-
  |    |    |floating block-level elements.

P要素のマージンがフロートしたIMG要素を囲っているのに注意されたい。

フロート要素と他の要素の周辺領域が重なる状況は2通り考えられる:

4.2 インライン要素(Inline elements)

ブロック要素として整形されない要素を、インライン要素(inline element)と言う。 インライン要素は他の要素と同じ行を共有できる。 たとえばこんな例を考えてみよう:

  <P>Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.</P>

P要素は通常ブロックレベル、一方EM要素とSTRONG要素はインラインである。 P要素の幅がその内容をすべて1行に整形するのに十分な大きさであれば、1行に2つのインライン要素があることになる:

  Several emphasized words appear.

内容を1行に収めるだけの余地がなければ、インライン要素が複数のボックスに分割されることになる:

  <P>Several <EM>emphasized words</EM> appear here.</P>

たとえば次の様に整形される:

  Several emphasized
  words appear here.

分割された要素がマージン、ボーダー、パディングやテキスト装飾を有している場合、それらの効果は要素の分割面には現れない:

           ----------
  Several |emphasized
           ----------
  -----
  words| appear here.
  -----

(上の図はASCIIアートなので実際とはやや違ったイメージになっている。 行の高さの算出方法については[4.4. 行の高さ]を参照のこと)

4.3 置換要素(Replaced elements)

指定された内容と置き換わる要素のことを置換要素(replaced element)と言う。 たとえばHTMLだと、IMG要素はsrc属性が指し示す画像に置き換わる。 置換要素は、他の状況に依存しない内在寸法を有していると想定できる。 もし置換要素の'width'プロパティ値が'auto'なら、内在寸法が要素の幅(と高さ)として用いられる。 また、'auto'以外の値がスタイルシートで指定されていれば、その値が用いられ、置換要素はその寸法に従ってリサイズされる(リサイズの方法はメディアタイプによる)。 'height'プロパティも同様にして用いられる。

置換要素はブロックレベル、インラインのどちらにも成り得る。

4.4 行の高さ(The height of lines)

すべての要素は'line-height'プロパティを持ち、原則的にはこれによってテキスト1行の高さが決まる。 指定された行の高さになるように、テキストの上下にスペースが追加される。 たとえば、テキストの高さが12ptで'line-height'プロパティを'14pt'に設定したとすると、足りない2pt分を補うために、行の上下にそれぞれ1pt分のスペースが挿入される。 空要素でも、内容のある要素と同様にこの計算を行う。

フォントサイズと'line-height'の値の差を行間(leading)と呼ぶ。 また行間の半分を、半行間(half-leading)と呼ぶ。 整形された後、各行は矩形の行ボックス(line-box)を形作ることになる。

1行のテキスト内に'line-height'の値が異なる複数の要素が存在する時は、各部分がそれぞれに半行間を有する。 行ボックスの高さは、行中で最も高く位置する部分から、最も低く位置する部分までの距離になる。 ここで注意すべきは、この最も高い位置と低い位置というのが、必ずしも最も高さのある要素のそれに対応するとは限らないということである。 なぜなら、'vertical-align'プロパティで各要素の垂直位置を調整できるからである。 行ボックスを縦に隙間なく積み重ねることにより、段落を形作る。

非置換インライン要素においては、パディング、ボーダー、マージンなどの各周辺領域は行の高さに影響しない。 言い換えると、もし'line-height'の値がパディングやボーダーに対して小さすぎる場合は、それらの周辺領域は前後の行に重なって表示されるということである。

ある行において、置換要素(画像など)の外上辺がテキストの最上部よりも上に位置する場合、もしくは置換要素の外下辺がテキストの外下部よりも下に位置する場合、その分行ボックスが大きくなってしまってもよい。

段落を通して'line-height'の値が一定であり、行中に大きい画像も出現しないような通常の状況では、隣接ベースライン間距離は正確に'line-height'と等しくなることが保証される。 このことは、たとえば表を扱う時の様に、異なるフォントの列を揃える必要がある場合はとても重要になる。

以上に示した定義は、隣接する2つの行が重なる可能性を排除するものではないことに注意されたい。 'line-height'は文字の大きさより小さい値を取ることもできるし、その場合行間は負になるのである。 このことは、たとえば文字列が大文字のみで書かているために、下に突き出た文字(アルファベットだとgjpqyなどの文字)が存在しないと解っている場合などに、無駄な行間をなくすのに有用である。

4.5 キャンバス(The canvas)

キャンバス(canvas)とは、ユーザエージェントが文書をレンダリングする描画面のことである。 キャンバスに対応する構造要素が存在しないために、文書を整形するに当たって2つの問題点が浮上する:

前者の問題については、キャンバスの初期幅をウィンドウ・サイズに基づいて決めるという方法が妥当なのであろうが、CSS1ではこの問題は保留してユーザエージェントに決定を委ねる。 また、ウィンドウのリサイズと同時にキャンバスの幅も変化して欲しいと考えるのはもっともなことであるが、こういった問題への考察は本仕様の対象外である。

後者の問題については、既にユーザエージェントの拡張HTMLに1つの方向性が見られる: BODY要素に背景の属性を設定すると,(BODY要素ではなku)キャンバス全体の背景が影響を受けるのである。 スタイルデザイナの期待を裏切らないように、CSS1ではキャンバスの背景を定める特別な規則を導入する:

HTML要素の'background'値が'transparent'以外だと、その値がキャンバスの背景になる。 HTML要素の'background'値が'transparent'だと、BODY要素の'background'値がキャンバスの背景になる。 HTML, BODYの両方の'background'値が'transparent'だと、キャンバスの背景は不定。

この規則によれば:

  <HTML STYLE="background: url(http://style.com/marble.png)">
  <BODY STYLE="background: red">

キャンバスの背景はmarble.pngという画像になる。 そしてBODY要素の背景は赤になる(多くの場合、このBODY要素の背景というのがキャンバス全体を覆ってしまって、キャンバスの背景が見えなくなる)。

キャンバスを参照する他の手段が使える様になるまで、キャンバスへのプロパティ設定はBODY要素で行うことを推奨する。

4.6 'BR'要素('BR' elements)

現在のCSS1仕様では、BR要素に代わる表現は不可能である。 HTMLでは、BR要素は改行を指定するので、効果としてはこの要素が改行と置き換わる、ということになる。 CSSの将来のバージョンでは内容の追加や置き換えを処理できるだろうが、今の所CSS1準拠のフォーマッタはBR要素を特別扱いしなければならない。

5 CSS1プロパティ(CSS1 properties)

スタイルシートは、各プロパティに値を割り当てることで文書の体裁を操作する。 この章では、CSS1で定められているプロパティとそれに対応する値の一覧を示す。

5.1 プロパティ値の表記法(Notation for property values)

以下の定義では、各プロパティに使える値は次の様な構文で記述する:

Value:   N | NW | NE
Value:   [ <length> | thick | thin ]{1,4}
Value:   [<family-name> , ]* <family-name>
Value:   <url>? <color> [ / <color> ]?
Value:   <url> || <color>

不等号で挟んだ単語は、値の種類を表している。 最も一般的な値の種類には<length>, <percentage>, <url>, <number>, <color>などがある。 これらは[6. 単位]で解説している。 これ以外の特別な値の種類(たとえば<font-family>, <border-style>など)については、該当するプロパティ定義の下で説明する。

値の種類以外の単語は、キーワードとして文字通りに出現しなければならない(ただし引用符は除く)。 スラッシュ(/)やコンマ(,)も、文字どおり出現しなければならない。

並記された複数の値は、すべてがその順番に出現しなければならない。 1本のバーで区切られた値(A | B)は、それらのうちいずれか1つが出現しなければならない。 2本のバーで区切られた値(A || B)は、それらのうち少なくとも1つが任意の順序で出現しなければならない。 大括弧([])はグループ化を表す。 これらの出現標識は、並記された値が最も優先的に解釈される。 続いて2本のバーが解釈され、最後に1本のバーが解釈される。 したがって、たとえば「a b | c || d e」という表記は、「[ a b ] | [ c || [ d e ]]」という表記と同じ意味になる。

あらゆる値の種類、キーワード、及びグループには、以下の様な修飾記号を取り付けられる:

5.2 フォントのプロパティ(Font properties)

フォントプロパティの設定は、スタイルシートの最も一般的な用法の1つであろう。 しかし残念なことに、フォントの分類には広くはっきりと認められた方法が存在せず、あるフォントファミリで使われている術語が、別のファミリでは通用しないことがある。 たとえば「italic」という術語は通常は斜体字を示すのに使われるが、斜体字を示す言葉には他にも「Oblique」「Slanted」「Incline」「Cursive」「Kursiv」などがある。 したがって、典型的なフォント選別の特徴に対してある特定のフォントを割り当てる作業は、単純なものではないのである。

CSS1では、フォントのプロパティとして'font-family''font-style''font-variant''font-weight''font-size''font'を定めている。

5.2.1 フォントのマッチング(Font matching)

フォントの分類には一般に広く認められた方法が存在しないので、プロパティとフォントのマッチングは慎重に行う必要がある。 (次に示す)明確な順序でのマッチングにより、異なるユーザエージェント間でもできる限り一貫した結果が保証される(ただし各ユーザエージェントが同じフォントを利用できることが前提)。

  1. ユーザエージェントは、自身が認識できるすべてのフォントについて、関連するプロパティのデータベースを作成する(又は既存のものにアクセスする)。 ここで言う認識できるフォントとは、既にローカルにインストールされているフォント、Webからダウンロード済みのフォントを指す。 2つのフォントがすべてのプロパティに同じ値を有する場合、一方を無視して考える。
  2. 対象の要素とその要素内の各文字について、指定されているすべてのフォント関連プロパティを検索する。 ユーザエージェントは、'font-family'の値の中からとりあえず仮のフォントファミリを1つ選択する。 そして、残りのプロパティが、選んだフォントファミリにとって適切かどうかを、各プロパティのマッチングの基準に従って検証する。 調べた結果すべてのプロパティがマッチすれば、そのフォントが対象の要素に適用される。
  3. 手順2で処理したフォントファミリにマッチする書体が存在せず、なおかつフォントセット内に次の代替フォントファミリが存在する場合、その代替ファミリについて手順2を繰り返す。
  4. 手順2でマッチするフォントが存在したものの、(要素内の)ある文字のグリフがそのフォントに含まれていない場合がある。 その時フォントセット内に次の代替フォントファミリが存在すれば、その代替フォントファミリについて手順2を繰り返す。 フォントや文字符号化方法については[C. 符号化方法]を参照のこと。
  5. 手順2でマッチするフォントがみつからなかった場合、ユーザエージェント標準のフォントファミリについて手順2を繰り返し、得られた最善のマッチングを適用する。

(以上のアルゴリズムを活用して、各文字に対するCSS1プロパティを何度も重複して調べる無駄を避けることができる)

手順2での各プロパティのマッチング規則は以下の通り:

  1. まず'font-style'のマッチングを行う。 値が'italic'である場合、データベース上での分類が「italic」(こちらが優先)もしくは「oblique」であるフォントにマッチする。 'italic'以外の値では、値とフォントの分類が正確にマッチしなければ、マッチングは失敗である。
  2. 次に'font-variant'のマッチングを行う。 値が'normal'である場合、データベース上で「small-caps」以外に分類されたフォントにマッチする。 値が'small-caps'である場合、以下の条件にマッチする。
    (1)データベース上で「small-caps」に分類されている。
    (2)スモールキャピタルを無理矢理合成できる。
    (3)すべての小文字に対応する大文字が存在する。 この場合スモールキャピタルは、大文字を縮小して合成できる。
  3. 次に'font-weight'のマッチングを行うが、これは決して失敗しない([5.2.5. 'font-weight']を参照のこと)。
  4. 最後に'font-size'のマッチングを行うが、その許容範囲はユーザエージェントにより異なる。 スケーラブル系フォントの大きさは最も近いピクセル値に丸められるので、マッチングは失敗しないのが一般的である。 一方、ビットマップ系フォントの許容範囲はせいせいサイズ差20%までだろう。 なお、他のプロパティでは、相対単位「em」など多くの計算が'font-size'の値を参照するが、参照されるのは指定値ではなく、実際に使われたフォントの大きさである。

5.2.2 'font-family'

Value:  [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial:  ユーザエージェント specific
Applies to:  all elements
Inherited:  yes
Percentage values:  N/A

値には、優先して用いるフォントファミリ名か総称ファミリ名を列記する。 他の殆どのCSS1プロパティと違って、代替値はコンマで区切って示す:

  BODY { font-family: gill, helvetica, sans-serif }

列記する値には2種類ある:

<family-name>
選択するフォントファミリ名。 上の例では'gill'、'helvetica'がこれに当たる。
<generic-family>
上の例では'sans-serif'がこれに当たる。 総称ファミリ名には以下のものが定義されている: スタイルシート設計者は、列記したフォントの最終選択肢として総称ファミリ名を指定しておくと良いだろう。

空白類文字を含むフォント名は引用符で括るべきである:

  BODY { font-family: "new century schoolbook", serif }
  
  <BODY STYLE="font-family: 'My own font', fantasy">

引用符を省略すると、フォント名前後の空白類文字は無視され、フォント名内部の連続する空白類文字は1文字分のスペースに変換される。

5.2.3 'font-style'

Value:  normal | italic | oblique
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentage values:  N/A

'font-style'プロパティは、フォントファミリ内から通常体、イタリック体、オブリーク体のいずれかを選択する。

'normal'という値は、データベース上で「normal」と分類されているフォントを選択する。 'oblique'という値は、データベース上で「oblique」と分類されているフォントを選択する。 'italic'という値は、データベース上で「italic」と分類されているフォントを選択するが、存在しない場合は「oblique」と分類されているものでも良い。

データベース上で'oblique'と分類されているフォントは、実際には通常体のフォントを無理矢理傾けて創り出しても良い。

一般に、フォント名に「Oblique」「Slanted」「Incline」などの語を含むフォントは、データベース上で「oblique」に分類されることが多い。 同じくフォント名に「Italic」「Cursive」「Kursiv」などの語を含むフォントは、データベース上で「italic」に分類されることが多い。

  H1, H2, H3 { font-style: italic }
  H1 EM { font-style: normal }

この例では、H1要素内の強調テキストは通常体で表示されることになる。

5.2.4 'font-variant'

Value:  normal | small-caps
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentage values:  N/A

フォントファミリ内には、スモールキャピタルというもう1種類の分類方法がある。 スモールキャピタルのフォントでは小文字が大文字の様に表示されるが、少し小さなサイズの大文字で、特徴もやや異なる。 'font-variant'プロパティはスモールキャピタルのフォントを選択する。

'normal'という値は、スモールキャピタルではないフォントを選択し、'small-caps'という値はスモールキャピタルのフォントを選択する。 CSS1では、通常のフォントからスモールキャピタルを創り出したり、大文字を縮小して小文字と置き換えたりできるなら、そうしても良い(必ずそうしろということではない)。 最後の手段として大文字をスモールキャピタルの代わりに用いるというのもある。

次の例では、H3要素はスモールキャピタルに、更にその中の強調語は斜体字のスモールキャピタルになる。

  H3 { font-variant: small-caps }
  EM { font-style: oblique }

オールドスタイルの数字やスモールキャピタルの数字、コンデンスド体や、引き延ばした文字など、フォントファミリの中には他にも様々な字体の種類があるだろう。 CSS1にはそれらを選択するプロパティは無い。

CSS1コア: テキストを大文字にするという効果に限ってこのプロパティを使用するのであれば、同じ効果は'text-transform'プロパティで得られる。

5.2.5 'font-weight'

Value:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentage values:  N/A

'font-weight'プロパティはフォントのウェイトを選択する。 '100'から'900'までの値は正しく順序づけられ、数字が大きい程重くなるか少なくとも同じ重さになる。 'normal'というキーワードは'400'と同義、'bold'というキーワードは'700'と同義になる。 'normal'、'bold'以外のキーワードを採用するとフォント名と混同することが多いので、尺度として9段階の数値リストを採用することにした。

  P { font-weight: normal }   /* 400 */
  H1 { font-weight: 700 }     /* bold */

'bolder'、'lighter'などのキーワードは、親要素からの継承値に対する相対ウェイトを選択する:

  STRONG { font-weight: bolder }

子供要素はキーワードを継承するのではなく実際に使用されたウェイトを継承する。

一般的に、フォント(もしくはフォントデータ)はウェイトに関する情報を有しており、その情報はフォント名のウェイト部分にくっついている。 ただ、ウェイトの名前には一般に広く認められた意味が存在しない。 何故なら、ウェイト名の主な役割というのが、単独のフォントファミリ内で異なる濃度の書体を区別することだからである。 したがって、ウェイトの名前はファミリ間で一定せず、あるファミリで「通常」とみなされている濃度によっては、RegularRomanBookMediumSemiBoldDemiBoldBoldBlackなど様々な術語がボールド体を表し得る。 こういった名前体系の欠陥を受けて、CSS1ではウェイトを数値で表し、ファミリ内で「通常」とみなされているフォントを'400'という数値に割り当てることにする。 一般に、通常ウェイトのフォントには、BookRegularRomanNormalMediumなどの術語が対応している。

通常ウェイト以外のウェイト名を数値に対応付ける作業は、フォントファミリ内で重さの順序を正しく保つことのみを意図している。 数値の割り当ては、主に次に示す方法で行われる:

次の2例はフォントの割り当て例である。 「Example1」というファミリに、軽い方から順に、RegularediumBoldHeavyという4種類のウェイトがあるとする。 同様に「Example2」というフォントファミリに、BookMediumBoldHeavyBlackExtraBlackという6種類のウェイトがあるとする。 2つめの例では「Example2 ExtraBlack」というフォントに数値が割り当てられないことに注意する。

    Available faces       |  Assignments  |  Filling the holes
    ----------------------+---------------+-------------------
    "Example1 Regular"    |  400          |  100, 200, 300
    "Example1 Medium"     |  500          |
    "Example1 Bold"       |  700          |  600
    "Example1 Heavy"      |  800          |  900
    Available faces       |  Assignments  |  Filling the holes
    ----------------------+---------------+-------------------
    "Example2 Book"       |  400          |  100, 200, 300
    "Example2 Medium"     |  500          |
    "Example2 Bold"       |  700          |  600      
    "Example2 Heavy"      |  800          |
    "Example2 Black"      |  900          |
    "Example2 ExtraBlack" |  (none)       |

相対キーワード'bolder'、'lighter'は、ファミリの中で次に重い・軽いフォントを選択する。 ファミリ内に9種類のウェイトに対応した書体が揃っているとは限らないので、'bolder'はクライアント上で利用できる次に重い書体にマッチする。 同様に'lighter'はクライアント上で利用できる次に軽い書体にマッチする。 更に厳密に定義すると:

ある'font-weight'の値より重いフォントが存在するという保証はどこにもない。 たとえば、フォントによっては通常体とボールド体しか存在しなかったり、8種類もの異なるウェイトがあったりする。 また、ユーザエージェントがファミリ内のフォントを数値にどう割り当てるかも保証されない。 ただ1つ言えるのは、指定した値と重みの関係が逆になって現れることはない、ということだけである。

5.2.6 'font-size'

Value:  <absolute-size> | <relative-size> | <length> | <percentage>
Initial:  medium
Applies to:  all elements
Inherited:  yes
Percentage values:  relative to parent element's font size
<absolute-size>
<absolute-size>キーワードは、ユーザエージェントが計算して保持しているフォントサイズ対照表への指標である。 使用可能な値は [ xx-small | x-small | small | medium | large | x-large | xx-large ] となっている。 コンピュータ画面上では、隣接するキーワードのスケーリング係数は1.5倍にすることを推奨する。 たとえば、'medium'が10ptに対応していれば、'large'は15ptに対応することになる。 ただし、別の出力媒体ではまた別のスケーリング係数が必要だろう。 また、キーワードとフォントサイズの対照表を作成する際、ユーザエージェントはフォントの質や入手可能性などを考慮に入れるべきである。 したがって、対照表はフォントファミリによって異なる場合もある。
<relative-size>
<relative-size>キーワードは、親要素の文フォントサイズを対照表上で相対参照して解釈される。 使用可能な値は [ larger | smaller ] となっている。 たとえば、親要素の値が'medium'だとすると、'larger'という指定によってフォントサイズが'large'となる。 親要素のフォントサイズが対照表上のいずれにも近くない値ならば、ユーザエージェントはそのフォントサイズを対照表内に付け加えたり、最も近い対照表上の値に丸めたりする処理を行ってもよい。 数値指定したフォントサイズが対照表からかけ離れている場合、ユーザエージェントは対照表のずっと外側に値を付け加えねばならないことがある。

要素のフォントサイズを算出する際、長さの値及びパーセント値は、フォントサイズ対照表を考慮すべきではない。

負の値は不正である。

他のすべてのプロパティでは、単位が'em'、'ex'である長さの値はその要素自身のフォントサイズを参照する。 'font-size'プロパティでは、これらの値は親要素のフォントサイズを参照する。

フォントサイズが明示されていても、場合によっては値が再解釈されることに注意する。 たとえばバーチャル・リアリティの場面では、視点のねじれのためにフォントが異なるフォントサイズを得ることもある。

以上を踏まえて例を挙げる:

  P { font-size: 12pt; }
  BLOCKQUOTE { font-size: larger }
  EM { font-size: 150% }
  EM { font-size: 1.5em }

推奨スケーリング係数の1.5が用いられれば、後ろ3つの宣言は同義になる。

5.2.7 'font'

Value:   [ <font-style> || <font-variant> || <font-weight> ]? <font-size>
[ / <line-height> ]? <font-family>
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   yes
Percentage values:   allowed on <font-size> and <line-height>

'font'は簡略化プロパティで、'font-style''font-variant''font-weight''font-size''line-height''font-family'という6つのプロパティを1箇所で指定できる。 このプロパティの構文は、フォントに関する複数の性質を記述するための、印刷術分野における慣習的な簡略表記法に則っている。

取り得る値や初期値については、前述の各プロパティ定義を参照のこと。 値を指定しないプロパティは初期値に設定される。

  P { font: 12pt/14pt sans-serif }
  P { font: 80% sans-serif }
  P { font: x-large/110% "new century schoolbook", serif }
  P { font: bold italic large Palatino, serif }
  P { font: normal small-caps 120%/120% fantasy }

2つめの規則では、フォントサイズのパーセント値は親要素のフォントサイズを参照する。 3つめの規則では、行の高さのパーセント値はその要素自身のフォントサイズを参照する。

前半の3つの規則では、'font-style''font-variant''font-weight'の値は明示されていない。 これらのプロパティは初期値を取ることになる。 4つめの規則では、'font-weight''font-style'にはそれぞれ'bold'と'italic'が明示され、'font-variant'には'normal'が暗示されている。

5つ目めの規則では、'font-variant'('small-caps')、'font-size'('120%')、'line-height'('120%')、'font-family'('fantasy')を設定している。 'normal'というキーワードは残り2つのプロパティ('font-style''font-weight')に適用されることになる。

5.3 色と背景のプロパティ(Color and background properties)

以下に述べるプロパティは、要素の色(前景色と呼ばれることが多い)及び背景(内容が表示される表面)を指定する。 背景には色と画像のどちらか、もしくは両方を指定できる。 背景画像の位置、画像の繰り返しの有無及び形式、そしてキャンバスに対して画像を固定するかスクロールするか、なども設定できる。

通常、'color'プロパティは継承を行い、背景のプロパティは継承を行わない。 しかし、'background-color'の初期値は'transparent'なので、結局親要素の背景が透けて見えることになる。

5.3.1 'color'

Value:   <color>
Initial:   UA specific
Applies to:   all elements
Inherited:   yes
Percentage values:   N/A

このプロパティは、当該要素のテキスト色(前景色と呼ばれることが多い)を指定する。 同じ赤色を指定するにも異なる方法がある:

  EM { color: red }              /* natural language */
  EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

使用できる色の値については[6.3. 色]を参照のこと。

5.3.2 'background-color'

Value:  <color> | transparent
Initial:  transparent
Applies to:  all elements
Inherited:  no
Percentage values:  N/A

このプロパティは要素の背景色を設定する。

  H1 { background-color: #F00 }

5.3.3 'background-image'

Value:  <url> | none
Initial:  none
Applies to:  all elements
Inherited:  no
Percentage values:  N/A

このプロパティは要素の背景画像を設定する。 背景画像を指定する際には、その画像が手に入らない時に用いられる背景色を同時に設定すべきである。 画像が手に入れば、背景色の上から画像が描画される。

  BODY { background-image: url(marble.gif) }
  P { background-image: none }

5.3.4 'background-repeat'

Value:   repeat | repeat-x | repeat-y | no-repeat
Initial:   repeat
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

背景画像が指定されていれば、'background-repeat'の値で、画像を繰り返すかどうか、繰り返すとしたらどういう形式かを決める。

'repeat'という値は、背景画像を縦横の両方向に敷き詰めていく。 'repeat-x'('repeat-y')という値は、横(及び縦)方向にのみ画像を敷き詰めていく。 つまり端から端にかけて画像のおびが描画されることになる。 'no-repeat'という値は、画像を繰り返さない。

  BODY { 
    background: red url(pendant.gif);
    background-repeat: repeat-y;
  }

この例では、背景画像は縦方向にのみ繰り返されることになる。

5.3.5 'background-attachment'

Value:   scroll | fixed
Initial:   scroll
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

背景画像が指定されていれば、'background-attachment'の値で、画像をキャンバスに対して固定するか、もしくは内容に沿ってスクロールするかを決める。

  BODY { 
    background: red url(pendant.gif);
    background-repeat: repeat-y;
    background-attachment: fixed;
  }

CSS1コア: ユーザエージェントは'fixed'を'scroll'として扱っても不適合ではない。 しかし、少なくともHTML要素とBODY要素については'fixed'を正しく解釈することを推奨する。 何故なら、'fixed'をサポートするブラウザにのみ画像を与える方法が存在しないからである。

5.3.6 'background-position'

Value:  [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial:  0% 0%
Applies to:  block-level and replaced elements
Inherited:  no
Percentage values:  refer to the size of the element itself

背景画像が指定されていれば、'background-position'の値でその初期位置を指定する。

'0% 0%'という値は、当該要素の(周辺領域ではなく)内容領域を囲むボックスの左上隅に、画像の左上隅が位置する。 '100% 100%'という値は、要素の右下隅に画像の右下隅が位置する。 同様に'14% 84%'という値は、要素の左から14%上から84%の部分に、画像の左から14%上から84%の部分が位置する。

'2cm 2cm'という値は、要素の上から2cm左から2cmの部分に画像の左上隅が位置する。

パーセント値もしくは長さの値が単独で与えられた場合、その値は水平方向の位置を指定するとみなされ、垂直方向の位置は50%になる。 2つの値が与えられた場合、1つめの値が水平方向の位置を示す。 パーセント値と長さの値を組み合わせることもできる(たとえば'50% 2cm'など)。 負の値も使用可能である。

背景画像の位置をキーワードで指定することもできる。 ただし、キーワードと他の値を組み合わせることはできない。 使えるキーワードの組み合わせとその解釈は以下の通り:


    Keywords                                 |  Interpretation
  --------------------------------------------------------------
   'top left', 'left top'                    | '0% 0%'
   'top', 'top center', 'center top'         | '50% 0%'
   'right top', 'top right'                  | '100% 0%'
   'left', 'left center', 'center left'      | '0% 50%'
   'center', 'center center'                 | '50% 50%'
   'right', 'right center', 'center right'   | '100% 50%'
   'bottom left', 'left bottom'              | '0% 100%'
   'bottom', 'bottom center', 'center bottom'| '50% 100%'
   'bottom right', 'right bottom'            | '100% 100%'

例を挙げよう:

  BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
  BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
  BODY { background: url(banner.jpeg) center }       /*  50%  50% */
  BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

背景画像がキャンバスに固定されていれば('background-attachment'を参照)、要素ではなくキャンバスに対して画像の位置を決める。

  BODY { 
    background-image: url(logo.png);
    background-attachment: fixed;
    background-position: 100% 100%;
  } 

この例では、画像はキャンバスの右下隅に位置する。

5.3.7 'background'

Value:  <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial:  not defined for shorthand properties
Applies to:  all elements
Inherited:  no
Percentage values:  allowed on <background-position>

'background'は簡略化プロパティで、'background-color''background-image''background-repeat''background-attachment''background-position'という5つのプロパティを1箇所で指定できる。

使える値は各プロパティ単独で使用できる値の集合になる。

  BODY { background: red }
  P { background: url(chess.png) gray 50% repeat fixed }

'background'プロパティは、常に背景に関するすべてのプロパティを設定する。 上の例の1つ目めの規則は、'background-color'のみに値が与えられ、その他のプロパティは初期値に設定される。 2つめの規則では、個々のプロパティがすべて指定されている。

5.4 テキストのプロパティ(Text properties)

5.4.1 'word-spacing'

Value:  normal | <length>
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentage values:  N/A

長さの値を指定すると、単語と単語の間隔が指定した長さ分増加する。 負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。 ユーザエージェントは実際の正確な単語間隔を求めるアルゴリズムを自由に選択してよい。 また、実際の単語間隔は'text-align'プロパティによる両端揃えに影響を受けることもある。

  H1 { word-spacing: 1em }

この指定によって、H1要素内の単語間隔は'1em'分増加する。

CSS1コア: ユーザエージェントは'word-spacing'のどんな値も'normal'と解釈してよい。

5.4.2 'letter-spacing'

Value:  normal | <length>
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentage values:  N/A

長さの値を指定すると、文字と文字の間隔が指定した長さ分増加する。 負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。 ユーザエージェントは実際の正確な文字間隔を求めるアルゴリズムを自由に選択してよい。 また、実際の文字間隔は'text-align'による両端揃えに影響を受けることもある。

  BLOCKQUOTE { letter-spacing: 0.1em }

この指定によって、BLOCKQUOTE要素内の文字間隔は'0.1em'分増加することになる。

'normal'という値を指定すると、ユーザエージェントは文章の両端揃えのために文字間隔を変更できる。 'letter-spacing'に長さの値を明示すれば、そういう事はないだろう。

  BLOCKQUOTE { letter-spacing: 0 }
  BLOCKQUOTE { letter-spacing: 0cm }

実際に使われる文字間隔がデフォルトと異なる場合、ユーザエージェントは合字(ligatures)を用いるべきではない。

CSS1コア: ユーザエージェントは'letter-spacing'のどんな値も'normal'と解釈してよい。

5.4.3 'text-decoration'

Value:   none | [ underline || overline || line-through || blink ]
Initial:   none
Applies to:   all elements
Inherited:   no, but see clarification below
Percentage values:   N/A

このプロパティは要素のテキストに付け加える装飾を指定する。 テキストを含まない要素(たとえばIMG)、あるいは空要素(たとえば<EM></EM>)の場合、このプロパティは無効になる。 'blink'という値はテキストを点滅させる。

テキストの装飾部分には'color'の値と同じ色を用いるべきである。

このプロパティは継承を行わないが、親要素の効果には影響を受けるべきである。 たとえば、ある要素に下線を引くとすると、その下線は子供要素にまたがって引かれるべきである。 この時、たとえ子孫要素が'color'に別の値を持っていても、下線には一貫して同じ色を用いることになる。

  A:link, A:visited, A:active { text-decoration: underline }

上の例では、すべてのリンク(つまりhref属性を持つA要素)に下線を引く。

ユーザエージェントは'blink'という値を(不正な値一般としてではなく)認識しなければならない。 しかし、文字が点滅する効果までをサポートする必要はない。

5.4.4 'vertical-align'

Value:   baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial:   baseline
Applies to:   inline elements
Inherited:   no
Percentage values:   refer to the 'line-height' of the element itself

このプロパティは要素の垂直方向の配置に影響する。 キーワードの中には親要素との相対関係を示すものもある:

'baseline'
要素のベースライン(存在しない場合は外下辺)を親要素のベースラインと揃える。
'middle'
要素(典型は画像)の中心線を、親要素のベースラインから小文字xの半分だけ高い位置と揃える。
'sub'
下付き文字にする。
'super'
上付き文字にする。
'text-top'
要素の外上辺(top)を親要素の外上辺に揃える。
'text-bottom'
要素の外下辺(bottom)を親要素の外下辺に揃える。

他方、当該要素を含む整形済み行との相対関係を示すキーワードもある:

'top'
要素の外上辺を、同じ行中でもっとも高い要素(の外上辺)に揃える。
'bottom'
要素の外下辺を、同じ行中でもっとも低い要素(の外下辺)に揃える。

'top', 'bottom'などの値を用いると、要素の依存関係が解決不能なループを作り出してしまうことがある。

パーセント値は、当該要素自身の'line-height'プロパティ値を参照する。 パーセント値を用いると、当該要素のベースライン(存在しなければ外下辺)を指定した量だけ高くする。 また、負の値も使用可能である。 たとえば'-100%'という値を指定すれば、当該要素と次の行のベースラインに重なる様に、要素の位置を下げることができる。 こうすれば、ベースラインを持たない要素(たとえば文字の代わりに用いられる画像)の垂直位置を正確に制御できる。

将来のCSSでは、このプロパティに値として<length>を使えるようにしたい。

5.4.5 'text-transform'

Value:   capitalize | uppercase | lowercase | none
Initial:   none
Applies to:   all elements
Inherited:   yes
Percentage values:   N/A
'capitalize'
各単語の先頭を大文字にする。
'uppercase'
すべて大文字にする。
'lowercase'
すべて小文字にする。
'none'
継承値を無効にする。

このプロパティの実際の効果は、人間言語の種類に依存する。 当該要素の言語情報を得る方法については、[HTMLの国際化]を参照のこと。

  H1 { text-transform: uppercase }

上の例では、H1要素のすべての文字が大文字になる。

CSS1コア: ユーザエージェントは場合によっては'text-transform'の値を無視してもよい(すなわち'none'という値として扱ってよい)。 たとえば、対象の文字がラテン用字系に属さない場合や、大文字小文字の変換方法が[UNICODE]のそれと異なる場合などがある。

5.4.6 'text-align'

Value:   left | right | center | justify
Initial:   UA specific
Applies to:   block-level elements
Inherited:   yes
Percentage values:   N/A

このプロパティは、要素内のテキストがをどう揃えるかを指定する。 両端揃えで実際に使用されるアルゴリズムは、ユーザエージェントや人間言語の種類に依存する。

例を挙げよう:

  DIV.center { text-align: center }

'text-align'プロパティは継承を行うので、class="center"のDIV要素内にある、すべてのブロック要素が内容のセンタリングを行うことになる。 ここで、テキストの整列はキャンバス全体に対してではなく、当該要素自身の幅に対して行われることに注意する。 また、'justify'という値がサポートされていない場合、ユーザエージェントは代替値を用いることになる。 一般に、西洋言語では'left'が代替値ということになる。

CSS1コア: ユーザエージェントは、当該要素のデフォルトの書字方向が左から右であるか、右から左であるかに応じて、'justify'を各々'left'もしくは'right'として扱ってよい。

5.4.7 'text-indent'

Value:   <length> | <percentage>
Initial:   0
Applies to:   block-level elements
Inherited:   yes
Percentage values:   refer to parent element's width

このプロパティは、整形後の1行目にインデントを指定する。 負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。 インデントは、BRなど他の要素による改行の直後に施されることはない。

例を挙げよう:

  P { text-indent: 3em }

5.4.8 'line-height'

Value:  normal | <number> | <length> | <percentage>
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentage values:  relative to the font size of the element itself

このプロパティは、隣接ベースライン間距離を設定する。

数値を指定すると、行の高さは当該要素のフォントサイズにその数値を掛けた値になる。 この数値指定は、値の継承方法がパーセント値の場合とは異なる。 数値が指定されると、子供要素は最終的に用いられる値ではなく、その指定値自体を継承することになる。 一方、パーセント値やその他の単位は、多くの場合最終的に用いられる値を継承する。

負の値は不正である。

下に示した3規則は同じ高さの行になる:

  DIV { line-height: 1.2; font-size: 10pt }     /* number */
  DIV { line-height: 1.2em; font-size: 10pt }   /* length */
  DIV { line-height: 120%; font-size: 10pt }    /* percentage */

'normal'という値は、当該要素のフォントに応じて'line-height'を妥当な値に設定する。 ユーザエージェントは、このキーワードに対して1.0から1.2の範囲で数値を充てると良いだろう。

'line-height'プロパティがブロック要素の整形にどう影響を与えるかについては、4.4. 行の高さを参照のこと。

5.5 ボックスのプロパティ(Box properties)

ボックスのプロパティは、要素を表しているボックスの大きさ、周辺領域、位置などを設定する。 これらのプロパティの実際の使用例は、[4. 整形モデル]を参照のこと。

マージンのプロパティは要素の最も外側の余白を設定する。 'margin'プロパティは上下左右すべての側にマージンを設定するのに対し、それ以外のプロパティはいずれかの側にのみマージンを設定する。

パディングのプロパティはボーダーと内容の間に挿入する隙間を設定する。 'padding'プロパティは上下左右すべての側にパディングを設定するのに対し、それ以外のプロパティはいずれかの側にのみパディングを設定する。

ボーダーのプロパティは要素の境界(パディングとマージンの間)を設定する。 各要素は上下左右それぞれの側にボーダーを有し、それらのボーダーは幅と色と種類で定義される。

'width''height'はボックスの大きさを設定する。 また、'float''clear'は要素の配置を変えることができる。

5.5.1 'margin-top'

Value:  <length> | <percentage> | auto
Initial:  0
Applies to:  all elements
Inherited:  no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素上辺のマージンを設定する:

  H1 { margin-top: 2em }

負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。

5.5.2 'margin-right'

Value:  <length> | <percentage> | auto
Initial:  0
Applies to:  all elements
Inherited:  no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素右辺のマージンを設定する:

  H1 { margin-right: 12.3% }

負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。

5.5.3 'margin-bottom'

Value:   <length> | <percentage> | auto
Initial:   0
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素下辺のマージンを設定する:

  H1 { margin-bottom: 3px }

負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。

5.5.4 'margin-left'

Value:   <length> | <percentage> | auto
Initial:   0
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素左辺のマージンを設定する:

  H1 { margin-left: 2em }

負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。

5.5.5 'margin'

Value:   [ <length> | <percentage> | auto ]{1,4}
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

'margin'は簡略化プロパティで、'margin-top', 'margin-right', 'margin-bottom', 'margin-left'という4つのプロパティを1箇所で設定できる。

値が4つとも指定された場合、それらは順に、上辺、右辺、下辺、左辺に適用される。 値が1つだけ指定された場合、その値は上下左右すべての辺に適用される。 値が2つあるいは3つ指定された場合、値が指定されていない辺は対辺と同じ値になる。

  BODY { margin: 2em } /* all margins set to 2em */
  BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

上の例の3規則は以下と等価である:

  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /* 反対側と同じにしなくっちゃ */
  }

負の値も使用可能だが、実装上は値に特定の制限範囲を設けることができる。

5.5.6 'padding-top'

Value:   <length> | <percentage>
Initial:   0
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素上辺のパディングを設定する。

  BLOCKQUOTE { padding-top: 0.3em }

負の値は不正である。

5.5.7 'padding-right'

Value:  <length> | <percentage>
Initial:  0
Applies to:  all elements
Inherited:  no
Percentage values:  refer to width of closest block-level ancestor

このプロパティは要素右辺のパディングを設定する。

  BLOCKQUOTE { padding-right: 10px }

負の値は不正である。

5.5.8 'padding-bottom'

Value:   <length> | <percentage>
Initial:   0
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素下辺のパディングを設定する。

  BLOCKQUOTE { padding-bottom: 2em }

負の値は不正である。

5.5.9 'padding-left'

Value:   <length> | <percentage>
Initial:   0
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

このプロパティは要素左辺のパディングを設定します。

  BLOCKQUOTE { padding-left: 20% }

負の値は不正である。

5.5.10 'padding'

Value:   [ <length> | <percentage> ]{1,4}
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   refer to width of closest block-level ancestor

'padding'は簡略化プロパティで、'padding-top', 'padding-right', 'padding-bottom', 'padding-left'という4つのプロパティを1箇所で設定できる。

値が4つとも指定された場合、それらは順に、上辺、右辺、下辺、左辺に適用される。 値が1つだけ指定された場合、その値は上下左右すべての辺に適用される。 値が2つあるいは3つ指定された場合、値が指定されていない辺は対辺と同じ値になる。

パディング領域の表面は'background'プロパティで設定する:

  H1 { 
    background: white; 
    padding: 1em 2em;
  } 

上の例では、垂直方向(すなわち上辺と下辺)のパディングを'1em'に、水平方向(すなわち左辺と右辺)のパディングを'2em'に設定している。 'em'はフォントサイズに対する相対単位なので、'1em'という値は用いられているフォントサイズと同じ値になる。

負の値は不正である。

5.5.11 'border-top-width'

Value:   thin | medium | thick | <length>
Initial:   'medium'
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

このプロパティは要素上辺のボーダー幅を設定する。 キーワードに対する実際の幅はユーザエージェントに依存するが、少なくとも'thin' <= 'medium' <= 'thick'でなければならない。

キーワードに対する実際の幅は文書を通して一貫である:

  H1 { border: solid thick red }
  P  { border: solid thick blue }

上の例で、H1要素とP要素はフォントサイズに関わらず同じボーダー幅になる。 相対幅を指定するのには単位'em'を用いることができる:

  H1 { border: solid 0.5em }

負の値は不正である。

5.5.12 'border-right-width'

Value:   thin | medium | thick | <length>
Initial:   'medium'
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

このプロパティは要素右辺のボーダー幅を設定する。 その他の点は'border-top-width'の場合と同様である。

5.5.13 'border-bottom-width'

Value:   thin | medium | thick | <length>
Initial:   'medium'
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

このプロパティは要素下辺のボーダー幅を設定する。 その他の点は'border-top-width'の場合と同様である。

5.5.14 'border-left-width'

Value:   thin | medium | thick | <length>
Initial:   'medium'
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

このプロパティは要素左辺のボーダー幅を設定する。 その他の点は'border-top-width'の場合と同様である。

5.5.15 'border-width'

Value:   [thin | medium | thick | <length>]{1,4}
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

'border-width'は簡略化プロパティで、'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'という4つのプロパティを1箇所で設定できる。

1つ以上4つ以下の値を指定でき、各々次の様に解釈される:

下の例では、コメントとして各辺に適用される値を示した。 順に、上辺、右辺、下辺、左辺である:

  H1 { border-width: thin }                   /* thin thin thin thin */
  H1 { border-width: thin thick }             /* thin thick thin thick */
  H1 { border-width: thin thick medium }      /* thin thick medium thin */
  H1 { border-width: thin thick medium thin } /* thin thick medium thin */

負の値は不正である。

5.5.16 'border-color'

Value:   <color>{1,4}
Initial:   the value of the 'color' property
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

'border-color'プロパティは四辺のボーダーの色を設定する。 1つ以上4つ以下の値を指定でき、値を設定する辺は前出の'border-width'の場合と同様である。

色が指定されていない場合、ボーダーの色は当該要素の'color'の値と同じになる:

  P { 
    color: black; 
    background: white; 
    border: solid;
  }

上の例では、ボーダーは黒の実線ということになる。

5.5.17 'border-style'

Value:  none | dotted | dashed | solid | double | groove | ridge | inset | outset
Initial:  none
Applies to:  all elements
Inherited:  no
Percentage values:  N/A

'border-style'プロパティは四辺のボーダーの種類を設定する。 1つ以上4つ以下の値を指定でき、値を設定する辺は前出の'border-width'の場合と同様である。

  #xy34 { border-style: solid dotted }

上の例では、上下のボーダーが実線、左右のボーダーが点線ということになる。

プロパティの初期値が'none'なので、設定をしないとボーダーは見えないということになる。

各値は次の様な意味になる:

none
'border-width'の値に関わらず)ボーダーは表示されない。
dotted
ボーダーは背景画像の上から点線で表示される。
dashed
ボーダーは背景画像の上から破線で表示される。
solid
ボーダーは実線になる。
double
ボーダーは背景画像の上から二重線で表示される。 2本の実線と間の空白とを合わせた幅が'border-width'の値と等しくなる。
groove
指定された色を基調にして立体的な窪みを表示する。
ridge
指定された色を基調にして立体的な隆起を表示する。
inset
指定された色を基調にしてボーダー内部を窪みにする。
outset
指定された色を基調にしてボーダー内部を隆起にする。

CSS1コア: ユーザエージェントは'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'をすべて'solid'として扱ってもよい。

5.5.18 'border-top'

Value:   <border-top-width> || <border-style> || <color>
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

これは簡略化プロパティで、要素上辺のボーダーについて幅、種類、色を同時に設定する。

  H1 { border-bottom: thick solid red }

この規則は、H1要素下辺のボーダーに、幅、種類、色を設定している。 値を省略すると初期値に設定される。

  H1 { border-bottom: thick solid }

この例では色の値を省略しているので、ボーダーの色は当該要素の'color'プロパティと同じになる。

'border-style'には最大4つの値を指定できるが、このプロパティには値を1つしか設定できないことに注意する。

5.5.19 'border-right'

Value:  <border-right-width> || <border-style> || <color>
Initial:  not defined for shorthand properties
Applies to:  all elements
Inherited:  no
Percentage values:  N/A

これは簡略化プロパティで、要素右辺のボーダーについて幅、種類、色を同時に設定する。 その他の点については'border-top'の場合と同様である。

5.5.20 'border-bottom'

Value:   <border-bottom-width> || <border-style> || <color>
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

これは簡略化プロパティで、要素下辺のボーダーについて幅、種類、色を同時に設定する。 その他の点については'border-top'の場合と同様である。

5.5.21 'border-left'

Value:   <border-left-width> || <border-style> || <color>
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

これは簡略化プロパティで、要素左辺のボーダーについて幅、種類、色を同時に設定する。 その他の点については'border-top'の場合と同様である。

5.5.22 'border'

Value:   <border-width> || <border-style> || <color>
Initial:   not defined for shorthand properties
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

'border'は簡略化プロパティで、当該要素四辺のボーダーについて同じ幅、種類、色を設定する。 たとえば下の例では、1つめの規則と次の4つの規則は等価である:

  P { border: solid red }
  P {
    border-top: solid red;
    border-right: solid red;
    border-bottom: solid red;
    border-left: solid red
  }

'margin''padding'と違って、'border'は四辺のボーダーに別々の値を指定できない。 そのためには、他のプロパティを併用しなければならない。

ここまでに紹介したボーダーのプロパティはある程度機能が重複しているので、規則を指定する順序が重要になる。 たとえばこんな例を考えてみよう:

  BLOCKQUOTE {
    border-color: red;
    border-left: double;
    color: black;
  }

この例では、左ボーダーの色は黒になり、その他のボーダーの色は赤ということになる。 この結果は、'border-left'がボーダーの幅、種類、色をすべて指定することに起因する。 すなわち、'border-left'に色の値が明示されていないので、'color'と同じ値を用いているのである。 ただし、'color'プロパティを'border-left'プロパティより後に設定しているという事実は、何の関係も無い。

'border-width'には最大4つの値を指定できるが、'border'には値を1つしか指定できないことに注意する。

5.5.23 'width'

Value:   <length> | <percentage> | auto
Initial:   auto
Applies to:   block-level and replaced elements
Inherited:   no
Percentage values:   refer to parent element's width

このプロパティはテキストの要素にも適用できるが、画像などの置換要素に適用するのが最も有用である。 必要ならば、画像の大きさを強制的に拡大あるいは縮小して、指定された幅を実現しなければならない。 拡大あるいは縮小を行う場合、'height'の値が'auto'であれば、縦横の比率は維持される。

例を挙げよう:

  IMG.icon { width: 100px }

置換要素の'width''height'が両方とも'auto'という値を取る場合、これらのプロパティは要素の内在寸法に設定されることになる。

負の値は不正である。

このプロパティと各周辺領域との関係については、[4. 整形モデル]を参照のこと。

5.5.24 'height'

Value:   <length> | auto
Initial:   auto
Applies to:   block-level and replaced elements
Inherited:   no
Percentage values:   N/A

このプロパティはテキストの要素にも適用できるが、画像などの置換要素に適用するのが最も有用である。 必要ならば、画像の大きさを強制的に拡大あるいは縮小して、指定された高さを実現しなければならない。 拡大あるいは縮小を行う場合、'width'の値が'auto'であれば、縦横の比率は維持される。

例を挙げよう:

  IMG.icon { height: 100px }

置換要素の'width''height'が両方とも'auto'という値を取る場合、これらのプロパティは要素の内在寸法に設定されることになる。

テキストの要素に適用される場合、指定された高さは、たとえばスクロールバーなどによって強制的に実現される。

負の値は不正である。

CSS1コア: 当該要素が置換要素でない場合、ユーザエージェントは'height'プロパティを無視しても(すなわち値を'auto'として扱っても)よい。

5.5.25 'float'

Value:   left | right | none
Initial:   none
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

'none'を指定すると、要素はテキスト内に出現する通りの位置に表示されることになる。 'left' ('right')を指定すると、要素は左(右)側に寄せられて、後に続くテキストはその右(左)側を回り込んでいくことになる。 値が'left'か'right'である場合、当該要素はブロックレベルとして扱われる('display'プロパティも無視される)。 仕様の詳細については[4.1.4 フロート要素]を参照のこと。

  IMG.icon { 
    float: left;
    margin-left: 0;
  }

上の例では、class="icon"であるすべてのIMG要素が親要素の左端に寄せられることになる。

このプロパティは主にインラインの画像に対して用いられるが、テキストの要素にも適用可能である。

5.5.26 'clear'

Value:   none | left | right | both
Initial:   none
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

このプロパティは、当該要素の両サイドにフロート要素が出現するかどうかを指定する。 具体的に言うと、このプロパティの値で、フロート要素の出現が禁止になる側を指定するのである。 'clear'に'left'を設定すると、当該要素はフロート要素のすぐ下の行の左端に移動する。 'clear'に'none'を設定すると、当該要素のどちら側にもフロート要素が出現できる。 例を挙げよう:

  H1 { clear: left }

5.6 分類のプロパティ(Classification properties)

これらのプロパティは、要素に特別な視覚的効果を設定するというより、要素をいろいろな種類へ分類する。

リストのプロパティは、リスト項目(すなわち'display'の値が'list-item'である要素)をどう整形するかを指定する。 リストのプロパティはどの要素にも設定でき、通常値は子孫部へと継承されていく。 しかし、指定された値が有効なのは、'display'の値が'list-item'となる要素だけである。 HTMLではLI要素がこの典型である。

5.6.1 'display'

Value:   block | inline | list-item | none
Initial:   block
Applies to:   all elements
Inherited:   no
Percentage values:   N/A

このプロパティは、要素をキャンバス(紙面やコンピュータ画面)に表示するか否か、あるいはどの様に表示するかを指定する。

'block'という値を指定すると、当該要素は新しくブロックボックスを生成する。 そのボックスは、CSSの整形モデルに従って、隣接するボックスに対して配置される。 HTMLでは、H1要素やP要素の種類がブロックである。 'list-item'という値も'block'と似ているが、こちらは要素の先頭にリスト項目のマーカーが追加される。 HTMLではLIがその典型になる。

'inline'という値を指定すると、直前の内容と同じ行に新しくインラインボックスを生成する。 そのボックスは、整形済み内容の大きさに応じて必要な寸法を取る。 内容がテキストなら整形が複数の行に渡ることもあり、その場合は各行にボックスができることになる。 この時、マージン、ボーダー、パディングのプロパティを適用しても、改行箇所には効果を現さない。

'none'という値を指定すると、当該要素を子供要素まで含めて表示しない。

  P { display: block }
  EM { display: inline }
  LI { display: list-item }
  IMG { display: none }

最終行の規則は画像の表示を禁止している。

'display'の初期値は'block'だが、一般的なユーザエージェントは、[HTML]仕様にある推奨レンダリングに基づいて、すべてのHTML要素にデフォルト値を与えるとよい。

CSS1コア: ユーザエージェントは、'display'プロパティを無視してユーザエージェントの初期値を使用するだけでもよい。

5.6.2 'white-space'

Value:   normal | pre | nowrap
Initial:   normal
Applies to:   block-level elements
Inherited:   yes
Percentage values:   N/A

このプロパティは、要素内の空白類文字の処理を指定する。 'normal'という値は、複数の連続する空白類文字を1つにまとめる。 'pre'という値は、HTMLのPRE要素と同じ働きをする。 'nowrap'という値は、BR要素によってのみ改行を行わせる:

  PRE { white-space: pre }
  P   { white-space: normal }

'white-space'の初期値は'normal'だが、一般的なユーザエージェントは、[HTML]仕様にある推奨レンダリングに基づいて、すべてのHTML要素にデフォルト値を与えるとよい。

CSS1コア: ユーザエージェントは、文書作成者とユーザのスタイルシートに指定された'white-space'プロパティを無視して、ユーザエージェントの初期値を用いるだけでもよい。

5.6.3 'list-style-type'

Value:   disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial:   disc
Applies to:   elements with 'display' value 'list-item'
Inherited:   yes
Percentage values:   N/A

このプロパティは、'list-style-image'の値が'none'である時、あるいは指定されたURLの画像が表示できない時の、リスト項目のマーカーを指定する。

  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style-type: lower-alpha }   /* a b c d e etc. */
  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

5.6.4 'list-style-image'

Value:   <url> | none
Initial:   none
Applies to:   elements with 'display' value 'list-item'
Inherited:   yes
Percentage values:   N/A

このプロパティは、リスト項目のマーカーとして用いる画像を設定する。 指定した画像が手に入れば、その画像を'list-style-type'で設定したマーカーと置き換えることになる。

  UL { list-style-image: url(http://png.com/ellipse.png) }

5.6.5 'list-style-position'

Value:   inside | outside
Initial:   outside
Applies to:   elements with 'display' value 'list-item'
Inherited:   yes
Percentage values:   N/A

このプロパティは、リスト項目のマーカーを内容に対してどう配置するか指定する。 整形の例については[4.1.3. リスト要素]を参照のこと。

5.6.6 'list-style'

Value:  [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Initial:  not defined for shorthand properties
Applies to:   elements with 'display' value 'list-item'
Inherited:   yes
Percentage values:   N/A

'list-style'は簡略化プロパティで、'list-style-type''list-style-image''list-style-position'という3つのプロパティを1箇所で設定できる。

  UL { list-style: upper-roman inside }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }

'list-style'を直接LI要素に設定すると予期せぬ結果を招く。 たとえばこんな例を考えてみよう:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

この例では、2つめの規則よりも1つめの規則の方が詳細度([3.2. カスケード処理の順序]を参照)が高くなっている。 したがって、すべてのLI要素について1つめの規則が2つめの規則を上書きし、'lower-alpha'というリスト形式のみが用いられることになる。 この様な事態を避けるために、'list-style'プロパティはリストの種類を表す要素だけに設定するよう推奨する:

  OL.alpha  { list-style: lower-alpha }
  UL        { list-style: disc }

こうすれば、'list-style'の値はOL要素とUL要素から意図した通りLI要素に継承されることになる。

URLの値は他の値と組み合わせることができる:

  UL { list-style: url(http://png.com/ellipse.png) disc }

この例では、指定された画像が手に入らない時に'disc'という値が用いられることになる。

6 値の種類(Units)

6.1 長さ(Length units)

長さの値(<length>で示す)は、正負記号(デフォルトはプラス)とそれに続く数値(小数点の有無は任意)、それに単位の識別子(2文字の省略形)から成る。 数値がゼロの場合、単位の有無は任意になる。

プロパティの中には負の長さを値に取れるものがあるが、これは徒に整形モデルを複雑にしたり、実装にあたって特定の制限範囲を生じさせたりすることがある。 負の長さをサポートしていない場合、ユーザエージェントはサポートできる最も近い値を用いるべきである。

長さの単位には相対単位と絶対単位の2種類がある。 相対単位は、長さの値を取る別のプロパティに対する相対値を指定する。 スタイルシートで相対単位を用いれば、コンピュータ画面からレーザープリンタに至るまで、様々な出力体で容易に共通の尺度を持つことができるだろう。 後で述べるパーセント値やキーワードにも同様の利点がある。

以下の相対単位がサポートされている:

  H1 { margin: 0.5em }      /* ems, the height of the element's font */
  H1 { margin: 1ex }        /* x-height, ~ the height of the letter 'x' */
  P  { font-size: 12px }    /* pixels, relative to canvas */

'em'と'ex'は、当該要素のフォントサイズを参照する相対単位である。 ただし'font-size'自体にこれらの単位を用いる場合は、親要素のフォントサイズを参照する。

最後の規則で用いられている'px'は、キャンバスの解像度(多くの場合コンピュータ画面の解像度)を参照する相対単位である。 出力デバイスの画素濃度が典型的なコンピュータ画面のそれと著しく異なる場合は、ユーザエージェント側で値を調節すべきである。 調節時の参照画素(reference pixel)には、ユーザからの距離が腕の長さ程度で、画素濃度90dpiのデバイスにおける、1画素分の画角を用いることを推奨する。 仮に腕の長さを28インチとすれば、画角は約0.0227度になる。

子供要素は、相対値ではなく計算後の絶対値を継承する:

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

上の例で、H1要素の'text-indent'の値は'45pt'ではなく'36pt'になる。

絶対単位は、出力媒体の物理的性質があらかじめ判っている場合に限り有用である。 絶対単位は次のものがサポートされている:

  H1 { margin: 0.5in }      /* inches, 1in = 2.54cm */
  H2 { line-height: 3cm }   /* centimeters */
  H3 { word-spacing: 4mm }  /* millimeters */
  H4 { font-size: 12pt }    /* points, 1pt = 1/72 in */
  H4 { font-size: 1pc }     /* picas, 1pc = 12pt */

指定された長さに従えない場合、ユーザエージェントは近似値を取るようにすべきである。 そして、後に続くいかなるCSS1プロパティの計算や継承も、その近似後の値に基づいて処理すべきである。

6.2 割合(Percentage units)

パーセント値(<percentage>で示す)は、正負記号(デフォルトはプラス)とそれに続く数値(小数点の有無は任意)、そして'%'から成る。

パーセント値は常に他の値、たとえば長さなどを参照する相対値である。 パーセント値が使える各プロパティには参照する値が定められている。 多くの場合は当該要素自身のフォントサイズを参照する:

  P { line-height: 120% }   /* 120% of the element's 'font-size' */

継承を行うすべてのCSS1プロパティにおいて、子供要素はパーセント値そのものではなく計算後の値を継承する。

6.3 (Color units)

色の値は、キーワードであるか、もしくはRGB仕様に基づく数値である。

キーワードとして提案されている色名には16種類ある:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
これらの16色はWindowsのVGAパレットから取り出した。 これらのキーワードに対応するRGBの値は本仕様では定めない。

  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) }      /* integer range 0 - 255 */
  EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

16進数によるRGB値の表記形式では、'#'の後に3桁もしくは6桁の16進数が続く。 3桁のRGB表記(#rgb)は6桁の形式(#rrggbb)に変換する。 この変換は、ゼロを付け加えるのではなく、各桁を1回ずつ繰り返す方法である。 たとえば、#fb0という値は#ffbb00という値に変換する。 これによって、白を示す値(#ffffff)は3桁に省略して(#fff)指定できる。 また、ディスプレイの色の深さに依存しなくて済む。

関数によるRGB値の表記形式では、'rgb()'の括弧内にコンマで区切った3つの数値を入れる。 入れる数値は、0から255までの3つの整数値か、もしくは0.0%から100.0%までの3つのパーセント値である。 各数値の前後には空白類文字を挿入できる。

これらの範囲外の数値は切り落とすべきである。 したがって以下の3規則は等価である:

  EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */
  EM { color: rgb(300,0,0) }       /* clipped to 255 */
  EM { color: rgb(110%, 0%, 0%) }  /* clipped to 100% */

RGB値は[sRGB]の色空間で指定される。 色を再現する能力はユーザエージェントによって異なる場合もあるが、sRGBを用いれば曖昧でなく客観的に測定できる色の指定が可能になるし、測色の国際標準([COLORIMETRY]を参照)とも関連を得られる。

ユーザエージェントは、ガンマ補正の処理を行うことで色の表示を制御してもよい。 sRGBでは、一定の閲覧環境下で2.2というガンマ値を推奨している。 ユーザエージェントは、出力デバイスの平常時のガンマ値と合わせて、効果的なガンマ値2.2が得られるように、CSSで与えられた色を調整すべきである。 詳細は[D. ガンマ補正]を参照のこと。 なお、以上の影響を受けるのはCSSで指定された色だけであることに注意する。 たとえば、画像は自身で色に関する情報を含んでいるものとする。

6.4 URL

URLは関数による表記形式で識別する:

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

URLの値は、'url('とそれに続く任意の空白類文字、それに続く任意のアポストロフィあるいは二重引用符、それに続くURLそのもの(URLの定義は[RFC1738]を参照)、それに続く任意のアポストロフィあるいは二重引用符、それに続く任意の空白類文字、そして最後に右閉じ括弧、以上の構成になる。 URL自体に含まれない引用符は対でなければならない。

URL内に出現する各種括弧、コンマ、空白類文字、アポストロフィ、二重引用符は、バックスラッシュでエスケープしなければならない:

部分的なURLは、文書ではなくスタイルシートを基準にした相対URLとみなされる:

  BODY { background: url(yellow) }

7 CSS1へ適合するには(CSS1 conformance)

文書の表示にCSSを用いるすべてのユーザエージェントは、以下の要件を満たせば、CSS1に適合すると言える:

CSS1スタイルシートを出力するユーザエージェントは、以下の要件を満たせば、CSS1に適合すると言える:

文書の表示にCSS1を用い、なお且つCSS1スタイルシートの出力も行うユーザエージェントは、上に示した適合必要条件を両方とも満たせば本仕様に適合すると言える。

ユーザエージェントはCSS1の機能をすべて実装する必要はない。 実装必須の機能さえ実装すれば、CSS1に適合すると言えるのである。 実装必須の機能とは、必須ではないという旨が明示されている機能を除いた、残りすべての機能のことである。 それら除外の旨は、文中では「CSS1コア:」と注記されている。 これら除外される機能のことを、「CSS1上位機能」と呼ぶ。

この章はCSS1への適合条件を定義するにすぎない。 将来の新版のCSSでは、ユーザエージェントは適合のために他の異なる要件を満たす必要があるかもしれない。

表示媒体による制約の例を示そう。 たとえば、フォントや色は出力環境に共通している訳ではない。 また、解像度が異なると正確なマージン幅を確保できない。 こういう場合、ユーザエージェントは近似値を取るべきである。 また、ユーザインターフェースに内在する制約もある。 たとえば、VRブラウザはユーザとの距離に基づいて、文書を再構成することがある。

ユーザエージェントは、体裁に関する選択肢をユーザに提供してもよい。 たとえば、視力が劣っているユーザに配慮したオプションや、文字点滅の効果を無効にする設定などである。

CSS1は整形のあらゆる側面を詳細に定めるものではない、ということに注意する。 たとえば、ユーザエージェントは文字間隔を計算するアルゴリズムを自由に選択できる。

また、本仕様はユーザエージェントに以下の事項を推奨する。 ただし強制ではない:

以上に述べた適合の規則は、機能に関する事項のみである。 特定のユーザインターフェースを想定したものではない。

7.1 上位互換のための解析規則(Forward-compatible parsing)

本仕様はCSSの第1版を規定している。 将来、更に多くの機能を備えた次版のCSSが定められるだろう。 そこで、次版以降の機能を含むスタイルシートに遭遇しても、CSS1にさえ準拠していればそれを読み込めることを保証したい。 そのためにこの章では、ユーザエージェントがCSS1にとって不正な構造に遭遇した際、どういう処理を行うべきかを定める。

より詳細について:

いかなる版のCSSスタイルシートも文(statement)の連続から成る。 文には、@規則(at-rule)規則集合(ruleset)の2種類がある。 文の前後には自由に空白類文字(スペース、水平タブ、改行)を挿入してよい。

CSSスタイルシートはHTML文書に埋め込まれることが多い。 この時、互換性の無い古いユーザエージェントの不具合を防ぐには、スタイルシート全体をHTMLのコメントに隠すとよい。 HTMLのコメント字句<!-(CDO)と-->(CDC)の間に文を入れるのである。 コメント字句の前後には自由に空白類文字を挿入してよい。

@規則は、@キーワードから始まる。 その@キーワード(at-keyword)とは@とそれに続く識別子から成る(たとえば@import、@pageなど)。 識別子は、文字列、アラビア数字、ハイフン及びエスケープ文字から成る。

@規則は、最初に出現するセミコロンか、もしくは最初に出現するブロックまでのすべてで構成される(最初のセミコロンもしくはブロックも含める)。 CSS1適合のユーザエージェントは、@import以外の@キーワードで始まる@規則を無視して以降を解析し続ける。 また、スタイルシートの先頭に記述されていない@importも無視する。 例を挙げよう。

CSS1パーサが次のスタイルシートに遭遇したとする:

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

2つめの@importはCSS1では不正である。 よってCSS1パーサはその@規則を無視し、スタイルシートはこうみなされる:

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

ブロック(block)は、左中括弧で始まり対応する右中括弧までを含む。 この中括弧内にはどんな文字でも入るが、各種括弧を入れる場合、常に左括弧と右括弧を対にして正しい入れ子関係を作る。 また、アポストロフィと二重引用符も2つが対になり、これら引用符に挟まれた文字列は文字列(string)として扱われる(文字列の定義は[B. CSS1の文法]を参照のこと)。

下にブロックの例を挙げた。 二重引用符で示された右中括弧は、ブロック先頭の左中括弧とは対になっていない。 また、最初から2つめのアポストロフィはエスケープ文字なので、最初のアポストロフィとは対になっていない:

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

規則集合は、セレクタ文字列(selector-string)とそれに続く宣言ブロック(declaration block)から成る。 セレクタ文字列とは、最初の左中括弧までのすべてから成る(左中括弧自体は含まない)。 セレクタ文字列がCSS1において不正である場合、その規則集合は無視される。

たとえばCSS1パーサが次のスタイルシートを読み込んだとする:

  H1 { color: blue }
  P[align], UL { color: red; font-size: large }
  P EM { font-weight: bold }

2行目のセレクタ文字列はCSS1においては不正である。 したがって、CSS1準拠のユーザエージェントはこの規則集合を無視し、次の様にみなす:

  H1 { color: blue }
  P EM { font-weight: bold }

宣言ブロックとは左中括弧で始まり、対応する右中括弧までを含む。 その間には、セミコロンで区切られたゼロ個以上の宣言(declaration)が入る。

宣言は、プロパティ(property)とそれに続くコロン及び値(value)から成り、各宣言の前後には自由に空白類文字を挿入してよい。 プロパティは5章に定めた識別子の形式を取る。 値にはどんな文字も使えるが、各種括弧を使う場合、常に左括弧と右括弧を対にして入れ子関係を適切にする必要がある。 引用符についても同様である。 また、引用符に挟まれた文字は文字列として解析される。

将来新しいプロパティや値が追加されることを考えると、ユーザエージェントは不正なプロパティ名や不正な値を含む宣言を無視しなければならない。 すべてのCSS1プロパティには、設定できる値に構文制約と意味制約がある。

たとえばCSS1パーサが次のスタイルシートを読み込むとする:

  H1 { color: red; font-style: 12pt }
  P { color: blue;  font-vendor: any;  font-variant: small-caps }
  EM EM { font-style: normal }

1行目の2つめの宣言は、'12pt'という不正な値を含んでいる。 同様に2行目の2つめの宣言は、未知のプロパティ'font-vendor'を含んでいる。 したがって、CSS1パーサはこれらの宣言を無視し、スタイルシートこうみなす:

  H1 { color: red; }
  P { color: blue;  font-variant: small-caps }
  EM EM { font-style: normal }

コメント([1.7. コメント]を参照)は空白類文字が挿入できる箇所ならどこにでも挿入でき、空白類文字として扱われる。 CSS1では、ここまでに挙げた以外にも空白類文字の挿入箇所(たとえば値の間など)を定めており、それらの箇所にも同様にコメントを挿入できる。

以下の規則は常に拘束力を持つ:

HTML仕様におけるclass属性では、上述のセレクタよりも多くの文字をクラス名に用いることができる。 CSS1では、これらの文字をエスケ−プ文字もしくはUnicodeのコード番号で表現せねばならない。 たとえば、「B&W?」という文字列は「B\&W\?」もしくは「B\26W\3F」と書ける。 また、「」という文字列は「\3BA\3BF\3C5\3C1\3BF\3C2」と書ける。 将来のCSSでは、より多くの文字を直接書けるようにしたい。

[B. CSS1の文法]も参照のこと。

8 参照資料(References)

[1] W3C resource page on web style sheets (http://www.w3.org/pub/WWW/Style)

[2] "HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 July 1997. Available at http://www.w3.org/TR/REC-html40/.

[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, November 1995. The specification is also available in hypertext form (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html)

[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ietf.org/internet-drafts/draft-ietf-html-i18n-05.txt).

[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)

[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL). The specification is also available in hypertext form (http://occam.sjf.novell.com:8080/dsssl/dsssl96).

[7] ISO/IEC 9899:1990 Programming languages -- C.

[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.

[9] M Anderson, R Motta, S Chandrasekar, M Stokes: "Proposal for a Standard Color Space for the Internet - sRGB" (http://www.hpl.hp.com/personal/Michael_Stokes/srgb.htm)

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

[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, December 1994

[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/pub/WWW/TR/REC-png-multi.html)

[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)

[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)

[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975

[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213

9 謝辞(Acknowledgments)

During the short life of HTML, there have been several style sheet proposals to which this proposal is indebted. Especially the proposals from Robert Raisch, Joe English and Pei Wei were influential.

A number of people have contributed to the development of CSS1. We would especially like to thank: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles.

Three people deserve special mentioning: Dave Raggett (for his encouragement and work on HTML3), Chris Lilley (for his continued contributions, especially in the area of colors and fonts) and Steven Pemberton (for his organizational as well as creative skills).

A. HTML2.0におけるスタイルシートの例(Sample style sheet for HTML 2.0)

(この附記は標準情報ではない)

次のスタイルシートは、[RFC1866]仕様の表示推奨に従って設計した。 完成度を高くしようと独自に色などの指定を付け加えてある。 ユーザエージェントは、これに近いものをデフォルトスタイルシートにすることを推奨する。

  BODY { 
    margin: 1em;
    font-family: serif;
    line-height: 1.1;
    background: white;
    color: black; 
  }

  H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
  DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, DL, FORM { display: block }

  B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 
  IMG, SPAN { display: inline }

  LI { display: list-item }

  H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
  H5, H6 { margin-top: 1em }
  H1 { text-align: center }
  H1, H2, H4, H6 { font-weight: bold }
  H3, H5 { font-style: italic }

  H1 { font-size: xx-large }
  H2 { font-size: x-large }
  H3 { font-size: large }

  B, STRONG { font-weight: bolder }  /* relative to the parent */
  I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
  PRE, TT, CODE, KBD, SAMP { font-family: monospace }

  PRE { white-space: pre }

  ADDRESS { margin-left: 3em }
  BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

  UL, DIR { list-style: disc }
  OL { list-style: decimal }
  MENU { margin: 0 }              /* tight formatting */
  LI { margin-left: 3em }

  DT { margin-bottom: 0 }
  DD { margin-top: 0; margin-left: 3em }

  HR { border-top: solid }        /* 'border-bottom' could also have been used */

  A:link { color: blue }          /* unvisited link */
  A:visited { color: red }        /* visited links */
  A:active { color: lime }        /* active links */

  /* setting the anchor border around IMG elements
     requires contextual selectors */

  A:link IMG { border: 2px solid blue }
  A:visited IMG { border: 2px solid red }
  A:active IMG { border: 2px solid lime }

B. CSS1の文法(CSS1 grammar)

(この附記は標準情報ではない)

あらゆるバージョンのCSSで実装時に最小限サポートする必要がある文法は、[7.1. 上位互換のための解析規則]にて定めた。 ここでは前出のものよりずっと小規模な言語を定め、それをもってCSS1の構文とする。

しかし、この文法はある意味いまだCSS1のスーパーセットであり、この文法では表現しきれない意味制約が他に存在する。 たとえば、適合ユーザエージェントは上位互換のための解析規則、プロパティや値の記法などに従わなければならない。 更に、HTMLではclass属性値などについても制約がある。

以下に示すのはLL(1)文法であるが、これには細かな構文上の約束が表現されておらず、単純にCSS1の構文をコード化したにすぎない。 したがって、ほとんどのユーザエージェントは以下を直接流用すべきではない。 生成規則の形式は人間の使い勝手を配慮したものとなっており、[YACC]を逸脱する略記も散見される:

  *  : 0以上
  +  : 1以上
  ?  : 0もしくは1
  |  : 選択肢の区切り
  [] : グループ化

生成規則は以下の通り:

stylesheet
 : [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
 ;
import
 : IMPORT_SYM [STRING|URL] ';'		/* E.g., @import url(fun.css); */
 ;
unary_operator
 : '-' | '+'
 ;
operator
 : '/' | ',' | /* empty */
 ;
property
 : IDENT
 ;
ruleset
 : selector [ ',' selector ]*
   '{' declaration [ ';' declaration ]* '}'
 ;
selector
 : simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
 | solitary_pseudo_element
 ;
	/* An "id" is an ID that is attached to an element type
	** on its left, as in: P#p007
	** A "solitary_id" is an ID that is not so attached,
	** as in: #p007
	** Analogously for classes and pseudo-classes.
	*/
simple_selector
 : element_name id? class? pseudo_class?	/* eg: H1.subject */
 | solitary_id class? pseudo_class?		/* eg: #xyz33 */
 | solitary_class pseudo_class?			/* eg: .author */
 | solitary_pseudo_class			/* eg: :link */
 ;
element_name
 : IDENT
 ;
pseudo_class					/* as in:  A:link */
 : LINK_PSCLASS_AFTER_IDENT
 | VISITED_PSCLASS_AFTER_IDENT
 | ACTIVE_PSCLASS_AFTER_IDENT
 ;
solitary_pseudo_class				/* as in:  :link */
 : LINK_PSCLASS
 | VISITED_PSCLASS
 | ACTIVE_PSCLASS
 ;
class						/* as in:  P.note */
 : CLASS_AFTER_IDENT
 ;
solitary_class					/* as in:  .note */
 : CLASS
 ;
pseudo_element					/* as in:  P:first-line */
 : FIRST_LETTER_AFTER_IDENT
 | FIRST_LINE_AFTER_IDENT
 ;
solitary_pseudo_element				/* as in:  :first-line */
 : FIRST_LETTER
 | FIRST_LINE
 ;
	/* There is a constraint on the id and solitary_id that the
	** part after the "#" must be a valid HTML ID value;
	** e.g., "#x77" is OK, but "#77" is not.
	*/
id
 : HASH_AFTER_IDENT
 ;
solitary_id
 : HASH
 ;
declaration
 : property ':' expr prio? 
 | /* empty */				/* Prevents syntax errors... */
 ;
prio
 : IMPORTANT_SYM	 		/* !important */
 ;
expr
 : term [ operator term ]*
 ;
term
 : unary_operator?
   [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
   | IDENT | hexcolor | URL | RGB ]
 ;
	/* There is a constraint on the color that it must
	** have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
	** after the "#"; e.g., "#000" is OK, but "#abcd" is not.
	*/
hexcolor
 : HASH | HASH_AFTER_IDENT
 ;

以下は[FLEX]で書いた字句解析コードである。 8bit入力可能なスキャナを生成できる[FLEX]【訳注:-8オプションが有効なバージョン】を想定しており、大文字と小文字は区別しないものとする。(-iオプション)

unicode		\\[0-9a-f]{1,4}
latin1		[-ÿ]
escape		{unicode}|\\[ -~-ÿ]
stringchar	{escape}|{latin1}|[ !#$%&(-~]
nmstrt		[a-z]|{latin1}|{escape}
nmchar		[-a-z0-9]|{latin1}|{escape}
ident		{nmstrt}{nmchar}*
name		{nmchar}+
d		[0-9]
notnm		[^-a-z0-9\\]|{latin1}
w		[ \t\n]*
num		{d}+|{d}*\.{d}+
string		\"({stringchar}|\')*\"|\'({stringchar}|\")*\'

%x COMMENT
%s AFTER_IDENT

%%
"/*"				{BEGIN(COMMENT);}
<COMMENT>"*/"			{BEGIN(0);}
<COMMENT>\n			{/* ignore */}
<COMMENT>.			{/* ignore */}
@import				{BEGIN(0); return IMPORT_SYM;}
"!"{w}important			{BEGIN(0); return IMPORTANT_SYM;}
{ident}				{BEGIN(AFTER_IDENT); return IDENT;}
{string}			{BEGIN(0); return STRING;}

{num}				{BEGIN(0); return NUMBER;}
{num}"%"			{BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm}			{BEGIN(0); return LENGTH;}
{num}mm/{notnm}			{BEGIN(0); return LENGTH;}
{num}cm/{notnm}			{BEGIN(0); return LENGTH;}
{num}pc/{notnm}			{BEGIN(0); return LENGTH;}
{num}in/{notnm}			{BEGIN(0); return LENGTH;}
{num}px/{notnm}			{BEGIN(0); return LENGTH;}
{num}em/{notnm}			{BEGIN(0); return EMS;}
{num}ex/{notnm}			{BEGIN(0); return EXS;}

<AFTER_IDENT>":"link		{return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited	{return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active	{return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line	{return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter	{return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name}		{return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name}		{return CLASS_AFTER_IDENT;}

":"link				{BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited			{BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active			{BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line			{BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter			{BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name}			{BEGIN(AFTER_IDENT); return HASH;}
"."{name}			{BEGIN(AFTER_IDENT); return CLASS;}

url\({w}{string}{w}\)					|
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)		{BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)	{BEGIN(0); return RGB;}

[-/+{};,#:]			{BEGIN(0); return *yytext;}
[ \t]+				{BEGIN(0); /* ignore whitespace */}
\n				{BEGIN(0); /* ignore whitespace */}
\<\!\-\-			{BEGIN(0); return CDO;}
\-\-\>				{BEGIN(0); return CDC;}
.				{fprintf(stderr, "%d: Illegal character (%d)\n",
				 lineno, *yytext);}

C. 符号化方法(Encoding)

(この附記は標準情報ではない)

HTML文書は、Unicodeに定められた約3万もの異なる文字を含むことができる。 ただ、多くの文書が必要とする文字数はせいぜい数百文字であり、多くのフォントが含むグリフも数百程度である。 この附記では、[5.2. フォントのプロパティ]と合わせて、文書内の文字とフォントのグリフがどうマッチングするかを解説する。

文字符号化方法(Character encoding)

HTML文書は文字及びマーク付けの連続である。 文書の送信を行うには、いくつかの文字符号化方式のうち1つを用いて文書をバイト列に符号化する。 受信側で文字を解読するには、HTML文書を復号しなければならない。 たとえば、西欧諸国ではアクセント記号付きのa(à)に224というコードを充てているが、ヘブライ語ではこのコードはアレフ記号を表すのが普通である。 また、日本ではあるバイトの意味は先行するバイト列によって異なってくる。 文字符号化方式によっては1文字を2バイト以上で符号化することもある。

ユーザエージェントは、HTTPヘッダのcharsetパラメータを参照してバイト列の文字符号化方式を認識する。 よく使われる文字符号化方式には、ASCII(英語)、ISO-8859-1(西欧諸語)、ISO-8859-8(ヘブライ語)、Shift-JIS(日本語)などがある。

HTMLではUnicodeに定められた3万もの異なる文字を使用できる。 ほとんどの文書ではそんなに多くの文字を使わないので、正しい文字符号化方式を採用すれば通常は1文字対1バイトの対応が保証されることになる。 採用した符号化方式の範囲外にある文字は、数値文字参照で表現できる。 たとえば、「&#928;」という数値文字参照は、文字符号化方式に関わらずギリシャ語のパイの大文字(Π)を表す。 つまり、少数の文字符号化方式しか扱わないユーザエージェントでも、すべてのUnicode文字を準備しておく必要があるのである。

フォントの符号化(Font encoding)

フォントとは文字を含むものではなく、グリフ(glyph)と呼ばれる文字の画像情報を含むものである。 アウトラインであれビットマップであれ、複数のグリフがある文字の特別な表現方法に対応する。 陰にもしくは陽に、各フォントは文字の表現に関する対照表を有しており、それによってグリフと文字の対応が判るのである。 Type1フォントでは、この対照表を符号化ベクトルとして参照する。

実際、1つの文字に複数のグリフを対応させているフォントは多い。 用いるグリフは、言語の規則や設計者の意図に応じて使い分けられる。

たとえばアラビア文字の場合、すべての文字に4種類の形状が存在する。 その文字が文頭にくるか、文末にくるか、文中にくるか、単独で用いるかによってこれらを使い分けるのである。 しかし、その4種類のグリフは文字としては同じものであり、HTML文書には同じ文字として記述される。 印刷・表示する時に、初めて各々が異なる見え方になるのである。

また、多くの選択肢からグリフの形状を採用する作業を設計者に任せるフォントもある。 残念ながら、CSS1にはこれら代替の形状を選択する手段が無い。 現在の所、フォント自身のデフォルトの形状が常に用いられる。

フォントセット(Font sets)

ある1つの文書もしくは要素に含まれるすべての文字を表示するには、フォントが1種類だけでは足りない場合がしばしばである。 この問題を解決するために、CSS1ではフォントセット(font sets)なるものが利用可能である。

CSS1におけるフォントセットとは、同じスタイルとサイズを有するフォントのリストである。 それらのフォントは、ある文字に対するグリフを含んでいるかどうかを、指定した順に検証される。 たとえば、英語と数学記号が混ざった要素では、英数字を含むフォントと数学記号を含むフォントから成るフォントセットが必要になるだろう。 フォント選択の仕組みについて、詳細は[5.2. フォントのプロパティ]を参照のこと。

下に示したフォントセットの例は、ラテン文字、日本語文字、数学記号が混在しているテキストに最適である:

  BODY { font-family: Baskerville, Mincho, Symbol, serif }

Baskervilleというラテン系のフォントに含まれている文字には、このフォントを用いることになる。 同様に、日本語の文字にはMinchoというフォント、数学記号にはSymbolというフォントを用いることになる。 いずれのフォントにも含まれない文字には、総称ファミリserifが用いられることになる。 この総称ファミリserifは他のフォントが手に入らない場合にも用いられる。

D. ガンマ補正(Gamma correction)

(この附記は標準情報ではない)

ガンマ補正について予備知識が無い方は、PNG仕様ガンマチュートリアルを参照のこと。

CRTに表示を行うユーザエージェントは理想的なCRTを想定した処理を行うことができ、ディザリングによって生じる、見せかけのガンマ値への影響を無視してもよい。 すなわち現行の各プラットホームにおいてユーザエージェントが要する最小限の処理は以下の様になる:

PC using MS-Windows
必要なし。
Unix using X11
必要なし。
Mac using QuickDraw
ガンマ補正値1.39を適用する[MAC]。 (ColorSyncに対応したアプリケーションは、正確な色の補正を行うのに、単にsRGBの[ICC]プロファイルをColorSyncに引き渡すだけでよい)
SGI using X
/etc/config/system.glGammaValから引き渡されるガンマ補正値を適用する。 (初期値は1.70。 Irix 6.2以上で動作するアプリケーションは、単にsRGBのICCプロファイルをカラーマネジメントシステムに引き渡すだけでよい)
NeXT using NeXTStep
ガンマ補正値2.22を適用する。

「ガンマ補正値を適用する」とは、R、G、Bの各値をOSに引き渡す前に、R'=Rgamma, G'=Ggamma, B'=Bgammaという変換処理を施す、ということである。

一度ブラウザを起動するごとに256色分の計算対照表を構築しておけば、この処理を迅速に行うことができる:

  for i := 0 to 255 do
    raw := i / 255;
    corr := pow (raw, gamma);
    table[i] := trunc (0.5 + corr * 255.0)
  end

この処理により、1ピクセルを遥かに下回る微妙な色の取り扱いに際して、難解な数学的処理の必要を回避できる。

E. CSS1の機能性と拡張可能性(The applicability and extensibility of CSS1)

(この附記は標準情報ではない)

CSS1の目標は、HTML文書に対する単純なスタイルシートの仕組みを作り出すことである。 現在の仕様は、Web上でのスタイルシート実現に必要な単純さと、より豊かな表現力を求める文書作成者達の要望との間でバランスが取れた状態である。 CSS1が提供する機能には以下のものがある:

CSS1は以下の機能を提供するものではない:

今後のCSSに望まれる拡張方向には以下のものがある:

CSSが以下の方向に発展するのは好ましくない:

F. 前版からの変更点(Changes from the 17 December 1996 version)

(この附記は標準情報ではない)

本書は1996年12月17日付けCSS1勧告の改訂版であり、以下に前版からの全変更点を列挙した。 errataという名前の代替スタイルシートを選択すると変更箇所を反転表示するようになっている。

改訂版の作成に協力してくれた、小町祐史、Steve Byrne、Liam Quinn、Tantek Celik、の諸氏に感謝する。

タイプミスの類(Spelling and typographic mistakes)

エラー(Errors)

文書構成の変更(Structure and Organization)


Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.



Last modified April 13, 1999.
Translated by Kazuteru OKAHASHI.
mailto:kaz@fan.gr.jp