ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

classおよびidの先頭に数字は使えない。

htmlとかcssに関わる人ならもはや説明不要ですが、classとidはタグにスタイルを適用するためのものです。命名規則はないため、だいたいの名前はスタイルがちゃんと反映されるのですが、誤った名前を付けるとスタイルが反映されなくなってしまいます。

広告

名前がなんでも許されているわけではない。

今回はただ単に文字を赤くするだけのコードを書いてみます。

/* css */
.red_class {
	color: #f00;
}
#red_id {
	color: #f00;
}

<!-- html -->
<p class="red_class">赤色class</p>
<p id="red_id">赤色id</p>

先頭に貼った写真が実行結果です。当然ながら、文字が赤くなりますね。
次は、先ほどのコードに書かれている、classとid名を変えてみます。

/* css */
.1red_class {
	color: #f00;
}
#1red_id {
	color: #f00;
}

<!-- html -->
<p class="1red_class">赤色class</p>
<p id="1red_id">赤色id</p>

そして、以下が実行結果。

classおよびid名の先頭に数字を入れただけで、スタイルがされなくなってしまいました。仕事中でも、ただしくスタイルを書けているはずなのに、なぜか一向にスタイルが反映されない場面に出くわすときがありましたが、そのときは真っ先に名前を疑うべきでした。

他のブラウザの場合は?

先ほどまではchromeにおける結果だったので、firefoxとedgeで見てみましょう。IE?それはもういい。

まずはfirefox。

続いてedge。フォントが変になっていますが、css側でフォントの指定をしていないうえに、ブラウザ側でなぜかデフォルトフォントの設定がないためです。お気になさらず。

どちらもchromeと同様の結果になりました。ブラウザの問題ではないようです。cssそのものが、classとidの先頭に数字を付けてはいけないという決まりになっているのでしょう。

一部の記号なら大丈夫。

classとidの名前には、英数字だけでなく一部の記号も含むことができます。それはハイフンとアンダーバーです。でも、先頭に数字がダメだったので、記号もダメなように感じますが、先頭にハイフンとアンダーバーを使用することは可能です。
先頭に記号をつける名前なんて、そうそうないですけどね。

まとめ。

サイトの規模が大きくなるにつれて、名前をどうやってつけようか悩むところですが、頭に数字をつけることだけは避けましょう。