もう迷わない！クラス名の命名基本ルール！

Webサイト制作で大変なことの一つ、それはCSSの「クラス命名」です。 私も最初はHTMLの構造を考えるよりもこちらの方に時間がかかっていました。でも、基本的なルールさえ押さえれば、サクサクとクラス命名をすることができます。

この記事では、初心者向けにクラス命名の基本ルールを解説します。

守りたい2つの基本ルール

まずは、これだけは押さえておきたい2つのルールです。

1. クラス名は「英語」で書く クラス名は必ずアルファベットで書きます。例えば、日本語のローマ字（例: hedda-rogo）としてしまうと、非常に読みにくく、ダサいです。

2. 単語同士は「ハイフン（-）」でつなぐ header-logo のように、複数の英単語をつなげる場合はハイフン（-）を使います。

補足 他にも headerLogo（キャメルケース）や header_logo（アンダースコア）といった書き方もありますが、まずは一番シンプルで読みやすいハイフンで統一するのがおすすめです。 （※スペースは使えません）

---

実践例：ヘッダーにクラスをつけてみよう

このルールに沿って、実際のHTMLにクラス名をつけてみます。

元のHTML（クラスなし）

HTML

<header>
    <div>
        <h1>
            <a href="#">ロゴ</a>
        </h1>
        <nav>
            <ul>
                <li>
                    <a href="#">about</a>
                </li>
                <li>
                    <a href="#">services</a>
                </li>
                <li>
                    <a href="#">contact</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

クラスを追加したHTML

HTML

<header class="header">
    <div class="header-inner">
        <h1 class="header-logo">
            <a href="#" class="header-logo-link">ロゴ</a>
        </h1>
        <nav class="header-nav">
            <ul class="header-nav-list">
                <li class="header-nav-item">
                    <a href="#" class="header-nav-link">about</a>
                </li>
                <li class="header-nav-item">
                    <a href="#" class="header-nav-link">services</a>
                </li>
                <li class="header-nav-item">
                    <a href="#" class="header-nav-link">contact</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

---

命名のポイント解説

考え方の解説です。

1. 大枠の要素（<header>）に基準となる名前をつける まず、一番外側の <header> タグに、そのものズバリ header というクラスをつけます。これがこのパーツの「基準」となります。
2. 中の要素には「基準名-〇〇」とつける header の中にあるパーツ（ロゴ、ナビゲーションなど）には、header-logo や header-nav のように、基準となる名前を先頭につけていきます。これを「接頭辞（プレフィックス）」と言ったりします。

こうすることで、**「あ、header-nav は header の一部なんだな」**と、クラス名を見るだけでHTMLの構造が理解しやすくなります。

まとめ

クラス命名は、ルールを決めて一貫性を持たせることが大切です。 まずは「英語で・ハイフンでつなぐ」という基本と、**「基準名-パーツ名」**という考え方をぜひ試してみてください。