HTMLコーディングをしていて、一番時間がかかるのは「クラス名を考える時間」だと言われています。
wrapper？ container？ それとも box？」自分一人で作るならまだしも、チーム開発や将来のメンテナンスを考えると、クラス名は適当につけるわけにはいきません。
分かりやすく、壊れにくいCSS設計にするためには、世界標準の「命名規則」を知っておくことが重要です。
この記事では、HTML/CSSのクラス名における基本的な命名規則から、現場でよく使われる「BEM」などの設計思想、そして迷った時にすぐに使える「場所・役割別の単語チートシート」まで、現在のWeb制作現場で役立つ知識を徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
クラス名の基本ルールと禁止文字
命名規則（設計思想）を学ぶ前に、まずはHTML/CSSの仕様として「やってはいけないこと」「推奨される書き方」を押さえておきましょう。
使用できる文字と禁止文字
クラス名には、半角英数字、ハイフン（-）、アンダースコア（_）が使用できます。
しかし、「数字から始める」ことはできません。
- ○
.box-01 - ○
.section_title - ×
.01box（数字始まりはNG） - ×
.box@name（記号はNG）
単語のつなぎ方（ケース）の種類
複数の単語をつなげる場合、いくつかの記法があります。
HTML/CSSでは一般的に「ケバブケース」が推奨されます。
- ケバブケース（kebab-case）:
main-content
→ HTML/CSSの標準。すべて小文字でハイフンつなぎ。 - スネークケース（snake_case）:
main_content
→ BEM記法の一部などで使われる。 - キャメルケース（camelCase）:
mainContent
→ JavaScriptなどで使われる。CSSではあまり使わない。
世界標準のCSS設計思想「BEM」とは？
現在、多くのWeb制作現場で採用されている命名規則が*「BEM（ベム）」 です。
BEMは、Block（塊）、Element（要素）、Modifier（状態）の3つの概念でクラス名を構成するルールです。
BEMの基本構文
Block__Element--Modifier という形式で記述します。
- Block: 独立したパーツの塊（例:
menu） - Element: ブロックの中にある構成要素（例:
item）。アンダースコア2つ__でつなぐ。 - Modifier: 色やサイズなどの状態違い（例:
active,red）。ハイフン2つ--でつなぐ。
BEMを使ったコーディング例
メニューリストを作成する場合の例を見てみましょう。
<nav class="menu">
<ul class="menu__list">
<li class="menu__item">
<a href="#" class="menu__link">HOME</a>
</li>
<li class="menu__item menu__item--active"> <!-- Modifierで状態を表す -->
<a href="#" class="menu__link">ABOUT</a>
</li>
</ul>
</nav>
コード解説
menu: これがBlock（大枠）です。menu__item: Blockの中のElement（要素）です。menuに属していることが名前だけで分かります。menu__item--active: ElementのModifier（状態）です。現在地（アクティブ）などの変化を表します。- クラス名は長くなりますが、HTMLを見ただけで「どのパーツの、どの部分で、どんな状態か」が明確になるのが最大のメリットです。
その他の代表的なCSS設計（OOCSS, SMACSS）
BEM以外にも、有名な設計思想があります。
プロジェクトによってはこれらが採用されたり、組み合わせて使われたりします。
OOCSS（Object Oriented CSS）
「構造」と「見た目（スキン）」を分けて管理する考え方です。
例えば、「ボタンの形（構造）」と「ボタンの色（見た目）」を別々のクラスにします。
<!-- 構造と見た目をマルチクラスで指定 -->
<button class="btn btn-primary">送信</button>
<button class="btn btn-danger">削除</button>
SMACSS（スマックス）
CSSを「Base」「Layout」「Module」「State」「Theme」の5種類に分類して管理する手法です。
特に、接頭辞（プレフィックス）をつけるルールが特徴的です。
l-header（Layout：レイアウト）is-active（State：状態）
【保存版】クラス名によく使われる単語チートシート
「ここはなんて名前をつければいいんだろう？」と迷った時に使える、場所・役割別の頻出単語リストです。
レイアウト・枠組み系
| クラス名 | 意味・用途 |
|---|---|
wrapper / wrap |
全体を包むもの。包装紙。 |
container |
コンテンツを格納する箱。wrapperの内側にあることが多い。 |
header |
ヘッダー領域。 |
footer |
フッター領域。 |
main |
メインコンテンツ領域。 |
sidebar / side |
サイドバー。 |
content / body |
中身。内容。 |
inner |
要素の内側にある補助的な箱。 |
パーツ・部品系
| クラス名 | 意味・用途 |
|---|---|
nav / global-nav |
ナビゲーション。 |
list |
リスト、一覧。 |
item |
リストの中の個々の項目。 |
btn / button |
ボタン。 |
icon |
アイコン。 |
thumb / thumbnail |
サムネイル画像。 |
logo |
ロゴマーク。 |
heading / title |
見出し。タイトル。 |
text / desc |
説明文。ディスクリプション。 |
状態・修飾系（Modifier）
| クラス名 | 意味・用途 |
|---|---|
active / current |
現在地、選択中、有効な状態。 |
disabled |
無効な状態。押せないボタンなど。 |
hover |
マウスオーバー時のスタイル。 |
large / lg |
大きいサイズ。 |
small / sm |
小さいサイズ。 |
primary |
主要な、優先度が高い色やスタイル。 |
secondary |
副次的な、2番目の色やスタイル。 |
HTMLのid属性とファイル名の命名規則
クラス名だけでなく、id名や画像ファイル名にもルールがあります。
id名の命名規則（Google推奨）
GoogleのHTML/CSSスタイルガイドなどでは、id名もクラス名と同様に「すべて小文字」で「ハイフン区切り」が推奨されています。
ただし、idはページ内で「一度しか使えない」という制約があるため、スタイルの適用には使わず、ページ内リンク（アンカー）やJavaScriptのフック（目印）として使うのが一般的です。
画像ファイル名の命名規則
ファイル名も「半角英数字」と「ハイフン」または「アンダースコア」のみを使います。
日本語ファイル名は文字化けの原因になるため厳禁です。
- ○
logo-header.png - ○
bg_main.jpg - ×
ロゴ.png - ×
Image 01.jpg（スペース入りはNG）
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTML/CSSにおけるクラス名の命名規則について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
