どうも7noteです。id名・class名で使えない文字について

HTMLを書く際にidとclassはほぼ必須といっても過言ではありません。

しかし、idやclass名を書く際に使えない文字があることを覚えておく必要があります。

id名、class名で使えない文字

数字から始まるもの

数字から始まるid名やclass名は使えません

<div class="123">これはダメ</div>
<div class="abc123">これはOK</div>

調べたところ、どうしても数字から始まるid名やclass名を使いたい場合の方法もあるようです。
https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1

ハイフン(-)、アンダースコア(_)以外の記号

使える記号はこの2つだけです。それ以外の#だったり&を入れてしまうと効かなくなってしまいます。
エラーの原因になる可能性があるので、記号はこの2つのどちらかのみを以外使用します。

ただし、ハイフン(-)１つだけのクラス名はNGです。
<div class="-">これはダメ</div>
<div class="--">これはOK</div>

半角スペース

これも、使えません。
半角スペースについては、入れてしまうと半角スペースの前と後で別々のクラス名と認識されてしまいます。

<div class="hello world">helloとworldの2つのクラス名扱いになる</div>

改行

これも半角スペース同様に2つのクラス名扱いになります。

<div class="hello world">helloとworldの2つのクラス名扱いになる</div>

同一ページで複数の同じid名

要検証
同一ページ内で、同じid名を複数使うことはできません。
エラーの原因になるので必ずid名は同一ページ内では固有のものにしましょう。

使えなさそうで実は使えるもの

日本語(全角文字)・全角スペース

これ、実は使えます。しかし一般的に使ってるサイトはほぼありません。

HTML5・CSS3から使えるようになっていますが、それまでは基本英語で指定していたこともありますし、ソースを見るのが日本人とは限らないこともあるので、現状英語を使うのが無難でしょう。

全角スペースだけでもクラスとして使用は可能だが、だれもこんな指定はしない。
<div class="　">一応OK。でもだれも使わない。</div>

まとめ

細かいルールの通りでいくと以下の記事でまとめられていたとおりになります。

引用:
1. 文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン（-）およびアンダースコア（_）のみを含むことができる
2. 数字([0-9])、2つのハイフン(--)、ハイフンの直後の数字(-[0-9])で開始できない
3. バックスラッシュ()で文字をエスケープできる(例: - は - を表す)
4. Unicodeエスケープシーケンスを利用できる(例: \0030 は 0 を表す)

物によって、またブラウザによってここで書かれているものでもちゃんと認識して動くものがあるかもしれません。
しかし、一般的に使えないものであり、全てのブラウザで対応していないため、この記事で紹介したものをid名・class名として使用することはおすすめしません。

【フロントエンド強化月間に参加中↓↓】

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ