* [CODE(HTMLa)@en[class]] 属性 (HTML, XHTML 1)
[1]
[[HTML]] の [DFN[[CODE(HTMLa)@en[class]] [[属性]]]]は、
[[要素]]に[DFN[[RUBY[[[級]]] @en[[[クラス]]] @en[[[class]]]]]]
[WEAK[(の集合)]] を割り当てます。
この[[属性]]はほとんどの [[HTML]] の[[要素型]]で定義されています。
[2]
:状態:[[W3C]] [[勧告]]
:[[要素型]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
の[[要素型]]
:[[名前空間URI]]:なし ([[null名前空間]])
:[[局所名]]:[CODE(HTMLa)@en[[[class]]]]
:[[属性型]]:[CODE@en[[[cdata-list]]]] ([CODE(SGML)@en[[[CDATA]]]])
:[[既定値]]:(なし)
[8] 仕様書:
- [[HTML 4]]
-- [CODE(HTMLa)@en[class]] [[属性]]
-- [CSECTION@en[14.2.3 Header style information: the [CODE(HTMLe)[STYLE]] element]]
** 属性値
[9]
この[[属性]]の[[属性値]]は、 [[HTML 4]] 仕様書本文では
[Q@en[cdata-list]] とされており、
[DFN[[RUBYB[クラス名] @en[class name]]]]を[[空白]]で区切って複数個指定できるとされています。
また、 [[HTML 4]] の [[SGML]] [[DTD]] では
[CODE(SGML)@en[[[CDATA]]]] として定義されています。
[10] この属性は省略可能です。省略時は級なしになります。
[6] [[ISO-HTML]] の注釈に [CODE(HTMLa)[class]] は comma separated
とか書いてあるけど、あれは一体なんなのだろう。。。
[[#comment]]
*** 大文字と小文字
[14]
[[HTML]] では大文字・小文字を区別せず、 [[XHTML]]
では区別するようです。 ([[Gecko]], [[WinIE 6]])
([[名無しさん]] [sage] [WEAK[2005-06-23 00:33:22 +00:00]])
[18]
>>14 は[[互換モード]]の動作で、[[標準モード]]では区別するようです。
[[#comment]]
*** 名前空間接頭辞の導入
[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]])
[[#comment]]
** 意味
[19] '''属性値の意味''':
[CODE(HTMLa)@en[[[class]]]] [[属性]]には (任意個の)
[DFN[[RUBYB[クラス名] @en[class name]]]]を指定できます。
[[要素]] [CODE(math)@en[[VAR@en[E]]]] にクラス名 [CODE(math)@en[[VAR[N]]]]
を指定することは、その[[要素]] [CODE[[VAR@en[E]]]] が[[クラス]]
[CODE(math)@en[[VAR(function)[C]] ([VAR[N]])]]
に含まれることを表します。 [SRC@en[HTML 4 14.2.3]]
[31] '''複数のクラス名の順序''':
複数のクラス名を指定した場合、その順序が意味を持つのかどうかは、
[[HTML 4]] では[DEL[規定されていません]]。 >>19
のような規定のされ方ですから、 [CODE(HTMLa)@en[[[class]]]]
属性値におけるクラス名の順序には意味がないと考えるべきでしょう。
というか [Q@en[set]] ([[集合]])
と書いてありますから順序は意味を持ちませんね。
[[#comment]]
*** クラス名の適用範囲
[20]
クラス名が有効である範囲 (ある[[要素]]のクラス名 [CODE(math)@en[[VAR[N]]]]
と別の[[要素]]のクラス名 [CODE(math)@en[[VAR[N]]]] が共にクラス
[CODE(math)@en[[VAR(function)[C]] ([VAR[N]])]] を指すと考えられる範囲)
は明確ではありません。
[21]
[[HTML 4]] の仕様書を自然に解釈すれば、
1つの[[文書]]全体はその[Q[[[名前空間]]]]の範囲に収まっていると考えられます。
[WEAK[(そうでなく[[文書]]の一部だけなら、特に規定があるはずです。)]]
[22]
しかし、[[外部スタイル・シート]]でクラス名を[[選択子]]に使い、
その[[スタイル・シート]]を複数の[[文書]]から参照するようなことは極々普通に行われています。
その場合、[[外部スタイル・シート]]で[[選択子]]として使われているクラス名
[CODE(math)@en[[VAR[N]]]] によって表されるクラス
[CODE(math)@en[[VAR(function)[C]] ([VAR[N]])]]
はその[[スタイル・シート]]を参照するどの[[文書]]でも同じものと暗黙に仮定されているといえます。
[23]
とはいえ、クラス名が[[文書]]よりも大きな適用範囲を持つという規定はありませんし、
[[文書]]よりも大きな範囲で共通のクラス名集合を使おうとしてもそれを[[形式的]]に記述するための確立された方法もありません。
[24]
>>23 に対する提案の1つが >>7 のような
[[XML名前空間]]型大域的識別子の採用です。この方法ではクラス名は [[URI]]
によって識別されるます。 >>20 に関して
[[XML名前空間]]の[[属性名]]と同じ解決策を採ったといえます。
[25]
別の方法の1つが、共通のクラス名集合を規定して、
何らかの方法でそれに従うことを表明するというものです。
[[マイクロ書式]]のうち [[hCalendar]] や [[hCard]]
のようなものがここでいう共通なクラス名集合です。
この手法に於いては[[形式的]]な記述として [CODE(HTMLa)@en[[[profile]]]]
[[属性]]や [[XMDP]] などの技術がありますが、
その組合せ方など未解決の問題もあります。
[26]
ここで取り上げたクラス名の適用範囲の問題は、
>>27- で扱う、クラスに意味を与える場合において特に重要になります。
[[#comment]]
*** 要素型とクラス
[28]
[[要素型]]と[[クラス]]の関係について [[HTML 4]]
では特に規定がありません。特に規定がないということは、
特に制約がない、両者は直交しているということなのでしょう。
[29]
現実には、[[クラス]]は[[要素型]]を更に細分したものだという解釈もあります。
同じ[[クラス名]]を異なる[[要素型]]には使用しないという条件を満たす限りにおいては、
>>28 の解釈とこの解釈は矛盾しません。
[30]
例えば題名が含まれる [CODE(HTMLe)@en[[[cite]]]] [[要素]]には
[SAMP@en[title]] というクラス名を指定し、著者名が含まれる
[CODE(HTMLe)@en[[[cite]]]] [[要素]]には [SAMP@en[author]]
というクラス名を指定する、というのは >>29 の考えによりフィットします。
[31]
実際のところは[[クラス]]とは何かが明確ではないというか割りと何にでも使えるので、
>>28 と >>29 のどちらの解釈を採っても特に問題になることはないでしょう。
[[#comment]]
*** クラスと意味
[27]
[[HTML 4]] 仕様書の範囲では規定は >>9 の程度であり、
[[要素]]を[[クラス]]に分けられることはわかりますが、
ではその[[クラス]]にどういう意味があるのかは分かりません。
([[HTML]] のレベルでは記述できません。)
[32]
>>27 をもって [CODE(HTMLa)@en[class]]
属性を使って[[要素]]の意味を規定することはできないと主張する人がいます。
まことにもっともな主張ですが、
真に意味がないのであればわざわざ[[クラス]]分けする必要も価値もありません。
[[HTML]] として[[クラス]]が持つ (べき)
意味 (やその存在) が記述できないのだと考えておくのが良いでしょう。
メモ: [CODE(HTMLa)@en[class]] で意味を記述できないという主張は
[CODE(HTMLe)@en[[[div]]]] や [CODE(HTMLe)@en[[[span]]]]
を濫用して[Q[意味]]を記述しようとすることへの戒めでもあり、
必ずしも間違ってはいません。
[33]
[[クラス]]の意味を (情報処理可能な程度に) 規定しようとする試みとして、
[[マイクロ書式]]群があります。 [[hCalendar]] や [[hCard]]
などではクラス名群とそのクラス名が割当てられた要素が示すものは何であるかを規定しています。
例えば [[hCard]] を採用した[[文書]]では、
[[hCard]] の規定するクラスの意味に従って[[住所録]]に登録するなどの処理を行えます。
[34]
[[HTML 5]] では規定を明確にし、 [CODE(HTMLa)@en[[[profile]]]]
[[属性]]で指定された [[HTMLメタ情報プロファイル]]で規定されたクラスはそこで規定された意味を持ち、
それ以外のクラス名は単なる文字列に過ぎないと定義しています。
([[作業中]])
[35]
一方 [[XHTML 2.0]] は [CODE(XMLa)@en[[[class]]]]
[[属性]]は放置したまま新たに [CODE(XMLa)@en[[[role]]]]
[[属性]]を導入しています。 [CODE(XMLa)@en[[[role]]]]
[[属性]]で指定される[[役割]]は [[QName]] で (>>24 の方法)、
[[役割]]の意味の記述には [[RDF]] を使うことになっています。
([[作業中]])
[40]
[CITE[Use or abuse of class? at microformatique - a blog about microformats and “data at the edges”]]
([[名無しさん]] [WEAK[2006-08-27 01:03:32 +00:00]])
[42]
[CITE@ja-JP[class は要素の分類 - Weblog]] ([CODE[2007-01-27 07:00:00 +09:00]] 版)
([[名無しさん]] [WEAK[2007-01-28 04:12:46 +00:00]])
[52]
[CITE@en[class名に「表示に関する指示を組み込む」ことについて | Tech de Go]] ([CODE[2007-04-03 08:37:13 +09:00]] 版)
([[名無しさん]] [WEAK[2007-04-02 23:41:26 +00:00]])
[108]
[CITE@ja[HTMLのためのidとclass - 行動記録]] ([[IWAI, Masaharu]] 著, [CODE[2007-07-26 03:35:14 +09:00]] 版)
([[名無しさん]] [WEAK[2007-07-28 04:17:45 +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 名とみなされる(?)ようです。
[[#comment]]
** 不思議解釈
[36]
[CITE[HTML辞典 (バージョン1.1.0)]]
([[野田工房(mixim)]] 著、2005年3月15日付け)
によると、 [CODE(HTMLa)@en[[[class]]]] [[属性]]は
> スタイルシートを間接指定
するものだそうです(謎)。[Q[間接指定]]とは何かと思いつつ
[CODE(HTMLa)@en[[[style]]]] [[属性]]の解説を見ると、
こちらは[Q[直接指定]]なのだそーな。
[[#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つ目が緑です。つまり間違っています。
[43]
[CITE[WEBTECH - webtech:vantguarde]] ([CODE[2007-03-04 14:16:31 +09:00]] 版)
([[名無しさん]] [WEAK[2007-03-04 05:18:42 +00:00]])
[44]
[CITE[Default CSS2 style sheet for Web pages on a TV]] ([CODE[1998-07-23 22:08:40 +09:00]] 版)
[61]
[CITE[Predefined classes are gone]] ([[Ian Hickson ]] 著, [CODE[2007-05-17 04:42:27 +09:00]] 版)
([[名無しさん]] [WEAK[2007-05-17 11:55:43 +00:00]])
[74]
[CITE@ja[複数のclassをセレクタに指定する方法 | Blog hamashun.com]] ([CODE[2007-05-25 12:49:09 +09:00]] 版)
([[名無しさん]] [WEAK[2007-05-25 07:18:25 +00:00]])
[72]
[CITE@ja[複数のclassをセレクタに指定する際のメモ書き | Blog hamashun.com]] ([CODE[2007-05-25 16:01:20 +09:00]] 版)
([[名無しさん]] [WEAK[2007-05-25 07:16:57 +00:00]])
[75]
[CITE@ja[複数のclassをセレクタに指定した際のIEのバグ | Blog hamashun.com]] ([CODE[2007-05-25 16:07:37 +09:00]] 版)
([[名無しさん]] [WEAK[2007-05-25 07:18:49 +00:00]])
[98]
[CITE[WEBTECH - webtech:vantguarde]] ([CODE[2007-06-24 16:19:26 +09:00]] 版)
([[名無しさん]] [WEAK[2007-06-24 07:21:31 +00:00]])
[99]
[CITE@en[Unicode for CSS Class Names - Snook.ca]] ([CODE[2007-06-24 17:16:00 +09:00]] 版)
([[名無しさん]] [WEAK[2007-06-24 09:45:40 +00:00]])
[109]
[CITE@en[class/id values on default Blogs templates]] ([[Karl Dubost]] 著, [CODE[2007-05-08 15:31:42 +09:00]] 版)
([[名無しさん]])
[110]
[CITE@en[Re: Research for class="copyright" (was: Re: Getting beyond the ping pong match)]] ([[Lachlan Hunt]] 著, [CODE[2007-05-07 00:59:18 +09:00]] 版)
([[名無しさん]])
[[#comment]]
* HTML の [CODE(HTMLa)[class]] と同じ意味の属性
[13] [ABBR[[[HTML]]] [ハイパーテキスト・マーク付け言語]]
と [WEAK[(ほぼ)]] 同じ意味と構文を持つ [WEAK[(らしい)]] 属性として、
次のものが見つかっています。
,名前空間 ,局所名 ,仕様
,([CODE(URI)@en[[[http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul]]]]) ,[CODE(XMLa)@en[[[class]]]] ,[[XBL]]
,([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)[[[http://www.w3.org/2002/06/xhtml2]]]] ,[CODE(XMLa)[class]] ,[[XHTML 2]]
,([CODE(URI)[[[http://www.w3.org/2002/06/xhtml2/]]]]) ,[CODE(XMLa)[class]] ,[[XHTML 2]]
,[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
,"([CODE(XMLe)@en[[QN[xbl:[[div]]] [data:,520e273a-62ad-4528-bb1e-9652bda76d62]]]])" ,[CODE(XMLa)@en[[[class]]]] ,[[XBL 2.0]]
,([CODE(XMLe)@en[[QN[xbl:[[div]]] [http://www.w3.org/ns/xbl]]]]) ,[CODE(XMLa)@en[[[class]]]] ,[[XBL 2.0]]
;;
括弧付きの名前空間は、その属性が[[大域属性]]では'''なく'''、
その名前空間の[[要素型]] [WEAK[(ほぼ)]] すべてに定義されている属性であることを表します。
これらの属性は、[[空白]]で分割すればある要素の属する[[級]]の名前の集合が得られ、
それぞれの級名は [WEAK[(例えば)]]
[ABBR[[[CSS]]] [Cascading Style Sheets]]
の[[級選択子]]に使うことができます。
;;
注意: 細かい意味や構文はそれぞれの仕様により異なることがあります。
[124]
[CITE[SVG quirks - Anne’s Weblog]] ([CODE[2007-12-04 11:55:27 +09:00]] 版)
([[名無しさん]])
[[#comment]]
* メモ
[41]
[[ISO/IEC 19757]]-3:2006 は
[CODE(XMLe)@en[[QN[[[p]]] [http://purl.oclc.org/dsdl/schematron]]]]
と
[CODE(XMLe)@en[[QN[[[span]]] [http://purl.oclc.org/dsdl/schematron]]]]
が定義されていますが、
[[文書]]の一部を違った示し方にするための[[鍵]]として使えるという説明だけで、
[[構文]]も [CODE(XML)@en[xsd:[[string]]]]
としか規定されていません。
[126]
[CITE@en[MAMA: Common attributes - Opera Developer Community]] ([TIME[2008-11-25 20:26:01 +09:00]] 版)
[127] [CITE[SMIL 3.0 Structure Module]] ([TIME[2008-12-02 00:45:09 +09:00]] 版)
[128] [CITE[我的春秋: 論理構造を文脈に読み換えながら class 名を考える]] ([TIME[2008-12-25 22:21:44 +09:00]] 版)
[129] [CITE[Document Structure – SVG Tiny 1.2]] ([TIME[2008-12-20 02:31:29 +09:00]] 版)