XMLのCSS2チュートリアル

構造化

CSSはどんな形式の構造化文書にも、たとえば eXtensible Markup Language (XML)の応用に対しても利用することができます。XML言語においては、ブラウザ(UA)が表示方法を知らない要素をCSSで定義するので、HTML以上にスタイルシートに依存することになります。

簡単なXML(拡張子.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要素がインライン要素だと宣言し、後者の規則では、セレクタをコンマ[,]で区切って、その他の要素がすべてブロック要素だと宣言しています。

スタイルシートの適用

スタイルシートをXML文書にリンクする1つの提案は、処理命令(processing instruction)を用いる方法です。


<?xml:stylesheet type="text/css" href="tmyk.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>

外部スタイルシート「tmyk.css」に下記のように記述することでスタイルシートが適用されます。


INSTRUMENT { display: inline }

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

ブラウザ(視覚系UA)ならこれを次のように整形するでしょう。

INSTRUMENTというインライン要素の内容モデル(要素内容)である「flute」という単語は、インライン要素(前後に改行が入らない)なので段落内に収まった形で表示されています。

さらにスタイルを追加してみます

たとえば、見出しは他のテキストよりも大きい文字にしたい、記事の執筆者名をイタリック(斜体)で表示させたい場合などは、もう少しほかのスタイルを追加してみます。


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 }

ブラウザ(視覚系UA)ならこれを次の様に整形するでしょう。

更にスタイルを付け加えていけば文書の体裁をより向上させることができます。