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

概要

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

この文書の位置付け

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

この草案は、スタイルアクティビティの 一環として、CSS ワーキンググループが製作したものです。この文書は、 W3C 会員やその他の利害関係者がレビューするための W3C 草案 (Working Draft) です。 草案文書であるため、いつでも他の文書によって更新、置換、破棄される可能性があります。 W3C 草案を基準資料として使用したり、「未完成品」以外のものとして引用するのは 適切ではありません。

コメントを歓迎します。公開メーリングリスト www-style@w3.org (加入方法については 利用案内を参照) または 執筆者までお送りください。議論はメーリングリストで行うようにしてください。

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

目次

1. 歴史

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

XML ベースの文書形式がすべて "style" 属性を用意していて、ユーザが CSS で文書や文書中の特定の要素にスタイル指定できるというわけではありませんが、 ある形式で "style" 属性が用意されており、その属性の値に CSS を使えるような場合については、 この仕様がその属性の構文と解釈を規定します。

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

1. 擬似要素や擬似クラスを使わず、要素自体のプロパティのみを設定する。

   <p style="color: #090; line-height: 1.2">...</p>

2. 要素に加え、'::first-letter' 擬似要素を使って要素の 1 文字目にもプロパティを 設定する。この場合は大括弧 ({...}) が必要になる点に注意してください。

   <p style="{color: #090; line-height: 1.2}
             ::first-letter {color: #900}">...</p>

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

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

(注: CSS1 および CSS2 では、'::first-letter' および '::first-line' のつづりは、それぞれ ':first-letter' と ':first-line' でした。 つまり、コロンがひとつだけついていたのですが、CSS3 では、擬似要素については コロンふたつが推奨されるものと思われます。)

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

2. 文法

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

inline-stylesheet
  : S* [ declarations | declarations-block | inline-ruleset* | stylesheet ]
  ;

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

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

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

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

インラインフラグメントが宣言のみで構成されている場合に スタイルシートと "style" 属性がどのようなかたちでカスケードされるかについては、 CSS で既に定義されています。

現在では、単純な宣言に加えて、style 属性で規則集合も使えるようになっています。 style 属性に書かれた規則では、style 属性の固有性に、セレクタの固有性が 加算されます。次の例は、よく知られている '+=' の表記を使って、 固有性の各構成要素に何が加算されるかを示したものです。

例:

<p style="{color: green; width: 10em}                   /* a+=0 b+=0 c+=0 */
          ::first-letter {float: left; font-size: 300%}   /* a+=0 b+=0 c+=1 */
         ">
  これは、局地的な効果を生じさせる (この場合は、1 文字目をドロップキャップにする)
  ためにインラインで style 属性に規則を指定した段落の例です。
</p>

例:

<a href="http://www.w3.org/Style/CSS"
   style="{color: blue; background: white}  /* a+=0 b+=0 c+=0 */
          :visited {color: green}           /* a+=0 b+=1 c+=0 */
          :hover {background: yellow}       /* a+=0 b+=1 c+=0 */
          :visited:hover {color: purple}    /* a+=0 b+=2 c+=0 */
         ">
  訪問済みおよびホバーの一時的な特殊効果を付した、CSS ホームページへの
  ハイパーリンクの例です。
</a>

4. プロファイル

実装の適合性に関して、いくつかのプロファイルが用意されています。 プロファイルは、機能と複雑さを増す性質があります。各プロファイルは、 それより前にあるすべてのプロファイルのスーパーセットになっており、 そのいずれとも後方互換性があります。これにより、実装する際には、 最初は比較的シンプルなプロファイルを実装して、 後でより強力なプロファイルを実装する、ということができます。 実装は、少なくともひとつのプロファイルを実装しなければ、 適合したことにはなりません。

各プロファイルは、許可されるインラインスタイルシートの文法生成規則と 除外されるインラインスタイルシートの文法生成規則の両方を挙げることで、 CSS の構文のうち、'style' 属性で許可される部分と除外される部分を 定義します。プロファイルで除外される生成規則は、前方互換な解析のための 規則にしたがって、認識できないものとして扱われるか、無視されます。 CSS2 仕様書の 4 章を参照してください。

5. 謝辞

フィードバックを寄せてくれた Daniel Glazman、Ian Hickson、Eric A. Meyer、 Björn Höhrmann に感謝します。

6. 参照文献

6.1. 規定としての参照文献

[CSS2]

Bert Bos; Håkon Wium Lie; Chris Lilley; Ian Jacobs。Cascading Style Sheets, level 2 (カスケーディングスタイルシート レベル 2)。1998 年。 W3C 勧告 (Recommendation)。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 勧告 (Recommendation)。 URL: http://www.w3.org/TR/REC-html40

6.2. 参考としての参照文献

[MathML]

Patrick Ion; Robert Miner。Mathematical Markup Language (MathML™) 1.01 (数式マーク付け言語 (MathML™) 1.01)。 1999 年。W3C 勧告 (Recommendation)。 URL: http://www.w3.org/TR/REC-MathML

[SVG10]

Jon Ferraiolo 執筆 Scalable Vector Graphics (SVG) 1.0 Specification (スケーラブルベクタグラフィクス (SVG) 1.0 仕様書)。 2000 年。W3C 勧告候補 (Candidate Recommendation)。URL: http://www.w3.org/TR/SVG

[XHTMLMOD]

Modularization of XHTML ™ (XHTML™ のモジュラ化)。 2000 年。W3C 勧告候補 (Candidate Recommendation)。URL: http://www.w3.org/TR/xhtml-modularization