class属性に使用できる文字について

987 views
Skip to first unread message

Wataru Kanzaki

unread,
Jul 10, 2012, 4:56:12 AM7/10/12
to GG_HTML5jp
神崎渉瑠です。

class属性に使用できる文字について質問です。

HTML4ではclass属性はCDATAですので、以下のようにしてみましたが反映されないようです。
(Safari5、Firefox13)
HTML5では定義がみあたらないのですが、class属性のルールはどうなっているのでしょうか。


/* スタイルシート、<link>にて読み込み */
@charset "utf-8";
.field{border:1px solid blue;}
.中くらい{width:300px; height:300px;}
.300x300{width:300px; height:300px;}
/* スタイルシート以上 */

<div class=“field 300x300”></div>
<div class=“field 中くらい”></div>

「[a-zA-Z]で始まる[a-zA-Z0-9_-]で構成される文字列」であれば反映されるようですがよくわかりませんでした。


また、CSSファイルの書き方ですが、

.aaa-bbb{width: 300px;height:300px;}
.中くらい{width: 300px;height:300px;}
.300x300{width:300px; height:300px;}

であれば、<div class=“aaa-bbb”>が反映されますが、

.aaa-bbb,
.中くらい,
.300x300{width:300px; height:300px;}

では反映されませんでした。
cssファイルのセレクタのルールも、日本語([a-zA-Z0-9_-:]以外)はダメなのでしょうか。

参考:
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#class-html


-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠



Masataka Yakura

unread,
Jul 10, 2012, 5:39:53 AM7/10/12
to html5-dev...@googlegroups.com
こんばんは。矢倉です。

これ、HTML5というよりもCSSの問題ですね。
CSS2仕様書の構文の章に、CSSの識別子として使える文字について書かれています。


In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

なので、上記で書かれている範囲以外の文字を識別子として使いたい場合はエスケープする必要があります。

後半に書かれている

.aaa-bbb, 
.中くらい, 
.300x300{width:300px; height:300px;} 

が反映されないのは、セレクタの仕様です。

セレクタの仕様に、ちょうど似たような例があります。

「.中くらい」が不正な識別子となるので、そのセレクタグループ全体がinvalidとなって、宣言が無視されています。

Wataru Kanzaki

unread,
Jul 10, 2012, 5:51:59 AM7/10/12
to html5-dev...@googlegroups.com
神崎渉瑠です。

ありがとうございます。
なるほど、わかりました。


HTMLだけであればCDATAのようですね。
とはいえclassはCSSに使うのが主なので、CSSのルールに合わせるのが無難そうです。

-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠



Atsushi Miura

unread,
Jul 10, 2012, 6:00:08 AM7/10/12
to html5-dev...@googlegroups.com
三浦と申します。
ご参考まで。

既出ですが、名称に利用できるルールは下記があります。

4 CSS2 syntax and basic data types
4.1.3 Characters and case
http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html

CSS3 module: Syntax
4.1. Characters and case
http://www.w3.org/TR/css3-syntax/

日本語については、アスキー以外のユニコード文字は不可となっていますので、要するにアルファベット以外の文字は不可ということでしょう。
また、数字およびハイフンと数字の組合せが名称の先頭にくるのも不可です。

日本語や全角スペースがセレクタに含まれている場合には終了ブロック( } )まで、属性や属性値の前後に含まれていると、直後の終了子( ;
)まで無視されると記憶しています。
==


2012年7月10日 18:51 Wataru Kanzaki <goo...@wi-wi.jp>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>

Wataru Kanzaki

unread,
Jul 10, 2012, 6:34:07 AM7/10/12
to html5-dev...@googlegroups.com
神崎渉瑠です。

ありがとうございます。

原因は私の知識不足でしたが
ルールとブラウザの実装が違うということがあれば使い物になりませんから、
ブラウザの実装通り、アルファベットから始まる英数字で作りました。


-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠



Kohei Yamamoto

unread,
Jul 10, 2012, 6:53:45 AM7/10/12
to html5-dev...@googlegroups.com
こんばんは。山本です。

英語ですが、こちらのPaul Irishの動画で、結構わかりやすく説明してくれてますので、ご参考までに。


日本語に関しては触れてませんが、クォーテーションなしだとどうだとか、ユニコードの記号なんかに関して、詳しく説明してくれてます。

残念ながら、動画中で紹介されているmotherffingcssescapes.comなどは閉鎖されているようですが、githubに上がっていました。



Kohei Yamamoto

unread,
Jul 10, 2012, 6:57:21 AM7/10/12
to html5-dev...@googlegroups.com
さきほどの文中のURL間違っていました。申し訳ありません。

Motherffing CSS escapes

移動してた様です。

無理やりやれば、こんな方法もあるよとうジョークみたいなものですね。



2012/7/10 Kohei Yamamoto <con...@koheiyamamoto.me>

Wataru Kanzaki

unread,
Jul 10, 2012, 7:11:50 AM7/10/12
to html5-dev...@googlegroups.com
神崎渉瑠です。

言われてみればたしかに、\を使えばclass属性にはいけますね。

http://www.w3.org/TR/CSS2/syndata.html#characters
>they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).


けどHTML4では、idに \ や2バイト、3バイト文字などは使えないですよ。。。
http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.2
>ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".”).

HTML5では規制がなくなってるんでしょうか。

http://www.w3.org/TR/html5/global-attributes.html#the-id-attribute
>The value must not contain any space characters.
スペースさえ入らなければOKってことなんですかね?

-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠



Kohei Yamamoto

unread,
Jul 10, 2012, 7:31:09 AM7/10/12
to html5-dev...@googlegroups.com
山本です。

HTML5になってゆるくなったという事でいいと思います。
またスペースだけでなく、=や<,>などの記号もクォーテーションなしの場合は、ダメの様ですね。
CSSではエスケープしないとダメなので、ユースケースとしては、内部リンクに使う属性とかでしょうか。




2012/7/10 Wataru Kanzaki <goo...@wi-wi.jp>
Reply all
Reply to author
Forward
0 new messages