Web制作やアプリケーション開発において、CSSのクラス名をどう付けるかは、プロジェクトの保守性を左右する重要な要素です。
特に大規模なサイトでは、HTMLの構造とCSSの命名規則が密接に関わります。
一貫性のあるルールを導入することで、スタイルの衝突（競合）を防ぎ、誰が書いても読みやすいコードを実現できます。
この記事では、世界標準の設計思想である「BEM」の解説を中心に、クラス名に使える文字のルール、現場で即活用できる単語チートシートまで詳しく紹介します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
CSSクラス名の基本的な書き方と文法ルール
CSSの命名規則には、基本的な書き方のマナーから、チーム開発を円滑にするための設計思想まで幅広く存在します。
ここではまず、文法的に正しく、かつ読みやすいクラス名の基礎知識を整理しましょう。
使用できる文字と「ハイフン」の推奨
CSSのクラス名には、半角英数字、ハイフン（-）、アンダースコア（_）が使用可能です。
しかし、先頭に数字や記号を使うことはできません。
また、現代のWeb制作では、複数の単語を繋ぐ際に「ハイフン」を用いるケバブケース（kebab-case）が最も一般的です。
<!-- 良い例：ケバブケース（ハイフン繋ぎ） -->
<div class="main-content"></div>
<!-- 避けるべき例：キャメルケース（大文字混じり） -->
<div class="mainContent"></div>
上記のソースコードにおいて、main-content は単語の間をハイフンで区切っています。
CSSの世界では、HTMLタグや属性に大文字を使用しない慣習があるため、クラス名においても大文字は使わないのが基本です。
全て小文字で統一することで、コード全体の視認性が向上し、タイピングミスによるバグも減らすことができます。
キャメルケースは主にJavaScriptの変数名などで使われるため、CSSではハイフン繋ぎを採用して役割を明確に分けるのが賢明な判断といえるでしょう。
具体的で意味のある名前を付ける
クラス名は、その要素の「見た目（赤い、大きい）」ではなく、「役割や中身（見出し、ボタン）」を表す名詞にするのが鉄則です。
<!-- 悪い例：見た目に基づいた命名 -->
<div class="red-box"></div>
<!-- 良い例：役割に基づいた命名 -->
<div class="alert-message"></div>
このコードの解説を詳しく行います。 左側の red-box という名前は、将来的にデザイン変更で色が青に変わった場合、名前と実態が矛盾してしまいます。
一方、右側の alert-message という名前であれば、色が何色に変わろうとも「警告メッセージを表示する」という役割は変わらないため、コードの寿命が長くなります。
常に「この要素は何のために存在しているのか」を自問自答して命名することが、保守性の高いCSSへの第一歩です。
世界標準の設計思想「BEM」をマスターする
現在、多くのプロフェッショナルな現場で採用されている命名規則がBEM（ベム）です。
BEMは、Block（塊）、Element（要素）、Modifier（状態）の3つの概念で構成されます。
このルールを導入することで、CSSの適用範囲（スコープ）が明確になり、予期せぬ場所へのスタイル反映を物理的に防ぐことが可能になります。
BEMの基本構造と書き方
BEMでは、Block__Element--Modifier という形式でクラス名を記述します。
アンダースコア2つ（__）とハイフン2つ（--）を使って階層を表現するのが最大の特徴です。
<!-- BEMによるカードコンポーネントの実装例 -->
<div class="card">
<h2 class="card__title">タイトルテキスト</h2>
<p class="card__desc">説明文がここに入ります。</p>
<!-- Modifierで「強調状態」を表現 -->
<button class="card__btn card__btn--primary">詳細を見る</button>
</div>
<style>
/* Block: 独立したパーツ */
.card {
padding: 20px;
border: 1px solid #ccc;
}
/* Element: Blockを構成する要素（アンダースコア2つで繋ぐ） */
.card__title {
font-size: 1.5rem;
}
/* Modifier: 状態や変化（ハイフン2つで繋ぐ） */
.card__btn--primary {
background-color: blue;
color: white;
}
</style>
ソースコードの内容を詳しく読み解いていきましょう。
ここでは card クラスが一つの大きな「Block（塊）」として定義されています。
その中にあるタイトルやボタンは、card__title や card__btn のように記述することで、「これはcardというBlockの中に属している要素（Element）である」ことが名前だけで判別できます。
さらに、ボタンに対して card__btn--primary というModifierを追加しています。
これは、通常のボタンという要素に対して「主要な（Primary）」という特別な見た目を上書きするためのクラスです。
このように構造を階層化することで、他の場所にあるタイトル（例えば news__title）と名前が衝突する心配がなくなり、安心してスタイルを追加できるようになります。
迷った時に役立つ！CSSクラス名チートシート
「このパーツの名前、なんて付ければいいんだろう」と悩む時間は非常に多いものです。
ここでは、日本のWeb制作現場で頻繁に使われる定番の単語を、場所や役割ごとに一覧化しました。
これらを組み合わせて使うことで、誰が見ても一瞬で構造が理解できる「伝わる命名」が可能になります。
レイアウト・枠組みに関する単語一覧
| 分類 | 推奨される単語 | 用途 |
|---|---|---|
| 全体を包む箱 | wrapper, container |
コンテンツの最大幅を制限する外枠 |
| ヘッダー | header, global-header |
サイト上部の共通エリア |
| メイン領域 | main, content |
ページの主要な中身 |
| サイドバー | sidebar, sub-content |
横に配置される補助的なエリア |
| フッター | footer |
サイト下部の共通エリア |
| インナー | inner |
要素の内側でパディングを調整する箱 |
コンポーネント・部品に関する単語一覧
| 分類 | 推奨される単語 | 用途 |
|---|---|---|
| ナビゲーション | nav, navbar, menu |
リンクの集まり |
| リスト・一覧 | list, item |
繰り返し並ぶ要素のセット |
| 見出し | heading, title, headline |
セクションのタイトル |
| ボタン | btn, button |
クリック可能なアクション要素 |
| カード | card, panel |
画像とテキストがセットになった枠 |
| 画像 | thumb, img, icon |
サムネイルやアイコン画像 |
| 説明文 | desc, summary, text |
短い紹介文や本文 |
状態や修飾（Modifier）に関する単語一覧
| 分類 | 推奨される単語 | 用途 |
|---|---|---|
| 現在の状態 | active, current, selected |
選択中や表示中の状態 |
| 無効な状態 | disabled, error |
操作できない、またはエラーの状態 |
| 重要度 | primary, secondary, alert |
色や優先度の違い |
| サイズ | small (sm), large (lg) |
大きさのバリエーション |
HTMLとCSSを連携させた実務的な命名フロー
命名規則を理解したら、次は実際のコーディングにどう落とし込むかが鍵となります。
単に名前を決めるだけでなく、HTMLの入れ子構造に合わせてルールを適用していく一連の流れを確認しましょう。
<!-- 実務でよくある「ニュース一覧」のセクション例 -->
<section class="news">
<div class="news__inner">
<h2 class="news__heading">最新ニュース</h2>
<ul class="news__list">
<li class="news__item">
<a href="#" class="news__link">
<span class="news__date">2026.01.01</span>
<span class="news__text">新しいプロジェクトが始動しました。</span>
</a>
</li>
<!-- Modifierで「重要」な項目を強調 -->
<li class="news__item news__item--important">
<a href="#" class="news__link">
<span class="news__date">2026.01.05</span>
<span class="news__text">メンテナンスのお知らせ</span>
</a>
</li>
</ul>
</div>
</section>
このソースコードの設計思想を詳しく解説します。
まず、セクション全体を news というBlockとして捉えています。
内部に news__inner という余白調整用のElementを置くことで、レイアウトの微調整をBlockの役割から切り離しています。
各リスト項目には news__item という名前を付け、特定の項目だけ目立たせたい場合には news__item--important というModifierを追加で付与しています。
ここで重要なのは、news__item--important は単体で使うのではなく、必ずベースとなる news__item とセットで使うという点です。
これにより、共通のスタイルは news__item で定義し、差分だけをModifierで書き換えるという効率的な管理が可能になります。
このようにHTMLのクラス名を整理することで、CSS側でも「ネスト（入れ子）」を深くせずに済み、スタイルの再利用性が格段に高まるのです。
HTML/CSSのスキルを活かして年収を上げる方法
以上、CSSのクラス名の命名規則について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
