前章   次章   目次   プロパティ   索引  

2 CSS 2.2の手引き

目次

2.1 HTMLのための簡潔なCSS 2.2チュートリアル

この節は非規範的である。

このチュートリアルでは、単純なスタイルシートの設計がいかに容易であるかを示す。このチュートリアルに関しては、わずかなHTML [HTML4]と基本的なDTP用語についての知識が必要である。

小さなHTML文書から始める：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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: red }

CSS規則は、セレクター（'h1'）および宣言（'color:red'）という2つの主要部分から構成される。HTMLにおいて、要素名は大文字と小文字を区別しないため、'h1'は'H1'とまったく同じ働きをする。宣言は、プロパティ名（'color'）とプロパティ値（'red'）という2つの要素を持つ。上の例は、HTML文書のレンダリングに必要なプロパティの1つのみに影響を及ぼすよう試みたにすぎないとはいえ、それだけでスタイルシートであると言える。他のスタイルシートと組み合わせることで（CSSの基本的な機能の1つは、スタイルシートを組み合わせることにある）、最終的な外観が決定される。

HTML 4仕様は、スタイルシート規則をHTML文書内に、または外部スタイルシートを経由して指定する方法を定義する。スタイルシートを文書に埋め込むためには、STYLE要素を使用するとよい：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    h1 { color: red }
  </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.01//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.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    body { color: black; background: white }
    h1 { color: red; background: white }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

今、スタイルシートは4つの規則を含んでいる：最初の2つはBODY要素の色と背景を設定する（テキストの色と背景色を同時に設定することはよいアイデアといえる）と同時に、最後の2つはH1要素の色と背景を設定している。P要素には色が設定されていないので、親要素、つまりBODY要素から色を継承することになる。H1要素もまたBODY要素の子要素であるが、2番目の規則が継承値を上書きする。CSSでは、異なる値の間でこのような衝突がたびたびあるが、この仕様はそれらを解決する方法を説明する。

CSS 2.2は、'color'を含む90以上のプロパティを持つ。その他のプロパティも見てみよう： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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'フォントファミリーを使用するだろう。これは5つある総称フォントファミリーのうちの1つで、すべてのユーザーエージェントが認識するものである。BODY要素の子要素は、'font-family'プロパティの値を継承する。

2番目の宣言は、BODY要素のフォントサイズを12ポイントに設定している。"ポイント"という単位は、一般にフォントサイズやその他の長さの値を示すために、印刷に基づく組版において用いられる。これは、環境に呼応して増減しない絶対単位の例である。

3番目の宣言は、その環境に関しては増減する相対単位を用いている。"em"という単位は要素のフォントサイズを参照する。この場合、BODY要素の周囲のマージンはフォントサイズの3倍幅のある数値となる。

2.2 XMLのための簡潔なCSS 2.2チュートリアル

この節は非規範的である。

CSSは、たとえば拡張可能なマークアップ言語[XML11]のアプリケーションのような、どのような構造化文書形式でも利用できる。実際に、著者はユーザーエージェントが表示する方法を知らないXML要素をマークアップすることができるので、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において要素名は大文字・小文字を区別する。そのため、小文字で書かれたセレクター（たとえば、'instrument'）と大文字で書かれたセレクター（たとえば、'INSTRUMENT'）は異なるものとなる。

XML文書にスタイルシートをリンクさせる1つの方法は、処理命令を使用することである： 


<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>

視覚ユーザーエージェントは上記の例を次のように書式を設定する：

レンダリング例   [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 }

視覚ユーザーエージェントは上記の例を次のように書式を設定する：

レンダリング例   [D]

スタイルシートにより多くの規則を追加することで、文書の表現をより向上させることができるだろう。

2.3 CSS 2.2処理モデル

この節は小節も含めて非規範的である。

この節は、ユーザーエージェントがCSSをサポートする動作方法として可能な1つのモデルを提示する。これは抽象的なモデルにすぎない。実際の実装は異なってもよい。

このモデルにおいて、ユーザーエージェントは以下の操作によってソースを処理する：

  1. ソース文書を構文解析し、文書ツリーを作成する。
  2. ターゲットメディアタイプを識別する。
  3. ターゲットメディアタイプに指定された文書に関連する、すべてのスタイルシートを取り出す。
  4. ターゲットメディアタイプに適用可能なすべてのプロパティに単一の値を割り当てることにより、文書ツリーのすべての要素に注釈を付ける。プロパティはカスケーディングと継承の節で説明する手順にしたがって値を割り当てられる。

    値の計算の一部は、ターゲットメディアタイプに適切な整形アルゴリズムに依存する。たとえば、ターゲットメディアが画面であれば、ユーザーエージェントは視覚整形モデルを適用する。

  5. 注釈付きの文書ツリーから、整形構造を生成する。整形構造は文書ツリーとしばしば酷似するが、特に著者が疑似要素または生成内容を使用した場合、著しく異なることもある。まず、整形構造は少しも"ツリー状"である必要はない―構造の特性は実装に依存する。次に、整形構造は文書ツリー以上または以下の情報を含んでもよい。たとえば、文書ツリー内のある要素が'display'プロパティに'none'の値を持つ場合、その要素は整形構造には何も生成しないだろう。一方リスト要素は、整形構造でより多くの情報を生成してもよい：リスト要素の内容とリストスタイルの情報（たとえば、黒丸の画像）。

    CSSユーザーエージェントはこの段階で文書ツリーを改変しないことに注意されたい。とくに、スタイルシートに起因する内容生成は、文書言語プロセッサーにフィードバックされることはない（たとえば、再解析のために）。

  6. 整形構造をターゲットメディアに転送する（たとえば、結果を印刷する、画面上に表示する、音声として表現する、など）。

2.3.1 キャンバス

すべてのメディアに対して、用語キャンバスは"整形構造がレンダリングされる空間"を表す。キャンバスは各次元について無限空間であるが、一般的にレンダリングは、ターゲットメディアによって設置されたキャンバスの有限範囲で行われる。たとえば、画面表示をするユーザーエージェントは、一般的に最小幅を設け、ビューポートの次元に基づく初期幅を選択する。ページ出力をするユーザーエージェントは一般的に幅と高さに制限を設ける。聴覚ユーザーエージェントは音声空間に関する制限をしてもよいが、時間の制限をしない。

2.3.2 CSS 2.2アドレス指定モデル

CSS 2.2セレクターおよびプロパティは、文書またはユーザーエージェントの以下の部分の参照をスタイルシートに割り当てる：

2.4 CSS設計原則

この節は非規範的である。

以前のCSS2およびCSS1と同様に、CSS 2.2は一連の設計原則に基づいている：

前章   次章   目次   プロパティ   索引