このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSのIDセレクタとクラスセレクタに日本語は使える?

記事Jun.28th, 2021
CSSのスタイルを適用するために使用されるIDセレクタやクラスセレクタには一般的には英数字が使用されますが、日本語を使用しても良いのかどうかについて解説。

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のセレクタの制約を回避する

CSSのセレクタの制約を回避する

前述の通り、HTMLの仕様ではID名とクラス名の制約がほとんどありませんが、CSSの仕様ではIDセレクタクラス・セレクタとして使用できる文字や文字の順番にいくつかの制約があります。

しかし、この制約は文字を直接記述する場合であり、その文字の代わりにエスケープ・シーケンスとして記述することでどんな文字でも好きな順番でIDセレクタやクラスセレクタに使用することができます。

数字からはじまる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>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク