`style` 要素

since: 31st/Aug./2001; last modified: 8th/Sep./2001

style 要素タイプはスタイルシートモジュールに含まれる要素で、 head 要素の子要素として定義されています。 head 要素は任意の個数 style 要素を持って良いことになっています。

style 要素タイプの役割は、当該文書に適用するスタイル情報を記述することです。複数の文書に適用させるスタイル情報は、 link 要素を用いて、外部スタイルシートで用意するようにしましょう。

Stylesheet モジュール [拙訳]: style 要素

モジュールの立場としては、 style 属性は「スタイル属性モジュール」で定義されます。

概念モジュール定義
要素	属性	最小内容モデル
`style`	`I18N`, `media` (MediaDesc), `title` (Text), `type`* (ContentType), `xml:space="preserve"`	PCDATA

実装： DTD

内容モデル

style 要素の内容は、解析対象となる文字データ (Processed Character DATA) です。単なる文字データ (CDATA) ではないので、マークアップ区切り文字は意味を持ち、文字実体参照などは展開されますが、それ以外は通常のスタイルシートの宣言です：

<styler type="text/css">
body { background: #cfc; color: #030 }
p { background: #ccf; color: #003 }
</style>

CDATA セクション

CDATA にする為には CDATA セクションを利用するべきです：

<styler type="text/css">
<![CDATA[
body { background: #cfc; color: #030 }
p { background: #ccf; color: #003 }
]]>
</style>

これは規格としては正しいのですが、 MS I.E.6, Netscape6 を含む殆どのブラウザでは CDATA セクションは正しく解釈されないので、利用しない方が良いでしょう。

HTML 4 では、スタイルシートをサポートしていないブラウザで、スタイル情報がテキストのまま表示されてしまうのを避けるために、コメントアウトするように推奨されていました：

<styler type="text/css">
<!--
h1 { background: #030; color: #cfc }
-->
</style>

HTML 4 では style 要素の内容が CDATA だったので、 "<!--" は解析されず、コメント区切りとしての意味を持てません。逆に、 style 要素をサポートしていないユーザエージェントは、内容を通常の PCDATA と解釈してしまうので、コメントが有効になり、内容が無視されるのです。

しかし、 XHTML では style 要素の内容も PCDATA になったので、 "<!--" はコメント開始のマークアップ区切りとして解釈されてしまいます。そして、 XML では、コメント内部は完全に無視され得ます。したがって、スタイル情報も意味を失い、働かない可能性があります。

内容が PCDATA に定義されている時点で、後方互換としてのコメントアウトは利用できなくなりました。必要な場合は、外部スタイルシートを使いましょう。

「CDATA と PCDATA」と「コメント」に関しては、本稿付録「コメントと CDATA セクション」を参照ください。

属性

I18N

国際化関連の属性の集合：具体的には、 xml:lang 属性

media = MediaDesc

スタイル情報を適用するメディアの指定。
具体的にはメディア記述子。
コンピュータスクリーンならば media="screen"、印刷紙媒体ならば media="print"

title = Text

スタイルシート情報の補足情報

type = ContentType

必須属性
スタイルシートの種類を指定。
値は [RFC2045] で定義されている。
CSS ならば、 type="text/css"

xml:space = preserve

値は preserve に固定されている。
一般に XML 文書では、空白を保持して欲しい要素には xml:space="preserve" を与えます。反対に、ユーザーエージェントの初期値に任せる場合は、 xml:space="default" を指定します。

サンプル

<head>
<!--HTTP応答メッセージヘッダへの出力-->
  <meta http-equiv="content-type"
        content="text/html; charset=UTF-8" />
<!--文書のタイトル-->
  <title>XHTML 1.1 とはなんだろうか</titel>
<!--当該文書に対する「最初」と「索引」のページの参照-->
  <link rel="start index" href="./index.html" />
<!--コンピュータスクリーンへの外部スタイルシートの参照-->
  <link rel="stylesheet" href="./XHTML11/core.css"
        type="text/css" media="screen"
        title="Core Style Information for Computer Screen" />
<!--印刷媒体への外部スタイルシートの参照-->
  <link rel="stylesheet" href="./XHTML11/paper.css"
        type="text/css" media="print"
        title="Style Information for Printed Paper" />
<!--当該文書内の要素についてのスタイル情報の記述-->
<style type="text/css" media="screen,print">
p.memo { font: italic bold 80% sans-serif }
</style>
</head>

スタイルシートの概要に関しては本稿付録の「CSS」、詳細に関しては別稿「CSS とはなんだろうか」を参照ください。