More than 3 years have passed since last update.

【初心者向け】id名・class名で使えない文字

Posted at 2021-05-09

#どうも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名は同一ページ内では固有のものにしましょう。

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

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

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

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

引用:

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

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