2 CSS2への導入

2.1 HTMLのためのCSS2概説

この概説では, 単純なスタイルシートの設計がいかに容易にできるか を示す。この概説の理解のためには,HTML ([HTML40]参照)及び基本的なデスクトップ出版用語を多少 知っておく必要がある。

短いHTML文書から始める。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

H1要素のテキストの色を青に設定するには, 次のCSS規則を書く。

  H1 { color: blue }

CSS規則は, 選択子('H1')及び宣言('color: blue')の二つの主要部分から構成される。宣言には, 特性('color')及び値('blue')の二つの部分がある。この例は,HTML文書をレンダリングするため必要な特性の一つだけに影響を及ぼそうとするものであるが,それ自体へのスタイルシートと見なせる。それは, 他のスタイルシートと組み合せて(スタイルシートを組み合せることは, CSSの一つの基本機能),文書の最終的な表示を決定する。

HTML 4.0規定は,スタイルシート規則がHTML文書に対してどのように指定されるか を規定する。つまり, HTML文書内で指定されるか,外部のスタイルシートによって指定されるか のいずれかとする。スタイルシートを文書に付けるために,STYLE要素を使用する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

柔軟性を最大にするため,文書作成者が外部スタイルシートを指定することを 推奨する。外部スタイルシートは,ソースHTML文書を変更することなく変えることができ, いくつかの文書間で共有してよい。外部スタイルシートにリンクするために, LINK要素を使用できる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

LINK要素は, 次を指定する。

スタイルシートと構造化マーク付けとの緊密な関係を示すため,この概説では STYLE要素の使用を続ける。さらに,色を追加してみよう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

ここで,スタイルシートは二つの規則を含む。最初の規則は, BODY要素の色を'赤'に設定し,2番目の規則はH1要素の色を'青'に設定する。 P要素に指定される色値はないため,親要素であるBODY要素から色を継承する。 H1要素もBODYの子要素であるが,2番目の規則が継承値を上書きする。 CSSでは,異なる値の間でこの矛盾は頻繁にあり, この規定は,それらを 解決する方法を示す。

CSS2は, 'color'を含む,100以上の さまざまな特性をもつ。他の特性を見てみよう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

まず,波括弧({...})で括られたブロック内にいくつかの宣言がグループ化され,宣言がセミコロンで区切られているが,最後の宣言の後にもセミコロンが 付いていることに気付く。

BODY要素の最初の宣言は,フォントファミリを"Gill Sans"に設定する。 そのフォントが利用できない場合,"ブラウザ"と呼ばれることが多い 利用者エージェントは, 'sans-serif'フォントファミリを使用する。 'sans-serif'フォントファミリは,すべての利用者エージェントが知っている 五つの共通フォントファミリの一つである。BODYの子要素は, 'font-family'特性の値を継承する。

2番目の宣言は,BODY要素のフォントサイズを12ポイントに設定する。 "ポイント"単位は,印刷ベースの技術で広く使用され,フォントサイズ及び その他の長さの値を示す。これは,環境によって変化しない絶対単位の一例とする。

3番目の宣言は,周囲に応じて変化する相対単位を使用する。"em" 単位は, 要素のフォントサイズを参照する。この場合,BODY要素の周囲のマージン(1)は,フォントサイズの3倍になる。

注1 
原規定の英語は"margin"。JIS TR X 0011 "段階スタイルシート水準1(CSS1)"では"余白"と訳していたが,日本語の"余白"は広い意味をもち,本文中の空白部分を指す可能性があるなど誤解しやすいため,JIS X 0023の用語に従って,この標準情報(TR)では,"マージン"とした。

2.2 XMLのためのCSS2概説

CSSは,どんな構造化文書フォーマットでも使用できる。例えば,拡張可能なマーク付け言語[XML10]のアプリケーションで使用できる。 実際,XMLは, HTMLよりももっとスタイルシートに依存する。これは, 利用者エージェントがどのように表示するかを知らない独自の要素を文書作成者が作成できることによる。

XML素片の簡単な例を次に示す。

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

文書風の形式でこの素片を表示するために,最初にどの要素が行内レベル(つまり,改行を生じさせない) であり,どの要素がブロックレベル(つまり,改行を生じさせる)であるか を宣言しなければならない。

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

最初の規則は,INSTRUMENTが行内レベルであることを宣言し,選択子のコンマで区切られたリストをもつ2番目の規則は,その他のすべての要素がブロックレベルであることを宣言している。

スタイルシートをXML文書にリンクする方法の一つとして,処理命令を使用することを提案する。

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

視覚利用者エージェントは, この例を次のとおりフォーマットできる。

Example rendering   [D]

"flute"という語が段落内に残っているのは,それが行内要素INSTRUMENTの内容であることによる点に注意すること。

それでも, テキストは期待する方法ではフォーマットされない。例えば,ヘッダ行のフォントサイズは,テキストの他の部分より大きくなるほうがよいし,文書作成者の名前をイタリックで表示したいと思うかもしれない。その例を次に示す。

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

視覚利用者エージェントは, この例を次のとおりフォーマットする。

Example rendering   [D]

スタイルシートにさらに規則を追加することによって,文書の表示を一層改善できる。

2.3 CSS2処理モデル

ここでは,CSSの作業をサポートする利用者エージェントがどのように動くかの可能なモデルを示す。これは概念モデルにすぎず,実際の実装は, それとは異なってよい。

このモデルでは,利用者エージェントは, 次のステップを進むことによってソースを処理する。

  1. ソース文書を構文解析し,文書ツリーを生成する。
  2. 対象メディア型を識別する。
  3. 対象メディア型に指定された文書と関連するスタイルシートをすべて検索する。
  4. 対象メディア型に適用できるすべての特性に単一の値を割り当てることによって,文書ツリーの要素のすべてに注釈を付ける。段階化及び継承の節で示される機構に従って,特性は値を割り当てられる。

    値の計算の一部は,対象メディア型に適するフォーマットアルゴリズムに依存する。例えば, 対象メディアが画面である場合,利用者エージェントは, 視覚フォーマット化モデルを適用する。 対象とするメディアが印刷されたページである場合,利用者エージェントは, ページモデルを適用する。対象とするメディアが音声合成装置などの聴覚レンダリング装置である場合,利用者エージェントは, 聴覚レンダリングモデルを適用する。

  5. 注釈付きの文書ツリーから,フォーマット化構造を生成する。フォーマット化構造はしばしば文書ツリーに極めて類似するが,特に文書作成者が擬似要素及び生成される内容を利用する場合には,それは全く異なってもよい。まず,フォーマット化構造は"ツリー形式"である必要は全くない。構造の性質は, 実装に依存するためである。次に,フォーマット化構造は, 文書ツリーよりも多い又は少ない情報を含んでよい。例えば,文書ツリーの要素が'display'特性に対して'none'という値をもつ場合,その要素はフォーマット化構造では何も生成しない。 一方,リスト要素は,フォーマット化構造においてもっと多くの情報, つまり,リスト要素の内容,箇条記号の画像などのリストスタイル情報を生成してよい。

    CSS利用者エージェントは,この時点では文書ツリーを変更することはない点に注意すること。特に,スタイルシートによって生成される内容は,再構文解析のためなどに,文書言語プロセサにフィードバックされない。

  6. フォーマット化構造を対象メディアに転送する。例えば,結果を印刷し,結果を画面に表示し,結果を音声にレンダリングする。

ステップ1は, この規定の適用範囲外であり, 例えば, [DOM]を参照すること。

ステップ2〜5は, この標準情報(TR)の大部分で規定される。

ステップ6は,この規定の適用範囲外にある。

2.3.1 描画面

すべてのメディアについて, 描画面という語は, "フォーマット化構造がレンダリングされる空間"を示す。 描画面は,空間の各次元に関して無限であるが,レンダリングは通常,対象メディアに応じて利用者エージェントが設定した描画面の有限領域内で行われる。 例えば,画面にレンダリングする利用者エージェントは,最小幅を課し, 表示域の大きさに基づいて初期幅を選択する。 ページにレンダリングする利用者エージェントは通常,幅及び高さの制約を課す。聴覚利用者エージェントは,オーディオ空間に制限を課してもよいが,時間に制限を課してはならない。

2.3.2 CSS2アドレス付けモデル

CSS2の選択子及び特性は,スタイルシートが 文書又は利用者エージェントの次の部分を参照することを可能にする。

2.4 CSS設計原則

CSS2は, その前のCSS1と同様に,次の設計原則集に基づている。