[1] HTML、SVG、MathML などの
class 属性は、
要素にクラスを零個以上割り当てるものです。
[136] MathML では、「XSLT や CSS と共に使うスタイル・クラスの集合を要素に関連付ける」 >>135 という意味不明な説明がなされています。
[9]
この属性の属性値は、 HTML 4 仕様書本文では
cdata-list
とされており、
クラス名を空白で区切って複数個指定できるとされています。
また、 HTML 4 の SGML DTD では
CDATA として定義されています。
[6] ISO-HTML の注釈に class は comma separated
とか書いてあるけど、あれは一体なんなのだろう。。。
[137] MathML は、「典型的には語を間隔で区切った列であるが、
MathML では規定しない」と曖昧なことしか述べていません。
構文は string であるとだけ規定されています。 >>135
[10] この属性は省略可能です。省略時は級なしになります。
[14] HTML では大文字・小文字を区別せず、 XHTML では区別するようです。 (Gecko, WinIE 6) (名無しさん [sage] 2005-06-23 00:33:22 +00:00)
[7] Embedding metadata in XHTML and extracting them as RDF http://www.kanzaki.com/docs/sw/xh2rdf.html
RFC 2731 のように class 属性にも . をコロン代わりにした修飾名を使ってメタ・データを記述してしまおうという案。
(名無しさん 2004-03-16 01:05:26 +00:00)
[19] 属性値の意味:
class 属性には (任意個の)
クラス名を指定できます。
要素 E にクラス名 N
を指定することは、その要素 E がクラス
C (N)
に含まれることを表します。 HTML 4 14.2.3
[31] 複数のクラス名の順序:
複数のクラス名を指定した場合、その順序が意味を持つのかどうかは、
HTML 4 では規定されていません。 >>19
のような規定のされ方ですから、 class
属性値におけるクラス名の順序には意味がないと考えるべきでしょう。
というか set
(集合)
と書いてありますから順序は意味を持ちませんね。
[20]
クラス名が有効である範囲 (ある要素のクラス名 N
と別の要素のクラス名 N が共にクラス
C (N) を指すと考えられる範囲)
は明確ではありません。
[21]
HTML 4 の仕様書を自然に解釈すれば、
1つの文書全体はその名前空間
の範囲に収まっていると考えられます。
(そうでなく文書の一部だけなら、特に規定があるはずです。)
[22]
しかし、外部スタイル・シートでクラス名を選択子に使い、
そのスタイル・シートを複数の文書から参照するようなことは極々普通に行われています。
その場合、外部スタイル・シートで選択子として使われているクラス名
N によって表されるクラス
C (N)
はそのスタイル・シートを参照するどの文書でも同じものと暗黙に仮定されているといえます。
[23] とはいえ、クラス名が文書よりも大きな適用範囲を持つという規定はありませんし、 文書よりも大きな範囲で共通のクラス名集合を使おうとしてもそれを形式的に記述するための確立された方法もありません。
[24] >>23 に対する提案の1つが >>7 のような XML名前空間型大域的識別子の採用です。この方法ではクラス名は URI によって識別されるます。 >>20 に関して XML名前空間の属性名と同じ解決策を採ったといえます。
[25] 別の方法の1つが、共通のクラス名集合を規定して、 何らかの方法でそれに従うことを表明するというものです。 マイクロ書式のうち hCalendar や hCard のようなものがここでいう共通なクラス名集合です。
この手法に於いては形式的な記述として profile
属性や XMDP などの技術がありますが、
その組合せ方など未解決の問題もあります。
[26] ここで取り上げたクラス名の適用範囲の問題は、 >>27- で扱う、クラスに意味を与える場合において特に重要になります。
[28] 要素型とクラスの関係について HTML 4 では特に規定がありません。特に規定がないということは、 特に制約がない、両者は直交しているということなのでしょう。
[29] 現実には、クラスは要素型を更に細分したものだという解釈もあります。 同じクラス名を異なる要素型には使用しないという条件を満たす限りにおいては、 >>28 の解釈とこの解釈は矛盾しません。
[30]
例えば題名が含まれる cite 要素には
title というクラス名を指定し、著者名が含まれる
cite 要素には author
というクラス名を指定する、というのは >>29 の考えによりフィットします。
[31] 実際のところはクラスとは何かが明確ではないというか割りと何にでも使えるので、 >>28 と >>29 のどちらの解釈を採っても特に問題になることはないでしょう。
[27] HTML 4 仕様書の範囲では規定は >>9 の程度であり、 要素をクラスに分けられることはわかりますが、 ではそのクラスにどういう意味があるのかは分かりません。 (HTML のレベルでは記述できません。)
[32]
>>27 をもって class
属性を使って要素の意味を規定することはできないと主張する人がいます。
まことにもっともな主張ですが、
真に意味がないのであればわざわざクラス分けする必要も価値もありません。
HTML としてクラスが持つ (べき)
意味 (やその存在) が記述できないのだと考えておくのが良いでしょう。
メモ: class で意味を記述できないという主張は
div や span
を濫用して意味
を記述しようとすることへの戒めでもあり、
必ずしも間違ってはいません。
[33] クラスの意味を (情報処理可能な程度に) 規定しようとする試みとして、 マイクロ書式群があります。 hCalendar や hCard などではクラス名群とそのクラス名が割当てられた要素が示すものは何であるかを規定しています。 例えば hCard を採用した文書では、 hCard の規定するクラスの意味に従って住所録に登録するなどの処理を行えます。
[34]
HTML 5 では規定を明確にし、 profile
属性で指定された HTMLメタ情報プロファイルで規定されたクラスはそこで規定された意味を持ち、
それ以外のクラス名は単なる文字列に過ぎないと定義しています。
http://www.whatwg.org/specs/web-apps/current-work/#class (作業中)
[35]
一方 XHTML 2.0 は class
属性は放置したまま新たに role
属性を導入しています。 role
属性で指定される役割は QName で (>>24 の方法)、
役割の意味の記述には RDF を使うことになっています。
http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-role.html#adef_role_role (作業中)
[40] Use or abuse of class? at microformatique - a blog about microformats and “data at the edges” http://microformatique.com/?p=9 (名無しさん 2006-08-27 01:03:32 +00:00)
[42]
class は要素の分類 - Weblog (2007-01-27 07:00:00 +09:00 版) http://ryus.s21.xrea.com/w/item/841
(名無しさん 2007-01-28 04:12:46 +00:00)
[52]
class名に「表示に関する指示を組み込む」ことについて | Tech de Go (2007-04-03 08:37:13 +09:00 版) http://www.techdego.com/2007/03/classname.php
(名無しさん 2007-04-02 23:41:26 +00:00)
[108]
HTMLのためのidとclass - 行動記録 (IWAI, Masaharu 著, 2007-07-26 03:35:14 +09:00 版) http://iwaim.beering.be/2006/12/id_and_class_for_html.html
(名無しさん 2007-07-28 04:17:45 +00:00)
[149] CSS はクラス選択子を導入してclass属性に大きな力を与えているため、 これを使って著者が独自の「言語」を作ることも可能ではあります。 しかしながら、通常のマーク付け言語の要素が共通の意味の理解を可能にするのに対し、 著者が独自に割り振ったクラス名は意味の理解性に欠けるものであり、 避けることが好ましいとされています。 >>142
[3] 仕様書 IW:HTML4:"struct/global.html#id-and-class" で用途例として挙げられているのは、
です。
[4]
スタイルシート, 特に CSS と class
属性の結びつきは強く、特に級選択子が用意されているほどです。
歴史的には class 属性は CSS
で使うために定義されたといっても過言ではありません。
とはいえ、現在の class 属性の用途はあくまで要素の分類付けであって、
スタイルシートでの使用は一用途に過ぎません。
表現と構造の分離の原則に則り、
極度に表現に偏った class
属性の使用法は避けるべきです。
[57] draft-ietf-html-style-00, https://datatracker.ietf.org/doc/html/draft-ietf-html-style-00
[58] draft-ietf-html-style-01, https://datatracker.ietf.org/doc/html/draft-ietf-html-style-01
class 属性
IW:HTML4:"struct/global.html#adef-class"STYLE element
IW:HTML4:"present/styles.html#style-group"[5] class 属性は複数の級名を間隔で分離して列挙できますが、
古い UA (ブラウザや著述工具など)
はこれに対応していないものもあります。 DOM の className
を無加工で使っているスクリプトの類なんかも危ない。
[12] WinIE は >>5 の通り対応していません。 間隔が入っているとそれも含めて class 名とみなされる(?)ようです。
[36]
HTML辞典 (バージョン1.1.0)
(野田工房(mixim) 著、2005年3月15日付け)
によると、 class 属性は
スタイルシートを間接指定
[11] 級によって CSS で表現方法を変える例
<HEAD>
<TITLE>Style sheet and class</TITLE>
<STYLE type="text/css">
H1.myclass {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>(HTML 4 仕様書より、改)
CSS の級選択子を使うと、 class
分けを具体的に表現に反映させることができます。
HTML で class="class1 class2"
のように複数指定できるという話 (>>16) と、 CSS で
.class1.class2 { ... } のように
複数指定できるという話 (>>17) は区別して議論しないと駄目ですよ。。。
[16]
HTML の class 属性への
class="class1 class2"
のような値の複数指定に WinIE
が対応したのは 5.0 から。
CLASS Attribute | className Property (A, ACRONYM, ADDRESS, ...) (Internet Explorer) http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/classname.asp
(仕様としては class 属性が正式に導入された
HTML 4.0 から。 CSS が 1 か 2 かは関係ありません。)
値は左から順にカスケードして適用されていく
http://e8y.net/blog/index.php/2005/07/24/p124
これは間違っています。 HTML の class
属性における順序は CSS においては意味がありません。
CSS における規則の優先順位は CSS の中だけで決まります。
実際に CSS で規則を書く順序を入れ替えてみれば、
後から書いたものが優先されるだけだと分かります。
テスト:
[17] CSS の .class1.class2 { ... } のようなクラス名の複数指定に WinIE は (WinIE 6.0 でも) 対応していません。
(仕様としては CSS 2 から。)
テスト:
CSS 1 に正しく従っていれば CSS 2 で導入された規則は無視するのが正しく、 どちらのテストも文字が緑色で表示されるはずです。 CSS 2 に正しく従っていればクラス名の複数指定の方を採用して、 どちらのテストも文字が青色で表示されるはずです。
WinIE 6.0 は1つ目が青、2つ目が緑です。つまり間違っています。
[43]
WEBTECH - webtech:vantguarde (2007-03-04 14:16:31 +09:00 版) http://web.g.hatena.ne.jp/vantguarde/20070301#1172740363
(名無しさん 2007-03-04 05:18:42 +00:00)
[44]
Default CSS2 style sheet for Web pages on a TV (1998-07-23 22:08:40 +09:00 版) http://www.w3.org/Style/1998/07/tvweb-style
[61]
Predefined classes are gone (Ian Hickson <ian@...> 著, 2007-05-17 04:42:27 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/10659
(名無しさん 2007-05-17 11:55:43 +00:00)
[74]
複数のclassをセレクタに指定する方法 | Blog hamashun.com (2007-05-25 12:49:09 +09:00 版) http://www.hamashun.com/blog/2007/05/class_1.html
(名無しさん 2007-05-25 07:18:25 +00:00)
[72]
複数のclassをセレクタに指定する際のメモ書き | Blog hamashun.com (2007-05-25 16:01:20 +09:00 版) http://www.hamashun.com/blog/2007/05/class_2.html
(名無しさん 2007-05-25 07:16:57 +00:00)
[75]
複数のclassをセレクタに指定した際のIEのバグ | Blog hamashun.com (2007-05-25 16:07:37 +09:00 版) http://www.hamashun.com/blog/2007/05/classie_1.html
(名無しさん 2007-05-25 07:18:49 +00:00)
[98]
WEBTECH - webtech:vantguarde (2007-06-24 16:19:26 +09:00 版) http://web.g.hatena.ne.jp/vantguarde/20070619#1182258927
(名無しさん 2007-06-24 07:21:31 +00:00)
[99]
Unicode for CSS Class Names - Snook.ca (2007-06-24 17:16:00 +09:00 版) http://snook.ca/archives/html_and_css/unicode_for_css_class_names/
(名無しさん 2007-06-24 09:45:40 +00:00)
[109]
class/id values on default Blogs templates (Karl Dubost 著, 2007-05-08 15:31:42 +09:00 版) http://lists.w3.org/Archives/Public/public-html/2007May/0868.html
(名無しさん)
[110]
Re: Research for class="copyright" (was: Re: Getting beyond the ping pong match) (Lachlan Hunt 著, 2007-05-07 00:59:18 +09:00 版) http://lists.w3.org/Archives/Public/public-html/2007May/0709.html
(名無しさん)
class と同じ意味の属性[13] HTML と (ほぼ) 同じ意味と構文を持つ (らしい) 属性として、 次のものが見つかっています。
これらの属性は、空白で分割すればある要素の属する級の名前の集合が得られ、 それぞれの級名は (例えば) CSS の級選択子に使うことができます。
[65] DTBook にも HTML4 から移入されました。
[124]
SVG quirks - Anne’s Weblog (2007-12-04 11:55:27 +09:00 版) http://annevankesteren.nl/2007/12/svg-quirks
[143] クラス選択子は、class属性の値が指定された値と一致することを表します。
[144] クラス選択子はclass属性に対して属性選択子の ~= と同じはたらきをします
>>142。
[145] 適用対象となるclass属性として、 HTML の class 属性の他、
当該マーク付け言語で適用対象であると規定された属性が存在します。具体例としては SVG
の class 属性や MathML の class
属性があります。 >>142
[147] 一つの要素に複数のclass属性が存在するなら、空白で連結した値に対して適用するものとみなす、 とされています。ただしそのようなケースは見つかっていないとして、規定の一部では無いとされています。 >>142
[166] WebVTT ではWebVTT節点オブジェクトの適用可能なクラスがclass属性として扱われます。 >>165
[140] WinIE 6 はクラス名が数字から始まっていても受け付けます。 Opera 9 は奇癖モードでだけ受け付けます。 Firefox 2 は受け付けません。
[150] 大文字と小文字を区別するかはマーク付け言語に依存します。
[151] 奇癖モードでは、クラス選択子の比較はASCII大文字・小文字不区別です。 >>174
[161] クラス選択子に相当するものは最初期 (>>160) からありました (当時はまだ名前はついていませんでしたが)。
@class[157] CSS2 の初期は @class @規則により HTML
以外のクラスの属性の名前を指定できることになっていました。
[155] CSS2 や 選択子3は当初からクラス選択子を含んでいましたが、 HTML でのみ使えるとされていました。 >>154、>>159 以降は SVG や MathML など XML でも語彙によって定められたクラスについて使えるとされています。
[162] HTML 仕様書は HTML要素の class
属性のクラスの大文字と小文字の区別について明確に規定しました。
[180] 奇癖モードでASCII大文字・小文字不区別なのはHTML要素に限らないため、 HTML Standard から Selectors へと規定が移動されました。
[41]
ISO/IEC 19757-3:2006 は
pspanxsd:string
としか規定されていません。
[126] MAMA: Common attributes - Opera Developer Community ( 版) http://dev.opera.com/articles/view/mama-common-attributes/#class
[127] SMIL 3.0 Structure Module ( 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-structure.html#adef-class
[128] 我的春秋: 論理構造を文脈に読み換えながら class 名を考える ( 版) http://my-chunqiu.cocolog-nifty.com/blog/2007/05/class_67a6.html
[129] Document Structure – SVG Tiny 1.2 ( 版) http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#ClassAttribute
[130] IRC logs: freenode / #whatwg / 20090521 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090521#l-84
[131] value for class attribute should be CDATA (not NMTOKENS) (Michael(tm) Smith 著, 版) http://lists.w3.org/Archives/Public/public-xhtml2/2009May/0033
[132] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=4356&to=4357
[133] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=4357&to=4358
[134] Bug 8060 – Why must class be a set of unique tokens? It's quite common to have duplicates (~0.5% of dotbot pages), and convenient when you're programmatically generating HTML, and harmless ( 版) http://www.w3.org/Bugs/Public/show_bug.cgi?id=8060
[138] XFrames ( ( 版)) http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_common-attributes
[139] Styling – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute
[170] Web Applications 1.0 r823 Begone, predefined class names. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=822&to=823
[171] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#class
[181] Web Applications 1.0 r8764 Try to clarify case matching rules for selectors ( ( 版)) http://html5.org/r/8764
[182] IRC logs: freenode / #whatwg / 20150105 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20150105
[37] ClassExtensions - WHATWG Wiki ( 版) https://wiki.whatwg.org/wiki/ClassExtensions
[38] Chrome では、クラス選択子に MathML の要素の
class 属性は一致しません。
[39] Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b ( 版) https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf
[45] Shadow: define superglobal slot content attribute · whatwg/dom@e3d8291 ( 版) https://github.com/whatwg/dom/commit/e3d82914676ad1e1bf590e1042636e60feddb6ae
[46] The DOM Standard defines the class, id, and slot attributes · whatwg/html@36c9938 ( 版) https://github.com/whatwg/html/commit/36c9938b102fecadf6029a248f40aae83ea099d2
Class names, in author stylesheets, may not start with the string -amp-. These are reserved for internal use by the AMP runtime.
styleClass Property The name of the class used in the CSS description that should be applied to the Specific Resource.
[49] Web Annotation Vocabulary () https://w3c.github.io/web-annotation/vocab/wd/#h-styleclass
[50] Schematron の span 要素や段落を表す p 要素にも
class 属性があります。
Web の class 属性と同じ意味かは不明です。
[51] Clarify case-sensitivity of ID and class attribute selectors (Zirro著, ) https://github.com/whatwg/html/commit/942a9d5b9c0b50bf5bca275e866bb2319ebdca0c
[53] QiitaにおいてHTML要素の属性指定ができなくなりました - Qiita Blog () http://blog.qiita.com/post/162037299989/disable-html-class
Internal AMP class names prefixed with -amp- and i-amp- are disallowed in AMP HTML.
Consult AMP documentation for meaning of class names prefixed with amp-. The use of these classes is allowed and meant to allow customization of some features of AMP runtime and extensions.
All other authored class names are allowed in AMP HTML markup.
[55] Reference SVG 2 (dstorey著, ) https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7
[56] Alternate Style Tags 1.1 () http://www.idpf.org/epub/altss-tags/