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

2 CSS 2.2の概要

目次

2.1 HTML向けCSS 2.2の簡単チュートリアル

このセクションは規範的ではありません。

このチュートリアルでは、シンプルなスタイルシートの設計がいかに簡単かを示します。このチュートリアルでは、HTMLの基本的な知識（[HTML4]参照）と、デスクトップ出版の基本用語を多少知っている必要があります。

まず、小さなHTML文書から始めます：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bachのホームページ</TITLE>
  </HEAD>
  <BODY>
    <H1>Bachのホームページ</H1>
    <P>Johann Sebastian Bachは多作な作曲家でした。
  </BODY>
</HTML>

H1要素のテキスト色を赤に設定するには、次のCSS規則を書きます：

  h1 { color: red }

CSSの規則は主に2つの部分から成り立ちます：セレクター（'h1'）と宣言（'color: red'）。HTMLでは要素名は大文字と小文字を区別しないので、'h1'でも'H1'でも動作します。宣言は2つの部分に分かれます：プロパティ名（'color'）とプロパティ値（'red'）。上記の例はHTML文書のレンダリングに必要なプロパティのうち1つだけを指定していますが、それ単体でもスタイルシートとして成立します。他のスタイルシートと組み合わせて（CSSの重要な特徴のひとつはスタイルシートの組み合わせです）、この規則が文書の最終的な表示を決定します。

HTML 4仕様では、HTML文書に対してスタイルシート規則を指定する方法が定義されています：HTML文書内に記述する方法と、外部スタイルシートを利用する方法です。スタイルシートを文書内に記述するには、STYLE要素を使用します： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bachのホームページ</TITLE>
  <STYLE type="text/css">
    h1 { color: red }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bachのホームページ</H1>
    <P>Johann Sebastian Bachは多作な作曲家でした。
  </BODY>
</HTML>

最大限の柔軟性を確保するため、著者は外部スタイルシートの指定を推奨します。外部スタイルシートは、HTML文書を修正することなく変更でき、複数の文書間で共有することも可能です。外部スタイルシートへのリンクにはLINK要素を使います： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bachのホームページ</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bachのホームページ</H1>
    <P>Johann Sebastian Bachは多作な作曲家でした。
  </BODY>
</HTML>

LINK要素では以下を指定します：

スタイルシートと構造化されたマークアップの密接な関係を示すため、このチュートリアルでは引き続きSTYLE要素を使用します。さらに色指定を追加してみましょう： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bachのホームページ</TITLE>
  <STYLE type="text/css">
    body { color: black; background: white }
    h1 { color: red; background: white }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bachのホームページ</H1>
    <P>Johann Sebastian Bachは多作な作曲家でした。
  </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のホームページ</TITLE>
  <STYLE type="text/css">
    body { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bachのホームページ</H1>
    <P>Johann Sebastian Bachは多作な作曲家でした。
  </BODY>
</HTML>

最初に注目するポイントは、複数の宣言が中括弧（{...}）内でブロック化され、セミコロンで区切られていることです。最後の宣言の後にもセミコロンを付けることができます。

BODY要素の最初の宣言はフォントファミリーを「Gill Sans」に設定します。そのフォントが利用できない場合、ユーザーエージェント（よく「ブラウザー」と呼ばれます）は'sans-serif'という5種類の汎用フォントファミリーのひとつを使用します。BODYの子要素は'font-family'プロパティの値を継承します。

2つ目の宣言はBODY要素のフォントサイズを12ポイントに設定します。「ポイント」単位は印刷ベースのタイポグラフィでフォントサイズやその他の長さに一般的に用いられます。これは環境に依存しない絶対単位の一例です。

3つ目の宣言は周囲に合わせて拡大・縮小する相対単位を使っています。「em」単位は要素のフォントサイズを基準にします。この場合、BODY要素の余白はフォントサイズの3倍の幅になります。

2.2 XML向けCSS 2.2の簡単チュートリアル

このセクションは規範的ではありません。

CSSは、eXtensible Markup Language [XML11]のアプリケーションなど、どんな構造化文書形式にも利用できます。実際、XMLはHTML以上にスタイルシートに依存します。なぜなら、著者が独自の要素を作成でき、ユーザーエージェントがそれをどのように表示すべきか分からない場合があるからです。

以下は簡単なXML断片です： 

<ARTICLE>
  <HEADLINE>フリードリヒ大王がBachに会う</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    ある晩、彼が
    <INSTRUMENT>フルート</INSTRUMENT>の準備をして
    楽士たちが集まったとき、士官が到着した
    見知らぬ者たちの名簿を持ってきた。
  </PARA>
</ARTICLE>

この断片を文書風に表示するためには、まずどの要素がインラインレベル（改行を起こさない）で、どの要素がブロックレベル（改行を起こす）か宣言する必要があります。 

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

最初の規則はINSTRUMENTをインラインに、2つ目の規則はカンマ区切りのセレクターリストで他の要素をすべてブロックレベルに宣言しています。XMLでは要素名は大文字小文字を区別するため、小文字（例：'instrument'）で書かれたセレクターと大文字（例：'INSTRUMENT'）は異なるものとなります。

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

<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>フリードリヒ大王がBachに会う</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    ある晩、彼が
    <INSTRUMENT>フルート</INSTRUMENT>の準備をして
    楽士たちが集まったとき、士官が到着した
    見知らぬ者たちの名簿を持ってきた。
  </PARA>
</ARTICLE>

視覚的なユーザーエージェントは上記の例を次のように整形できます：

表示例   [D]

「フルート」という単語が段落内に残っていることに注目してください。これはインライン要素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. ソース文書を解析して文書ツリーを作成する。
  2. 対象メディアタイプを特定する。
  3. 文書に関連付けられた、対象メディアタイプ用に指定されたすべてのスタイルシートを取得する。
  4. 文書ツリーのすべての要素に、対象メディアタイプに適用可能なすべてのプロパティに1つの値を割り当てる。プロパティの値はカスケードと継承のセクションで説明されている仕組みに従って割り当てられます。

    値の計算の一部は、対象メディアタイプに適した整形アルゴリズムに依存します。例えば、対象メディアが画面の場合、ユーザーエージェントはビジュアル整形モデルを適用します。

  5. 注釈付けされた文書ツリーから 整形構造を生成します。多くの場合、整形構造は文書ツリーに非常に似ていますが、疑似要素や生成コンテンツを用いる場合など大きく異なることもあります。まず、整形構造は必ずしも「ツリー型」である必要はありません。構造の性質は実装に依存します。次に、整形構造は文書ツリーより情報量が多かったり少なかったりします。例えば、文書ツリー内のある要素の'display'プロパティの値が'none'の場合、その要素は整形構造には何も生成しません。一方、リスト要素は、内容やリストスタイル情報（例：箇条書き画像）など、整形構造により多くの情報を生成する場合があります。

    CSSユーザーエージェントはこの段階で文書ツリーを変更しません。特に、スタイルシートによって生成されたコンテンツは文書言語処理系（再解析など）にフィードバックされません。

  6. 整形構造を対象メディアに転送します（例：印刷、画面表示、音声レンダリング等）。

2.3.1 キャンバス

すべてのメディアにおいて、キャンバスとは「整形構造が描画される空間」を指します。キャンバスは各次元で無限ですが、実際の描画は通常、ユーザーエージェントが対象メディアに応じて確立する有限領域内で行われます。例えば、画面にレンダリングするユーザーエージェントは最小幅を設定し、ビューポートの寸法に基づいて初期幅を選びます。ページへのレンダリングでは通常、幅と高さの制約があります。聴覚ユーザーエージェントは音空間で制限を課しますが、時間には制限を課しません。

2.3.2 CSS 2.2のアドレッシングモデル

CSS 2.2のセレクターとプロパティは、スタイルシートが文書やユーザーエージェントの以下の部分を参照できるようにします：

2.4 CSS設計原則

このセクションは規範的ではありません。

CSS 2.2（およびそれ以前のCSS2やCSS1）は、設計原則のセットに基づいています：

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