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を学習する際には、これらのルールをしっかりと理解しておきましょう。
参考資料
よくある質問
Q1. クラス名に日本語は使える？
A1. はい、使用できます。U+0080以上のUnicode文字は使用可能です。
Q2. クラス名にスペースは使える？
A2. いいえ、使用できません。スペースは複数のクラスを指定する際に使用します。
Q3. クラス名の大文字と小文字は区別される？
A3. はい、区別されます。class="sample"とclass="Sample"は異なるものとして扱われます。
その他の参考記事:jquery eq 取得