* class 属性 (HTML, XHTML 1) [1] [DFN[[CODE(HTMLa)[class]]]] 属性は、[[要素]]に[DFN[[[級]]]] (の集合) を割り当てます。この属性はほとんどの [[HTML]] の要素型で定義されています。 [2] 文書の構成単位である[[要素]]は、 [[一般識別子]] ([[要素型名]]) で分類されているわけですが、級はそれを更に細分化するために使えます。しかしながら要素型を越えて同じ級名を与えることもできます。であるから要素型と級は直行するものでもあります。 [WEAK[だからといって、そうすることによって必ずしも同じ級なら同じ仲間とは限りません。その辺は運用に任されています。同じ要素型でも、文脈によって同じ級名が違って扱われることになるかもしれません。]] [8] 仕様書: [[HTML 4]] - [CODE(HTMLa)[class]] -- 14.2.3 Header style information: the [CODE(HTMLe)[STYLE]] element [[#comment]] ** 属性値 [9] この属性は [[HTML 4]] 的には [CODE[[[cdata-list]]] 型,]] [[SGML]] 的には [CODE(SGML)[[[CDATA]]]] 型です。級は複数個指定できますが、そのときは[[空白]]で分離します。 [10] この属性は省略可能です。省略時は級なしになります。 [6] [[ISO-HTML]] の注釈に [CODE(HTMLa)[class]] は comma separated とか書いてあるけど、あれは一体なんなのだろう。。。 [7] ''Embedding metadata in XHTML and extracting them as RDF'' [[RFC 2731]] のように [CODE(HTMLa)[class]] 属性にも [CODE[.]] をコロン代わりにした[[修飾名]]を使ってメタ・データを記述してしまおうという案。 ([[名無しさん]] [WEAK[2004-03-16 01:05:26 +00:00]]) [14] [[HTML]] では大文字・小文字を区別せず、 [[XHTML]] では区別するようです。 ([[Gecko]], [[WinIE 6]]) ([[名無しさん]] [sage] [WEAK[2005-06-23 00:33:22 +00:00]]) [[#comment]] ** 応用 [3] 仕様書で用途例として挙げられているのは、 - [[スタイル・シート]]の[[選択子]] - [[UA]] による一般目的処理です。 [4] スタイルシート, 特に [[CSS]] と [CODE(HTMLa)[class]] 属性の結びつきは強く、特に級選択子が用意されているほどです。歴史的には [CODE(HTMLa)[class]] 属性は CSS で使うために定義されたといっても過言ではありません。とはいえ、現在の [CODE(HTMLa)[class]] 属性の用途はあくまで要素の分類付けであって、スタイルシートでの使用は一用途に過ぎません。 [[表現と構造の分離]]の原則に則り、極度に表現に偏った [CODE(HTMLa)[class]] 属性の使用法は避けるべきです。 [[#comment]] ** 実装 [5] [CODE(HTMLa)[class]] 属性は複数の級名を間隔で分離して列挙できますが、古い [[UA]] (ブラウザや[[著述工具]]など) はこれに対応していないものもあります。 [[DOM]] の [CODE(DOMa)[[[className]]]] を無加工で使っているスクリプトの類なんかも危ない。 [12] [[WinIE]] は >>5 の通り対応していません。間隔が入っているとそれも含めて class 名とみなされる(?)ようです。 ([[名無しさん]] [sage]) [[#comment]] ** 例 [11] 級によって CSS で表現方法を変える例 [PRE(HTML)[ Style sheet and class

This H1 is affected by our style

This one is not affected by our style

]PRE] [WEAK[(HTML 4 仕様書より、改)]] CSS の[DFN[級選択子]]を使うと、 [CODE(HTMLa)[class]] 分けを具体的に表現に反映させることができます。 [[#comment]] ** メモ [15] -[CITE[Elementary, ... class="red large"のように、2つ以上の適用クラスを並べられる]] -[CITE[ CSSで2つ以上のクラス指定ができる]] ''HTML で'' [SAMP(HTML)@en[[CODE(HTMLa)[class]]="class1 class2"]] のように複数指定できるという話 (>>16) と、 ''CSS で'' [SAMP(CSS)@en[.class1.class2 { [VAR[...]] }]] のように複数指定できるという話 (>>17) は区別して議論しないと駄目ですよ。。。 [16] HTML の [CODE(HTMLa)@en[class]] 属性への [SAMP(HTML)@en[[CODE(HTMLa)[class]]="class1 class2"]] のような値の複数指定に [[WinIE]] が対応したのは 5.0 から。 [CITE@en[CLASS Attribute | className Property (A, ACRONYM, ADDRESS, ...) (Internet Explorer)]] (仕様としては [CODE(HTMLa)@en[class]] 属性が正式に導入された [[HTML 4.0]] から。 [[CSS]] が 1 か 2 かは関係ありません。) > 値は左から順にカスケードして適用されていくこれは間違っています。 HTML の [CODE(HTMLa)@en[class]] 属性における順序は CSS においては意味がありません。 CSS における[[規則]]の優先順位は CSS の中だけで決まります。実際に CSS で規則を書く順序を入れ替えてみれば、 ''後から書いたものが優先される''だけだと分かります。テスト: - [17] [[CSS]] の [SAMP(CSS)@en[.class1.class2 { [VAR[...]] }]] のようなクラス名の複数指定に [[WinIE]] は ([[WinIE 6.0]] でも) 対応していません。 (仕様としては [[CSS 2]] から。) テスト: - - [[CSS 1]] に正しく従っていれば [[CSS 2]] で導入された規則は無視するのが正しく、 ''どちらのテストも''文字が緑色で表示されるはずです。 [[CSS 2]] に正しく従っていればクラス名の複数指定の方を採用して、 ''どちらのテストも''文字が青色で表示されるはずです。 [[WinIE 6.0]] は1つ目が青、2つ目が緑です。つまり間違っています。 [[#comment]] * HTML の [CODE(HTMLa)[class]] と同じ意味の属性 [13] [ABBR[[[HTML]]] [ハイパーテキスト・マーク付け言語]] と [WEAK[(ほぼ)]] 同じ意味と構文を持つ [WEAK[(らしい)]] 属性として、次のものが見つかっています。 ,名前空間 ,局所名 ,仕様 ,([CODE(URI)[[[http://www.w3.org/1998/Math/MathML]]]]) ,[CODE(XMLa)[class]] ,[[MathML]] ,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] ,[CODE(HTMLa)[class]] ,[[XHTML 1]] ,([CODE(URI)[[[http://www.w3.org/1999/xhtml]]]]) ,[CODE(HTMLa)[class]] ,[[XHTML 1]] ,([CODE(URI)[[[http://www.w3.org/2000/svg]]]]) ,[CODE(XMLa)[class]] ,[[SVG]] ,([CODE(URI)[[[http://www.w3.org/2001/SMIL20/Language]]]]) ,[CODE(XMLa)[class]] ,[[SMIL 2.0]] ,([CODE(URI)[[[http://www.w3.org/2002/06/xhtml2]]]]) ,[CODE(XMLa)[class]] ,[[XHTML 2]] ,([CODE(URI)[[[urn:schemas-microsoft-com:vml]]]]) ,[CODE(XMLa)[class]] ,[[VML]] ,([CODE(URI)[[[urn:x-suika-fam-cx:markup:jis:x:4052:2000:]]]]) ,[CODE(XMLa)[class]] ,[[JIS X 4052]]:2000 (括弧付きの名前空間は、その属性が[[大域属性]]では'''なく'''、その名前空間の[[要素型]] [WEAK[(ほぼ)]] すべてに定義されている属性であることを表します。) これらの属性は、[[空白]]で分割すればある要素の属する[[級]]の名前の集合が得られ、それぞれの級名は [WEAK[(例えば)]] [ABBR[[[CSS]]] [Cascading Style Sheets]] の[[級選択子]]に使うことができます。 (注意: 細かい意味や構文はそれぞれの仕様により異なることがあります。) [[#comment]] * メモ