もう迷わないHTML/CSSのクラス名の付け方完全ガイド！

2024年12月30日2025年1月15日

Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが多いです。そこで、基本的なルールを解説し、具体例とサンプルコードを紹介しています。

クラス名が重要な理由

HTML/CSSのクラス名は、Webサイトやアプリケーションの構造を示す「言語」のようなものです。以下の理由から、クラス名は適切に設計する必要があります。

保守性が向上する: 意味のあるクラス名は、後からコードを読む人にとって理解しやすい。
再利用性が高まる: 汎用的なクラス名は、他の要素でも使い回しがしやすい。
チームでの作業が円滑になる: 統一された命名規則は、チーム全体の生産性を高める。

クラス名の基本ルール

英語で書く

クラス名は英語で記述するのが一般的です。日本語は避けましょう。また、日本語読み＝ローマ字表記も避けるべきです。英語で統一することで、グループで作成する他の納品先でも意味が伝わりやすくなります。

<!-- 悪い例 -->
<div class="ヘッダー"></div>
<div class="osusume"></div>

<!-- 良い例 -->
<div class="header"></div>
<div class="recommendation"></div>

小文字とハイフン（kebab-case）、またはアンダーバー（snake_case）を使う

クラス名は小文字で記述し、単語の区切りにはハイフンかアンダーバーを使います。特にハイフン（kebab-case）は、CSSやHTMLの一般的な規則として広く採用されています。一方で、アンダーバー（snake_case）も選択肢の一つですが、混在して使うのではなく、プロジェクト全体でどちらかを使う、統一することが重要です。チーム内で命名規則を共有し、すべてのメンバーが一貫して適用することで、コードの可読性と保守性が大幅に向上します。

<!-- 悪い例 -->
<div class="HeaderLogo"></div>

<!-- 良い例（ハイフン使用） -->
<div class="header-logo"></div>

<!-- 良い例（アンダーバー使用） -->
<div class="header_logo"></div>

良いclass名　ダメなclass名

意味のないクラス名

時間がないからといって意味のない名前は避けましょう。たとえば、aaaやtestのような名前は、後からコードを読んだときにその要素が何を指しているのか分からなくなります。また数字だけのクラス名（例: 123）はHTMLの仕様上使用できませんので注意してください。

ただクラス名に数字を含めることは可能ですが、可読性や拡張性の観点からおすすめしません。特に、数字がその要素の意味を十分に伝えられない場合があります。

<!-- 悪い例 -->
<div class="aaa"></div>
<div class="123"></div>
<div class="section1"></div>
<div class="box2"></div>

<!-- 良い例 -->
<div class="header"></div>
<div class="product-list"></div>
<div class="hero-section"></div>
<div class="featured-products"></div>

数字を含めたclass名を使わざるを得ない場合：例えば、CSSグリッドやフレックスボックスの列名として番号を付ける場合　下記のBootstrapなどで使われている場合（例: .col-1, .col-2）は、適切です。

意味のある名前を付けよう！

要素の役割や内容を分かりやすく表現する名前を付けることが重要です。クラス名が明確であれば、コードを読んだときにその役割や目的が一目で分かるようになります。

役割ベースの命名

ページ全体の構造を示す名前です。ヘッダー、フッター、サイドバーなどのように、要素の配置や役割を明確にします。

<header class="header">ヘッダー部分</header>
<footer class="footer">フッター部分</footer>
<aside class="sidebar">サイドバー</aside>
<main class="main">メインコンテンツ</main>
<nav class="navigation">ナビゲーションメニュー</nav>
<section class="content">コンテンツセクション</section>
<article class="post">記事</article>

ブロックとエレメントを明確に区別した命名も良い！

リスト全体を表すブロックに、nav-list　をつけて、リスト内の個々の要素に、nav-list__item。各アイテム内のリンクに、nav-list__linkをつける方法です。これだとすべてのクラス名にnav-listが含まれており、このブロックに属するエレメントであることが明確になります。スタイルの影響範囲がブロック内に限定されるため、他のリストやリンクとも競合しにくくなります。これはBEMを使った命名の方法です（後述）

<nav class="nav_list">
  <ul class="nav-list">
    <li class="nav-list__item"><a href="#home" class="nav-list__link">ホーム</a></li>
    <li class="nav-list__item"><a href="#about" class="nav-list__link">会社概要</a></li>
    <li class="nav-list__item"><a href="#contact" class="nav-list__link">お問い合わせ</a></li>
  </ul>
</nav>

コンポーネントベースの命名も○

独立したUIパーツ（コンポーネント）を表す名前です。カードやモーダルウィンドウ、ドロップダウンメニューなど、明確な用途を持つ要素に使用します。

<div class="card">商品情報</div>
<div class="modal">モーダル内容</div>
<div class="dropdown">メニュー項目</div>

状態ベースの命名も良い

要素の状態（アクティブ、無効、エラーなど）を表す名前です。is-やhas-を接頭辞として使うことで、状態を明確に示します。

<div class="is-active">現在選択中</div>
<div class="is-disabled">無効化されています</div>
<div class="has-error">エラーがあります</div>

is-active: 要素がアクティブな状態であることを示します（例: 現在選択されているメニュー項目）。
is-disabled: 要素が無効化されていることを表します（例: 押せないボタン）。
has-error: 入力フォームなどでエラーが発生していることを視覚的に伝えるために使用します。

動作ベースの命名も良い

要素が何をするのか、その動作や意図を表す名前です。ボタンやフォーム、ナビゲーションの操作を示すクラス名が該当します。

<button class="btn-submit">送信する</button>
<form class="form-login">ログインフォーム</form>
<button class="nav-toggle">メニューを開閉</button>

btn-submit: フォームを送信するためのボタン。
form-login: ユーザーがログイン情報を入力するためのフォーム。
nav-toggle: ナビゲーションメニューを開閉するボタン。

class名が長すぎるのはちょっと×

過度に詳細な名前は避け、簡潔にまとめることが大切です。詳細すぎる名前はコードの保守性を損ない、読み手にとって理解しにくくなります。一方で、簡潔な名前は直感的で再利用性が高まります。例えば、btn-redという名前は、色（red）とボタン（btn）を簡潔に示し、red-color-buttonのような冗長な名前を避けることで、要素の役割が一目で分かる理想的な命名になります。

<!-- 悪い例 -->
<div class="red-color-button"></div>

<!-- 良い例 -->
<div class="btn-red"></div>

divだけしかつけられないわけじゃないのよ

div要素にクラス名はつけるもの、、ではありません。まずはクラスを付与する際には、sectionやarticleなどのセマンティックなHTML要素を優先的に使用しましょう。これにより、構造が明確になり、SEOやアクセシビリティにも良い影響を与えます。

<!-- 悪い例 -->
<div class="blog-post">
  <div class="blog-post__header"></div>
  <div class="blog-post__content"></div>
</div>

<!-- 良い例 -->
<article class="blog-post">
  <header class="blog-post__header"></header>
  <section class="blog-post__content"></section>
</article>

この記事では便宜上divを例に挙げていますが、セマンティック要素が適していない場合に限り、divを使用しましょう。

class名には役割があります。曖昧な名前はつけない

wrapperやcontainerといった名前は、明確な役割がある場合には適切ですが、漠然とした用途で使われると混乱の元になります。

wrapperの用途は通常、特定の要素を囲むコンテナとして使われます。例えば、全体のレイアウトを中央に揃える場合や、複数の要素をグループ化するために使用されます。
containerの用途: 中央寄せや、レイアウトの幅を制御するための要素として使われます。

<!-- 良い例 -->
<div class="wrapper">
  <div class="header">Header Content</div>
  <div class="main-content">Main Content</div>
</div>

<!-- この場合、wrapperはレイアウト全体を囲む役割が明確です -->

<!-- 悪い例 -->
<div class="wrapper">
  <p>Unclear usage</p>
</div>
<!-- 用途が明確でない場合には避けるべきです -->

実践例: HTMLサンプルコード

これまで解説したルールを活用し、wrapperやcontainerを含む実践的なHTML/CSSサンプルコードを示します。またBEMの記法も採用しています。BEMはコード下に解説があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CAFÉ AROMA</title>
</head>
<body>
  <div class="wrapper">
    <header class="header container">
      <div class="header__logo">CAFÉ AROMA</div>
      <nav class="header__nav">
        <ul class="nav-list">
          <li class="nav-item"><a href="#menu" class="nav-link">メニュー</a></li>
          <li class="nav-item"><a href="#about" class="nav-link">店舗情報</a></li>
          <li class="nav-item"><a href="#contact" class="nav-link">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>

    <main class="main container">
      <section class="hero">
        <h1 class="hero__title">CAFÉ AROMAへようこそ</h1>
        <p class="hero__subtitle">心地よい空間で最高のコーヒーをお楽しみください</p>
        <button class="btn btn-primary">メニューを見る</button>
      </section>

      <section class="features">
        <article class="feature">
          <h2 class="feature__title">こだわりのコーヒー</h2>
          <p class="feature__description">世界中から厳選した豆を使用しています。</p>
        </article>
        <article class="feature">
          <h2 class="feature__title">落ち着いた空間</h2>
          <p class="feature__description">リラックスできる雰囲気を大切にしています。</p>
        </article>
      </section>
    </main>

    <footer class="footer container">
      <div class="footer__content">
        <p class="footer__text">© 2024 CAFÉ AROMA. All rights reserved.</p>
        <nav class="footer__nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="#privacy" class="nav-link">プライバシーポリシー</a></li>
            <li class="nav-item"><a href="#terms" class="nav-link">利用規約</a></li>
          </ul>
        </nav>
      </div>
    </footer>
  </div>
</body>
</html>

このサンプルコードでは、BEM（Block Element Modifier）も使っています。BEM（Block Element Modifier）は、CSSクラス命名規則の一つで、読みやすく、メンテナンスしやすいスタイルを書くための方法です。

可読性の向上：BEMのクラス名は、構造と役割が明確です。クラス名を見るだけで、どのブロックに属する要素なのか、どのような役割を持っているのかがわかります。例: header__logo は、headerブロック内の logoエレメントであることを示しています。
衝突の回避：クラス名が一意に設計されているため、他のスタイルと競合しにくくなります。例: feature__title と hero__title は異なるブロックに属しているため、スタイルが衝突しません。
保守性の向上：BEMを使うことで、変更箇所が限定的になり、影響範囲を最小限に抑えることができます。例: footer__textのスタイルを変更しても、他のブロックに影響を与えません。

BEMの適用方法

Block（ブロック）

独立した再利用可能なコンポーネントを表します。
例: header, hero, footer など。

Element（エレメント）

ブロックの中に含まれる構成要素を表します。
__（ダブルアンダースコア）でブロック名とエレメント名を繋げます。
- 例: header__logo（headerブロック内のlogo要素）

Modifier（モディファイア）

ブロックやエレメントの外観や状態を示します。
--（ダブルハイフン）でブロック名またはエレメント名に繋げます。
- 例: btn--primary（主要なボタンスタイル）
- 例: hero__title--large（大きいサイズのヒーロータイトル）

サンプルコード補足：ロゴが`<div>`になっている理由

上記のサンプルコードでは、ロゴ部分がdiv要素になっているので、その質問をいただきましたので解説を追記しておきます。

ロゴが`<div>`になっている理由

ロゴは見た目だけの装飾要素であり、通常リンク（<a>）や見出し（<h1>）などのセマンティックな要素を含む場合に初めてそれらのタグを使います。
- 例えば、リンク付きのロゴにする場合は、<a>を使用します。
- このサンプルでは、<div>として単純なコンテナとして役割を持たせています。

<div class="header__logo">
  <a href="/">CAFÉ AROMA</a>
</div>

メインコンテンツ内の`<h1>`について

ページ全体で最も重要な見出しが<h1>であるべきです。このサンプルコードでは、カフェサイトのメインメッセージ（ヒーローセクションのタイトル）を<h1>に指定しています。
一方、ロゴ部分を<h1>とする場合もあります。これは、ページ全体でロゴが最も重要で、SEO上のタイトルに該当する場合です。

<header class="header container">
  <h1 class="header__logo">CAFÉ AROMA</h1>
  <nav class="header__nav">
    <ul class="nav-list">
      <li class="nav-item"><a href="#menu" class="nav-link">メニュー</a></li>
    </ul>
  </nav>
</header>