CSS／日本語のID・クラス名について

Question

CSSに、日本語のID・クラス名をつけてもよいのでしょうか？

ネットを検索したところ、
「CSS2からクラス名に日本語が利用可能。但し、IDは日本語不可」
との記述がありました。
本当でしょうか？
誰か詳しい方、教えてください。

▼補足
自分の環境(WindowsIE8)では、クラス名に日本語を利用しても、正常表示されました。しかし、違う環境で不具合がないかや、そもそも推奨されている手法なのかどうかについて、是非知りたいと考えています。

W3C等に準拠しているかどうか、教えてください。

think49 · Accepted Answer

#5の続き。

■XHTML1.0仕様

▼class属性値
BaseCharで定義されている文字を使用できます。

----- (「邦訳：Modularization of XHTML」より)
5.1. 属性集合 (Attribute Collections)

集合名 : 集合に含まれる属性
　Core　 : class (NMTOKENS), id (ID), title (CDATA)
http://msugai.fc2web.com/web/W3C/XHTMLMOD/abstract_modules.html#s_core_collection
-----
　↓
XML1.0仕様書へ
　↓
----- (「XML 1.0」より)
3.3.1 属性型
　...
　| 'NMTOKENS'    [   VC: 名前トークン ]
　...
　妥当性制約: 名前トークン
　　NMTOKEN 型の値は Nmtoken 生成規則に合しなければならず、NMTOKENS 型の値は Nmtokens に合致しなければならない。 
http://www.doraneko.org/xml/xml10/19980210/Overview.html#sec-attribute-types
-----
　↓
-----
[8]    Nmtokens    ::=   Nmtoken  (S  Nmtoken)*
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Nmtokens
-----
　↓
-----
[7]    Nmtoken    ::=   (NameChar)+
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Nmtoken
-----
　↓
-----
[4]    NameChar    ::=   Letter  | Digit  | '.' | '-' | '_' | ':' | CombiningChar  | Extender
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-NameChar
-----
　↓
-----
[84]    Letter    ::=   BaseChar  | Ideographic
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Letter
　↓
-----
[85] BaseChar    ::= [#x0041-#x005A] | [#x0061-#x007A] | [#x00C0-#x00D6] | [#x00D8-#x00F6] | [#x00F8-#x00FF] | [#x0100-#x0131] | 
　　　　　　　　　　　　 ...(中略)...
　　　　　　　　　　　　 [#x3105-#x312C] | [#xAC00-#xD7A3]
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-BaseChar
-----

think49 · Answer

#4の続き。

■XHTML1.0仕様

▼id属性値
BaseCharで定義されている文字を使用できます。

----- (「XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語」より)
C.8 フラグメント識別子
　...
　さらに、ID 型の属性の合法的な値のセットは、CDATA 型のものよりも遙かに小さいから、name 属性の型は NMTOKEN に変更されている。
　この属性は、ID 型か、XML 1.0 第2節第5項の生成規則5にある Name 生成規則かと同じ値しかとれないよう制約されている。
　残念ながら、この制約は XHTML 1.0 DTD の中に表記することができない。
　この変更のせいで、既存のHTML文書を変換するときには注意を払わなければならない。
　これらの属性の値は、文書内部で一意的であり、妥当でなければならず、もしも変換の間に値が変更される場合には、これらのフラグメント識別子(内部てきなものも外部的なものも)への参照はどれも更新されなければならない。
http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#guidelines
-----
　↓
XML1.0仕様書へ
　↓
----- (「XML 1.0」より)
妥当性制約: ID
　ID 型の値は Name 生成規則に合致しなければならない。
　1つの名前がXML文書内に2回以上この型の値として現れてはならない。
　すなわち、ID値は、それをもつ要素を一意的に識別しなければならないのである。 
http://www.doraneko.org/xml/xml10/19980210/Overview.html#id
-----
　↓
-----
[5]    Name    ::=   (Letter  | '_' | ':') (NameChar)*
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Name
-----
　↓
-----
[84]    Letter    ::=   BaseChar  | Ideographic
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Letter
-----
　↓
-----
[85] BaseChar    ::= [#x0041-#x005A] | [#x0061-#x007A] | [#x00C0-#x00D6] | [#x00D8-#x00F6] | [#x00F8-#x00FF] | [#x0100-#x0131] | 
　　　　　　　　　　　　 ...(中略)...
　　　　　　　　　　　　 [#x3105-#x312C] | [#xAC00-#xD7A3]
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-BaseChar
-----

think49 · Answer

#3です。

> 「W3C」＝「CSS2」と思っていたのですが、「W3C」と「CSS2」って別物なのでしょうか？
W3Cは「WWWで利用される技術の標準化をすすめる団体」であり、CSS2策定にも関与していますが、「W3C = CSS2」ではないですね…。
W3Cはただの団体でCSS2仕様は別にあります。HTML4.01やXHTML1.0も別に定義されています。

W3Cとは 【WWW Consortium】 (World Wide Web Consortium) - 意味/解説/説明/定義 ： IT用語辞典
http://e-words.jp/w/W3C.html

■HTML4.01仕様
id属性値は日本語を扱えず、class属性値は日本語を扱えます。
id属性値は "&;" を許可していないので、実体参照、数値参照も使えません。

----- id属性値 (「HTML 4.01 Specification」より)
IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。
http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/types.html#type-name
-----

----- class属性値 (「HTML 4.01 Specification」より)
CDATAは、文書文字集合中の任意の文字の列であり、文字実体をも含む。ユーザエージェントは、この属性値を次のように解釈する必要がある。
    * 文字実体は文字で置き換える。
    * 改行文字LFは無視する。
    * 個々の改行文字CRあるいはタブ文字は、1つの空白文字で置き換える。
http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/types.html#type-cdata
-----

(収まりきらないので、次の記事に続きを書きます)

think49 · Answer

CSS2に限定するならば、エスケープすれば日本語も扱えます。 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#value-def-identifier

テストですよ

テストしてみましょう

ただ、「HTML4.01 や XHTML1.0 でid属性値、class属性値に日本語を使えるか」っていうのは別の話なので、それもクリアする必要があるでしょうね。仕様書を確認しましょう。 HTML 4.01 Specification (ja) http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/cover.html XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語 http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html 掲示板/スタイルシート質問板/２行をまとめたセル内の上に文字を配置したい - TAG index Webサイト http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1298

ORUKA1951 · Answer

＞ネットを検索したところ、
まず、仕様書を確認すること。正しい物を知りたければね。
★まず、そのHTMLが何で書かれているかによって答えは違います。★
IDは、
HTML4.01より前は
　アルファベットから始まる
　英数字と-.からなる。
HTML4.01以降は
　_と:が使えるようになった。

XHTMLは、
・英字または_ から始まり
・英数字と-と.と_で記述　:は使えない
・重要　xmlから始めてはならない

class名については調べていませんが、特に制限はなかったと記憶していますが、使わないほうがよいと思っています。

stpopo · Answer

こんにちわ

「CSS Validation Service」で検証してみたらわかることですが、
ID,classとも、エラーがでましたので、準拠されていないんじゃないでしょうか。。

ブラウザでも検証しましたが、下記のとおりOperaしかちゃんと認識されませんでした。
（テストはローカルのみ）
--------------------------------
IE7　×
Chrome4　×
Firefox3.6　×
Opera9.6　○
--------------------------------

●CSS Validation Service
W3Cによって運営されており、 CSSをチェックするのに使うことができます。
このツールは、 CSS 仕様と比較するだけでなく、エラーや、CSS の誤用等を発見したり、自分の書いたCSS が使い勝手を悪くするような場合に教えてくれたりします。

CSS／日本語のID・クラス名について

#5の続き。

#4の続き。

#3です。

CSS2に限定するならば、エスケープすれば日本語も扱えます。

この回答への補足

＞ネットを検索したところ、

この回答への補足

こんにちわ

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング