この文書は、W3C 標準情報 (TR) の草案 (Working Draft)、 Syntax of CSS rules in HTML's "style" attribute (2000 年 10 月 25 日付) を ToyFish.Net が独自に翻訳したものです。この仕様書の正式なものは W3C のサイトにある英語版であり、その著作権は W3C が保有しています。また、翻訳に誤りがある可能性に留意してください。

誤訳・誤植を発見された方は ToyFish.Net までお知らせください。

翻訳の最終更新日: 2000 年 11 月 2 日

HTML の "style" 属性における CSS 規則の構文

W3C 草案 2000 年 10 月 25 日

この版:: http://www.w3.org/TR/2000/WD-css-style-attr-20001025
最新版:: http://www.w3.org/TR/css-style-attr
前の版:: -
執筆者:: Tantek Çelik (Microsoft)、<tantekc@microsoft.com>; Bert Bos (W3C)、<bert@w3.org>

概要

HTML では、要素に適用されるスタイルシートフラグメントを保持するための "style" 属性を、多くの要素で提供しています。利用できるスタイルシート言語のひとつに、CSS があります。この草案は、"style" 属性で使用できる CSS フラグメントの構文について述べたものです。

この文書の位置付け

このセクションは、公開時点でのこの文書の位置付けについて述べたものです。

この草案は、スタイルアクティビティの一環として CSS 作業グループが製作したものです。この文書は、 W3C やその他の利害関係者が査読するための W3C 草案 (Working Draft) です。草稿であるため、いつでも他の文書によって更新、置換、破棄される可能性があります。W3C 草案を参照資料として使ったり、「進行中の作業」以外のものとして引用するのは適切ではありません。

コメントを歓迎します。公開メーリングリスト (参加方法については使い方を参照) または執筆者までお送りください。議論はメーリングリストで行ってください。

W3C が現在公開している草案の一覧は、http://www.w3.org/TR にあります。

1. 歴史

HTML 4.0 は、STYLE 属性を導入しました。この属性の中には (META HTTP-EQUIV の Content-Style-Type を使うことで) 任意のスタイル言語を入れることができますが、デフォルトでは CSS のみ入れられることになっており、実際にも CSS 以外が入ることはありません。XHTML のモジュラ化 (XHTML Modularization) でも、セマンティクスが HTML 4 と同じである STYLE 属性を持つ、スタイル属性モジュール (Style Attribute Module) を導入しています。 SVG もまた、言語中立な style 属性を導入しています。使用する言語は contentStyleType 属性で指定しますが、この属性のデフォルト値は "text/css" になっています。MathML では、CSS との互換性を保つため、MathML の要素ではすべて style 属性を利用できるとしています。

この文書では、今後の XML ベースの言語で、表示についての情報 (視覚、聴覚、触覚などのいずれによるものであれ) を持つものについても、同じようにユーザーが CSS を使ってその言語で書かれた文書や文書中の要素にスタイル指定できるよう、style 属性を加えることを推奨します。

ここでいくつか例を示しましょう。

擬似要素や擬似クラスを使わず、要素自体のプロパティのみを設定する。
```
<p style="color: #090; line-height: 1.2">...</p>
```
要素に加え、':first-letter' 擬似要素を使って要素の 1 文字目にもプロパティを設定する。この場合は大括弧 ({...}) が必要です:
```
<p style="{color: #090; line-height: 1.2}
          :first-letter {color: #900}">...</p>
```

擬似クラスを使って、動的な状態のそれぞれについて、ソースアンカーにプロパティを設定する。

<a style="{color: #900}
          :link {background: #ff0}
          :visited {background: #fff}
          :hover {outline: thin red solid}
          :active {background: #00f}">...</a>

この文書では、単純な例 (要素自体のプロパティのみ、例 1) や、より複雑な例 (要素の擬似擬似要素や擬似クラスのプロパティ、例 2 と 3) の、両方について定義します。

2. 文法

HTML の "style" 属性で許される CSS フラグメントの構文は、形式的には次のように規定することができます。

inline-stylesheet
  : S* [ declarations | inline-ruleset* ]
  ;
declarations
  : declaration [ ';' S* declaration ]*
  ;
inline-ruleset
  : [ pseudo* S* [ ',' S* pseudo* S* ]* ]?
    '{' S* declarations '}' S*
  ;

ここで定義されていないシンボルの定義については、 CSS 2 仕様の付録 D (appendix D) にある文法を参照してください。

通常のスタイルシートに対して適用されるのと同じ、前方互換な構文解析のための規則が、インラインスタイルシートに対しても適用されます。CSS2 仕様の 4 章を参照してください。

3. カスケーディングの順序

インラインのフラグメントが宣言のみで構成されている場合の意味については、 CSS で既に定義しています。短く言うと、インラインのフラグメント中の宣言は、カスケーディングにおいては、 ID 選択子ひとつからなる選択子 (固有性: a=1, b=0, c=0) に相当する「固有性」で、規則集合内で文書制作者によるスタイルシートの末尾に置かれた場合と、同じ順番になります。例を示します。

<span style="font-weight: bold">...</span>

上記の規則は、インラインのフラグメントの中身がインライン規則集合がである場合へ、容易に一般化できます。つまり、その規則集合は、ID 選択子ひとつおよびそのインライン規則集合にあるのと同数の擬似要素や擬似クラスを持つ選択子に相当する固有性で、文書制作者によるスタイルシートの末尾に同じ順番で置かれた場合と、同等に扱われます。いくつか例を示します。

<p style="{font-weight: bold}               /* a=1 b=0 c=0 */
          :active {color: green}            /* a=1 b=1 c=0 */
          :first-letter {color: #369}       /* a=1 b=0 c=1 */
          :first-letter:active {color: red} /* a=1 b=1 c=1 */
         ">...</p>

カスケーディング規則のその他の部分については、 CSS2 の 6 章を参照してください。

4. 参照文献

[CSS2]: Bert Bos、Håkon Wium Lie、Chris Lilley、Ian Jacobs。Cascading Style Sheets, level 2 (カスケーディングスタイルシート、レベル 2)。 1998 年。W3C 勧告。URL: http://www.w3.org/TR/REC-CSS2
[HTML40]: Raggett, D.、Le Hors, A.、Jacobs, I.。HTML 4.0 Specification (HTML 4.0 仕様)。 1997 年 7 月 8 日。W3C 勧告。URL: http://www.w3.org/TR/REC-html40

[訳注: HTML 4.0 は、1999 年 12 月 24 日付で HTML 4.01 に改訂されています]

[訳注: W3C 仕様の日本語訳については、 http://www.w3.org/Consortium/Translation/Japanese に情報がまとめられています]

翻訳: ToyFish.Net <sardine@toyfish.net>