CSSのクラス名にはどのような制限がありますか？

Webページのスタイルを設定する際に欠かせないCSSですが、クラス名やID名などを自由に設定できる一方で、いくつかのルールに従う必要があります。ルールに違反したクラス名は、ブラウザで正しく解釈されず、意図したスタイルが適用されない可能性があります。そこで今回は、CSSのクラス名に関する制限について詳しく解説していきます。

CSSの識別子に関する基本ルール

CSSにおいて、要素名、クラス、IDなどを含む「識別子」は、以下のルールに従って命名する必要があります。

使用できる文字は、半角英数字（a-z、A-Z、0-9）、ハイフン（-）、アンダースコア（_）、U+0080以上のUnicode文字のみです。
識別子は、数字、2つ以上のハイフン、ハイフンの直後の数字で始めることはできません。
大文字と小文字は区別されます。（例：class="sample"とclass="Sample"は異なるものとして扱われます）

これらのルールをまとめると、以下のテーブルのようになります。

ルール	説明	有効な例	無効な例
使用可能な文字	半角英数字、ハイフン、アンダースコア、U+0080以上のUnicode文字	sample, sample-1, _sample, サンプル	1sample, --sample, sample--, sample&
開始文字の制限	数字、2つ以上のハイフン、ハイフンの直後の数字は不可	sample, sample-1, _sample	1sample, --sample, -1sample

なぜこれらの制限があるのか？

これらの制限は、CSSとHTMLの解釈を明確にし、予期しないエラーを防ぐために設けられています。例えば、数字で始まるクラス名は、CSSの文法と競合する可能性があります。また、ハイフンで始まるクラス名は、将来的なCSSの仕様変更に備えて避けるべきとされています。

具体的なHTMLコード例

以下は、有効なクラス名と無効なクラス名を使用したHTMLコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クラス名検証</title>
  <style>
    .sample { /* 有効なクラス名 */
      color: blue;
    }
    .sample-1 { /* 有効なクラス名 */
      font-size: 1.2em;
    }
    /* .1sample { 無効なクラス名 */ 
    /*  color: red; 
    /* } */
  </style>
</head>
<body>
  <p class="sample">このテキストは青色になります。</p>
  <p class="sample-1">このテキストは少し大きくなります。</p>
  <p class="1sample">このテキストは赤色になりません。</p>
</body>
</html>

まとめ

この記事では、CSSのクラス名に関する制限と、その理由について解説しました。これらのルールに従うことで、Webページのスタイルを正しく、そして安全に適用することができます。CSSを学習する際には、これらのルールをしっかりと理解しておきましょう。

参考資料

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

よくある質問

Q1. クラス名に日本語は使える？

A1. はい、使用できます。U+0080以上のUnicode文字は使用可能です。

Q2. クラス名にスペースは使える？

A2. いいえ、使用できません。スペースは複数のクラスを指定する際に使用します。

Q3. クラス名の大文字と小文字は区別される？

A3. はい、区別されます。class="sample"とclass="Sample"は異なるものとして扱われます。

その他の参考記事:jquery eq 取得