* style 要素型 (HTML, XHTML 1) [38] [[HTML]] の [DFN[[CODE(HTMLe)[style]] 要素型]]の要素を使うと、 文書の頭部 ([CODE(HTMLe)[[[head]]]]) に[[スタイル・シート]]規則を入れることができます。 [39] 仕様書: -[[HTML 4]] -- [CITE[14.2.3 Header style information: the [CODE(HTMLe)[STYLE]] element]] --[CITE[14.5 Hiding style data from user agents]] --[CITE[Element content]] - [[XHTML 1.0]] --[CSECTION[4.8. Script and Style elements]] (参考) --[CSECTION[C.14. Referencing Style Elements when serving as XML]] (参考) [3] :[[局所名]]:[CODE(HTMLe)[style]] :[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容模型]] ([[HTML 4]]):[CODE(SGML)[[[CDATA]]]] :内容模型 ([[XHTML 1]]):[CODE(SGML)[[[PCDATA]]]] :出現できる文脈:[CODE(HTMLe)[[[head]]]] の子供として任意個 :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態,出典 ,[CODE(HTMLa)[[[class]]]] , ,(なし) ,[[級]] , ,[CODE(HTMLa)[[[dir]]]] , ,(継承) ,[CODE(HTMLa)[title]] [[書字方向]] ,[HTML 4] ,[CODE(HTMLa)[[[disabled]]]],,,無効化,非標準 ,[CODE(HTMLa)[[[id]]]] ,[[ID]] ,(なし) ,唯一識別子 , ,[CODE(HTMLa)[[[lang]]]] , ,(継承) ,[CODE(HTMLa)[title]] [[自然言語]] ,[HTML 4] ,[CODE(HTMLa)[[[xml]]:lang]] , ,(継承) ,自然言語 ,[XHTML 1] ,[CODE(HTMLa)[[[media]]]] ,[CODE(SGML)[%[[MediaDesc]]]] , ,適用媒体 ,[HTML 4] ,[CODE(HTMLa)[[[notation]]]] ,[CODE(SGML)[[[NOTATION]]]] , ,スタイル言語 ,[[HTML 3.0]] ,[CODE(HTMLa)[xml:[[space]]]] , ,[CODE(XML)[[[preserve]]]] ,[[空白]]の扱い ,[XHTML 1.0] ,[CODE(HTMLa)[[[style]]]] , ,(なし) ,スタイル指定 , ,[CODE(HTMLa)[[[title]]]] ,[CODE(SGML)[%[[Text]]]] ,(なし) ,注釈的題 ,[HTML 4] ,[CODE(HTMLa)[[[type]]]] ,[CODE(SGML)[%[[ContentType]]]] ,(必須) ,[[スタイル言語]] ,[HTML 4] ,[CODE(XMLa)[[[xmlns]]]],[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定,==,[[名前空間名]],W3C 勧告,[[XHTML m12n]] [[#comment]] ** 内容 *** 構文 [4] [[XHTML]] になる前の HTML では、 [CODE(HTMLe)[style]] の[[内容]]は [CODE(SGML)[[[CDATA]]]] と宣言されていました。 これは、 [CODE(SGML)[[[STAGO]]]] ([CODE(char)[<]]) や [CODE(SGML)[[[ERO]]]] ([CODE(char)[&]]) も含めて[[終了タグ]]までの文字列をすべて [CODE(HTMLe)[style]] 要素の内容として扱うことを意味します。 ですから、例えば [PRE(HTML)[ <[CODE(HTMLe)[style]] [CODE(HTMLa)[type]]="[CODE(MIME)[text/css]]"> '''''' ]PRE] と記述したとしても、強調した部分は SGML の[[マーク]]ではなく、 単なる[[文字データ]]扱いになり、 SGML の[[注釈宣言]]とは見なされません。 (その一方で、 [CODE(HTMLe)[style]] が [CODE(SGML)[CDATA]] と知らない古い UA からは注釈宣言に見えるので、中身を隠すことができるのです。) [5] ところが、 [[XML]] では内容を [CODE(SGML)[CDATA]] にすることができません。そこで、 [[XHTML 1]] では [CODE(HTMLe)[style]] の内容は [CODE(XML)[(#[[PCDATA]])*]] と宣言されています。 これは、通常の内容の扱いと同じになる、つまり [CODE(char)[<]] や [CODE(char)[&]] は [CODE(SGML)[[[stago]]]] などや [CODE(SGML)[[[ero]]]] などと見なされ得ることを意味します。 この場合、 >>4 の注釈宣言に見える部分は本当に注釈宣言として扱われます。 このままだと [CODE(HTMLe)[style]] は実質空になってしまいます。 意図した通りに解釈させるためには [PRE(HTML)[ <[CODE(HTMLe)[style]] [CODE(HTMLa)[type]]="[CODE(MIME)[text/css]]"> [CODE(HTMLe)[p]] {color: red; background-color: white} ]PRE] としなければなりません。 (当然、古い UA から隠すという機能は失われます。) [6] スタイル・シートの一部として [CODE(char)[<]] や [CODE(char)[&]] を書きたいとき、 >>4 では (終了タグと見なされてしまう場合を除き) そのまま書くことができましたが、 >>5 では非[[整形式]]になってしまいます。 しかし、いちいち escape するのが面倒な場合には、 [[[CODE(XML)[CDATA]]区間]]を使って、 [PRE(HTML)[ <[CODE(HTMLe)[style]] [CODE(HTMLa)[type]]="[CODE(MIME)[text/css]]"> [CODE(XML)['''''']] ]PRE] のように書くことができます。 [CODE(XML)[CDATA]] 区間の中では [CODE(SGML)[[[MSE]]]] ([CODE(XML)[''']''']>]]) を除いてそのままの文字データと解釈されます。 [7] なお、 SGML 注釈宣言風の[Q[隠し方]]は HTML の一部ではなく、 スタイル言語の一部です。スタイル言語によっては使えないこともありますから、 注意してください。 [[#comment]] *** 意味 [42] [CODE(HTMLe)[style]] の内容は、 [CODE(HTMLa)[type]] で識別される[[スタイル言語]]によって解釈されます。 構文等もスタイル言語によります。 [[#comment]] *** CSS [44] [[CSS]] の仕様書は、 SGML の注釈宣言のはじめと終わりのようなものについて次のように述べています。 > CSS style sheets are often embedded in HTML documents, and to be able to hide style sheets from older UAs, it is convenient put the style sheets inside HTML comments. The HTML comment tokens "" may occur before, after, and in between the statements. They may have whitespace around them. [INS[CSS1 7.1 Forward-compatible parsing ]] > [INS[和訳 (参考):]] CSS スタイル・シートはしばしば HTML 文書に埋込まれまして、 古めの UA からスタイル・シートを隠すことができるように、 スタイル・シートを HTML 注釈の中に入れるのが便利です。 HTML 注釈字句 [CODE[]] は文の前・後・間に出現できます。 そのまわりに空白を入れても構いません。 > CSS also allows the SGML comment delimiters ("") in certain places, but they do not delimit CSS comments. They are permitted so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification ([HTML40]) for more information. [INS[CSS2 4.1.9 Comments ]] > [INS[和訳 (参考):]] CSS はある場所で SGML 注釈区切子 ([CODE(SGML)[]]) をも認めていますが、この両者は CSS 注釈を区切るものではありません。 両者を認めることによって、 HTML 原始文書 (の [CODE(HTMLe)[style]] 要素) に出現するスタイル規則を HTML 3.2 以前の利用者エージェントから隠すことができます。 詳しくは HTML 4.0 仕様書をご覧ください。 更に、 CSS2 附属書 D の文法規則でも規則など ([[選択子]]等 + [CODE(CSS)[{]] 〜 [CODE(CSS)[}]]) の部分の外側ならどこにでも書けるように書かれています。 [45] 仕様書の規定を読む限りでは [CODE(HTMLe)[style]] 要素以外の場所で使う時にも [Q[SGML 注釈区切子]]を書けるように思えますが、 試しに外部スタイル・シートなどで使ってみると正しく処理できない UA も少なくないようです。 [47] CSS2 は HTML 4.0 を見よと言っていますが、 HTML 4 には CSS を注釈宣言のようなもので囲んだ例が挙げられているだけです。一体何を見せたかったのでしょうかね? ([[名無しさん]]) [[#comment]] *** メモ [46] XHTML では XSL のような XML base のスタイル言語も使えます。 但し、その場合にはもちろん [CODE(XML)[CDATA]] マーク区間で包むのは使えませんし、 注釈宣言での隠蔽などもってのほかです。 更に、陽に文書型宣言を行っている場合には適当に [[DTD]] を書き換える必要があるでしょう。 [21] >>46 もっとも、 XSL は XML 対象のスタイル言語ですから、 たとえ書けたとしても意味がありませんね。で、実質 XML base のスタイル言語は他にないですから、どうでも良い問題といえばそれまでではあります。 [[#comment]] ** 応用 [40] [[スタイル・シート]]に対応しないか、または [CODE(HTMLa)[type]] で指定されたスタイル言語に対応しない UA は、 [CODE(HTMLe)[style]] の内容を隠さなければなりません。 文章の一部としてレンダリングするのは[RUBY[誤り] [エラー]]です。 [SUP[ [HTML 4] ]] 対応していたらレンダリングしても良いようにも読める書き方ですが、 そういう意図ではないはずです。 [41] スタイル言語によっては、 ([[SGML]] の注釈風に記述することで) HTML 4 非適合 UA で内容がレンダリングされないようにする機能を持つものもあります。 [[#comment]] ** 歴史 [8] 1995/05/06 の [[HTML 3.0]] draft [[DTD]] では [CODE(HTMLe)[style]] 要素は次のように定義されています。 [PRE(SGML)[ ]PRE] これを次のようにして使うつもりでした。 [PRE(HTML)[ <[CODE(HTMLe)[style]] [CODE(HTMLa)[notation]]=dsssl-lite> [INS[(DSSSL)]] ]PRE] [CODE(HTML)[w3c-style]] はおそらく [[DSSSL]] の subset でしょう。 [1] 1997年1月に勧告された [[HTML 3.2]] は将来の版で使用するとして予約だけしています。属性はありませんでした。 HTML 3.2 DTD より: > [CODE(SGML)[]] [18] その後に発表された ''HTML DTD with support for Style Sheets'' (HTML 3.2 + StyleSheet) は [CODE(HTMLe)[style]] 要素に [CODE(HTMLa)[type]] 属性 (省略可能), [CODE(HTMLa)[media]] 属性 (列挙値 [CODE(SGML)[(print | screen | projection | braille | aural | all)]], 既定値 [CODE(HTML)[all]]), [CODE(HTMLa)[title]] 属性 (省略可能) を規定していました。 [20] 次の ''HTML DTD with support for Style Sheets'' で、 [CODE(HTMLa)[media]] 属性は読点区切りの複数指定が出来るように [CODE(SGML)[CDATA]] に改められました。 [[#comment]] ** 例 [43] CSS を使った例 [PRE(HTML)[ Example of STYLE

This H1 is affected by our style

This one is not affected by our style

]PRE] [WEAK[(HTML 4 仕様書より、改)]] [[#comment]] ** 他との関係 [48] [[XHTML]] では、 [[XML]] [[応用]]との互換性のため [CODE(HTMLe)[style]] 要素に [CODE(HTMLa)[[[id]]]] 属性を指定し、 [CODE(XML)[[[xml-stylesheet]]]] [[処理指令]]からこれを参照するべきです。 [SRC[XHTML 1.0 C.14]] [[#comment]] ** メモ [[#comment]] * style 属性 (HTML, XHTML 1, SVG, MathML, XUL, i-XHTML) [25] [[HTML]] のほとんどの要素型で定義されている [DFN[[CODE(HTMLa)[style]] 属性]]は、その要素のスタイル情報を指定します。 [26] 仕様書: - [[HTML 4]] -- 14.2.1 Setting the default style sheet language -- 14.2.2 Inline style information - [SVG 1.1] ''Styling - SVG 1.1 - 20030114'' - [MathML 2.0] ''MathML Fundamentals'' - [XUL] ''XulPlanet.com - XUL Element Reference'' - [i-XHTML] ''DoCoMo Net - iモード対応XHTML'' - [VML] ''VML - the Vector Markup Language'' [12] [CODE(HTML)[style]] 属性は、ほとんどの [[HTML]], [[SVG]], [[MathML]], [[XUL]], [[i-XHTML]] 要素にあって、 その要素に適用するスタイル指定を値に持ちます。 [[#comment]] ** 代替 [16] [[XHTML 1.1]] ではこの属性は'''非推奨'''とされています。 [[MathML 2.0]] でもこの属性は'''非推奨'''とされています。 代わりに、外部スタイル・シートを使って指定することができます。 [[#comment]] ** 属性値 [13] この属性の値は、 [CODE(SGML)[%[[StyleSheet]]]] です。 [[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。 適当な[[スタイル言語]]によって解釈されます。 [27] この属性は省略可能です。 [[#comment]] *** 属性値のスタイル言語 [28] [[HTML 4]] では、 既定スタイル言語 ([CODE(HTTP)[[[Content-Style-Type]]:]] 欄の説明を参照。) の構文に従って指定します。 ただし、多くの HTML UA は [[CSS]] ([CODE(MIME)[[[text/css]]]]) に決め打ちしています。 [29] [[SVG]] では、 [CODE(XMLe)[[[svg]]]] 要素の [CODE(XMLa)[[[contentStyleType]]]] 属性で指定した言語になります。 [30] [[MathML]], [[XUL]] では CSS で固定です。 [[i-XHTML]] では [[i-CSS]] です。 [31] [[XSL]] のような XML 系スタイル言語を使うことって可能なのでしょうかね? [[#comment]] *** CSS [36] [[CSS2]] の場合、 [CODE(HTMLa)[style]] 属性値として指定するのは括弧無しの[RUBYB[宣言ブロック構文] [declaration block syntax]]です。 (という一文が [[HTML 4.01]] で一例として追加されました。 [[HTML 4.0]] ではこの種の説明が一切ありませんでした。) CSS 側には一切規定がありません (だから HTML 4.01 で慌てて追加したのでしょう)。 構文を拡張する WD [CSSATTR] が古くから提案されていますが、 [[CSS3]] にあわせて勧告になるのか、ならないのか。 - [CSS2] 4.1.8 Declarations and properties - [CSSATTR] ''Syntax of CSS rules in HTML's "style" attribute'' [[#comment]] ** 実装 [32] HTML 4 では [CODE(HTMLa)[style]] 属性を使う時は [ABBR[CST] [[CODE(HTTP)[Content-Style-Type]]]] の指定が必須なわけですが、 [[Gecko]] は確かに [CODE(HTTP)[Content-Style-Type]] が無指定または [CODE(MIME)[text/css]] 以外だと無視してくれました。 しかし [[WinIE 6]] は遠慮なく適用します。 ([[名無しさん]] [WEAK[2004-03-23 06:16:14 +00:00]]) [33] >>32 無指定のときは既定値の [CODE(MIME)[text/css]] となるべき (should) だから [SUP[ [HTML 4] ]]、よくないんじゃないか? [35] >>32 の無指定のときの結果は間違いかも。 [[#comment]] ** 他との関係 [23] HTML 4 では、 [CODE(HTMLa)[style]] 属性を使用する時は必ず [CODE(HTTP)[[[Content-Style-Type]]]] の指定が必要です。 [37] 複数の要素にスタイルを指定するためには、 [CODE(HTMLe)[style]] 要素を使用するべきです。更に、柔軟性のために外部スタイル・シートを使用するべきです。 [SUP[ [HTML 4] ]] [[#comment]] ** 歴史 [19] ''HTML DTD with support for Style Sheets'' (HTML 3.2 + Style Sheet) はほとんどの要素型に [CODE(HTMLa)[style]] 属性を定義しています。 [[#comment]] ** 例 [34] [[CSS]] を使用した例 [PRE(HTML)[

Aren't style sheets wonderful? ]PRE] [WEAK[(HTML 4 仕様書より)]] [24] UA が [ABBR[CST] [[CODE(HTTP)[Content-Style-Type]]]] を正しく扱っているかのテスト: [[#comment]] ** メモ [14] [CODE(HTML)[style]] 属性はある特定の要素の表現を制御するのに便利ですが、表現と構造を分離することを考えるとあまり得策ではありません。 (例えば、一つの文書に複数のスタイル・シートを適用させることを考えると、文書そのものにスタイル指定があるのは有害です。) その問題を理解した上で使う (永続的なスタイルの指定とか。) のであれば問題はないでしょうが、そうでなければ [[i-XHTML]]/[[i-CSS]] のような “[[TagSoup]] の CSS 版” にしかならない諸刃の剣です。 [11] [[XHTML 2.0]] では採用されない予定です。 [17] [WEAK[2003-05-10 08:36]] ''>>11'': こんどの [[WD]] で復活 [15] さて CSS を値に使う場合の書式は、 HTML 4 も CSS 1 も CSS 2 もその他の規格も、例示で簡単に説明している程度で、 はっきりとは定義していません。現在 [[WD]] である [CSSATTR] は、 現在の書式を更に柔軟な指定が可能に拡張したものを定義しています。 CSS 以外のスタイル言語で [CODE(HTMLa)[style]] 属性の値として使う方法を規定したものがあるのかは不明です。 [22] >>15 [CODE(MIME)[[[text/jss]]]] で可能 ([[JIS X 4052]]:2000 5.4.2 を参照。) [[#comment]] * メモ