Jun.28th, 2021
IDセレクタとクラスセレクタに日本語は使える？
ID名とクラス名には英数字しか使えない？
CSSでスタイルを適用する際には、要素にID名とクラス名をつける“id”属性と“class”属性、それにこれらを適用対象として選択するIDセレクタとクラス・セレクタが使用されることが多いですが、ID名とクラス名はアルファベットか数字でなければならないといわれることがあり、そのようにするのが一般的です。
HTML4.01の仕様書では“id”属性の値は以下の要件を満たしていなければならないとされていました。
- 英字(“a”~“z”と“A”~“Z”)、数字(“0”~“9”)、ハイフン(“-”)、アンダースコア(“_”)、コロン(“:”)、ピリオド(“.”)の組み合わせです。
- 1文字目は英字でなければなりません。
要するにこの仕様ではアルファベットと数字、いくつかの記号しか使用が認められていませんが、これは過去の仕様です。
ID名とクラス名には日本語も使える
HTML5以降、現在に至るまでの仕様では“id”属性と“class”属性で指定されるID名とクラス名はホワイトスペース(半角スペース(“ ”)、タブ文字など)を含んではいけないこと以外の制約はなくなりました。つまり、日本語を含め基本的にどんな文字でも使うことができます。
一方、CSS3の仕様ではIDセレクタとクラス・セレクタで選択できるID名とクラス名についていくつかの決まりがあります。ID名とクラス名は有効な識別子である必要があり、以下のような決まりがあります。
- 英字(“a”~“z”と“A”~“Z”)、数字(“0”~“9”)、ダッシュ(U+002D、“-”)、アンダースコア(U+005F、“_”)、非ASCII文字(U+0080以降)、エスケープ文字の組み合わせです。
- 1文字目が数字であってはいけません。
- 1文字目がダッシュである場合は2文字目は数字であってはいけません。
- 引用符(“"”もしくは“'”)で囲ってはいけません。
このようにCSSの仕様ではいくつかの制約があるものの、日本語などの英数字以外の文字が使用できないという制約はありません。。
次の例では日本語のID名とクラス名でスタイルを適用しています。
#春 {
background-color: #e198b4; /*■*/
}
#夏 {
background-color: #00a381; /*■*/
}
#秋 {
background-color: #fabf14; /*■*/
}
#冬 {
background-color: #f8fbf8; /*■*/
}
.見出し {
font-style: italic;
text-shadow: 5px 5px 3px;
}
.本文 {
background-color: #fdeff2; /*■*/
}
<h1 id="春" class="見出し">春</h1>
<p class="本文">
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<h1 id="夏" class="見出し">夏</h1>
<p class="本文">
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<h1 id="秋" class="見出し">秋</h1>
<p class="本文">
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<h1 id="冬" class="見出し">冬</h1>
<p class="本文">
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
春
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
ID名とクラス名を日本語にするメリットとしてはウェブ制作者が日本語話者である場合に馴染みやすいということです。
一方でデメリットとしては半角英数字は1文字1バイトで表現できますが、他の文字は1文字のバイト数が2バイト以上となり、日本語の文字は多くが3バイトになるので、わずかではありますがHTMLとCSSのファイルサイズが大きくなってしまうということです。また、現代では問題になることは少なくなりましたが、文字化けするとスタイルが適用されません。
CSSのセレクタの制約を回避する
数字からはじまるIDセレクタとクラスセレクタ
ユニコードエスケープ文字を使用すれば通常は無効になる数字からはじまるIDセレクタとクラス・セレクタも有効です。
.\32\32\32猫 {
background-color: #93ca76; /*■*/
font: bold 1.5em "游明朝","ヒラギノ明朝",serif;
}
<p class="222猫">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
半角記号を含むIDセレクタとクラスセレクタ
通常、IDセレクタとクラス・セレクタでは英数字とダッシュ、アンダースコア以外のASCII文字が使用できないので、ドット(“.”)やナンバーサイン(“#”)、アンパサンド(“&”)などの半角記号は使用することができませんが、エスケープ文字を使用すればこれらを含んだIDセレクタとクラス・セレクタも有効です。
.\.猫 {
background-color: #e198b4; /*■*/
font: bold 1.5em "游明朝","ヒラギノ明朝",serif;
}
.\#猫 {
background-color: #00a497; /*■*/
font: bold 1.5em "游明朝","ヒラギノ明朝",serif;
}
<p class=".猫">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
<p class="#猫">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
猫は、上のかぎり黒くて、ことはみな白き。
変わったIDセレクタとクラスセレクタ
エスケープ文字を使用することでIDセレクタとクラスセレクタにいろいろな記号や文字を使用することができます。
次のようなクラス名でも仕様上はクラスセレクタとして有効です。
.\(\=\^ФωФ\^\\=) {
background-color: #9d5b8b; /*■*/
font: bold 1.5em "游明朝","ヒラギノ明朝",serif;
}
<p class="(=^ФωФ^=)">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
