HTMLクラス名の付け方ガイド｜命名規則・複数指定のポイントをわかりやすく解説

はじめに

HTML/CSS を学び始めると、最初に悩みやすいのが“クラス名の付け方”です。
クラス名は見た目や動きを指定するために欠かせない要素であり、命名の仕方ひとつでコードの読みやすさが大きく変わります。

本記事では、基礎知識から命名規則、複数クラスの使い方まで、初心者が押さえておくべきポイントをわかりやすく解説します。

クラス名の基礎知識と役割

クラス名とは何か

クラス名は、HTML 要素に名前を付けて、CSS や JavaScript から特定の要素を識別するために使うラベルのような役割を持っています。

同じクラス名を複数の要素に付けられるため、「共通のデザインを当てる」「一括で操作する」といった場面でも便利です。

HTML と CSS をつなぐ仕組み

HTML の要素に付けたクラス名は、CSS のセレクタとして利用されます。

たとえば button というクラス名をつけた場合、CSS では以下のように指定できます。

<div class="button">クラス名をつけよう</div>

.button {
  width: 150px;
  background: #ff557c;
  color: #fff;
}

この仕組みにより、構造（HTML）と見た目（CSS）を分離しつつ、柔軟にデザインを適用できます。

覚えておきたいクラス名の命名規則

一般的な命名ルール

クラス名は「後から読んでもどんな役割か理解できる」ことが大切です。

初心者でも使いやすい主なルールは以下の通りです。

以下に命名パターンをまとめました。

スネークケース（snake case）

単語をアンダーバー 「_」 でつなぐ。

例：main_title, card_wrapper

ケバブケース（kebab-case）

単語をハイフン 「-」 でつなぐ。

例：main-title, card-wrapper

キャメルケース（camelCase）

先頭は小文字、2 単語目以降の頭文字を大文字にする。

例：mainTitle, cardWrapper

パスカルケース（PascalCase）

すべての単語の頭文字を大文字にする。

例：MainTitle, CardWrapper

用途に応じて最適な命名規則を選び、統一して使うことで、読みやすく保守しやすいコードを作ることができます。

BEM などの記法を知る

クラス名を管理するための記法として有名なのが BEM です。

BEM は 「Block」「Element」「Modifier」 の頭文字を取った命名規則で、ページ構造をそのままクラス名に落とし込むことで、どの部分を指すスタイルなのかが直感的にわかるようにする仕組みです。

• block：独立した部品
• blockd__element：部品を構成する要素
• blockd__element--modifier：状態やバリエーション

例：card__title, button--large

規模が大きいサイトほど BEM のメリットが出ますが、初心者でも BEM の基本を理解しておくと命名の迷いが減ります。

複数クラスの付け方と使い分け

複数クラスを指定する方法

HTML では、半角スペースで区切ることで複数のクラスを同時に指定できます。 1 つの要素に複数のスタイルを重ねたい時に便利です。

<div class="card highlight"></div>

この例では card と highlight の 2 つのクラス名が付与されます。

これにより、1 つの要素に対して、card の基本デザインと highlight の強調スタイルを同時に適用できるようになります。

複数クラスが便利なケース

複数クラスで扱うと以下のようなメリットがあります。

• 基本デザイン + 状態、のように使い分けられる（例：button primary, button disabled）
• 再利用性が高まる
• CSS がシンプルになる

「役割」と「状態」を分けて書くとコードの整理がしやすくなります。

初心者がつまずきやすいポイント

命名の一貫性が保てない理由

初心者は、ページごとに命名がバラバラになりがちです。

思いつきでクラス名を決めると、後から同じ基準で統一しようとしたときに矛盾が生まれやすくなります。

最初に 「単語ルール」「区切り方」「命名の方向性」 を決めるだけで一貫性が保ちやすくなります。

避けたいクラス名の例

以下のようなクラス名は避けましょう。

• 抽象的すぎる名前：box, item, test
• 見た目に依存する名前：red, big, left
• 日本語ローマ字：aka, midashi

役割や意味が分かる英単語を使うのがベストです。

実践しながら覚えるクラス名の付け方

サンプルコードで学ぶ

以下は、よくあるカードデザインを例にしたクラスの付け方です。

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">説明文が入ります。</p>
</div>

このように、block・element・modifier を分けるだけで、構造が明確になります。

良いクラス名の判断基準

適切なクラス名を付けるためには、コードの可読性や再利用性を高める視点から、いくつかの基準を意識しておくことが重要です。

「未来の自分や他の人が読んでも迷わないか？」 を基準にすると、より良い命名ができます。

まとめ

クラス名の付け方は、HTML/CSS の基礎でありながら、コード品質に大きく影響する重要な要素です。

適切な命名規則を理解し、複数クラスの役割分担や一貫性を意識することで、読みやすく保守しやすいコードを実現できます。

特に、BEM のような体系立った命名手法は、初心者にも有効な学習指針となります。

こうした、HTML/CSS の基礎を始めとする Web 制作を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

クラス名を正しく理解しながら、より洗練された HTML/CSS コーディングを身につけていきましょう。