目次
なぜ命名規則が大切なのか
Webデザインやコーディングをしていると、
「wrapperとcontainerの違いって？」「innerって何のため？」と迷うことがよくあります。
思いつきでクラス名を付けていくと、後で見返したときに「これは何の要素？」となりがち。
しかし、命名に一貫したルールを持たせておくと、自分にも他人にも読みやすいHTMLが作れます。
命名規則の目的は「役割を明確に伝える」こと。
つまり、見た目ではなく「何をしているか」で名前を付けるのがポイントです。
命名の基本ルール
| 規則 | 内容 | 例 |
|---|---|---|
| 小文字を使う | クラス名やID名は基本的に小文字で統一。 | header, main, footer |
| 単語の区切りはハイフン（-）で | スネークケース（_）よりケバブケース（-）が主流。 | main-visual, page-title |
| 意味のある単語にする | デザイン的な表現（red, big）より「役割」を表す。 | hero, cta-button, nav-list |
| 数字は避ける | box1, box2のような連番はNG。意味が伝わらない。 | ❌ box1 → ✅ feature-item |
| 略語を使いすぎない | btnやnavなど一般的な略語のみ使用。 | ✅ btn, nav, ❌ cnt, itm |
outer → wrapper → container → inner → content の構造を理解しよう
HTMLのレイアウト構造には、外から内へ包み込むように設計する考え方があります。
この順番で命名を整理すると、どのクラスが何を管理しているのかが明確になります。
ここは諸説ありますが、自分はこの構造で作っています。
指示書などを作成し手渡す際は、指示書の隅の方にでも自分的構造図をメモしておくとコーダーさんが迷わずにすみます。
| 層 | 意味・目的 | 主な役割 |
|---|---|---|
| outer | 外側の層 | ページ全体・背景・セクション間の余白を管理 |
| wrapper | 包む層 | ひとつのセクション全体をまとめる |
| container | セクションの箱 | 幅・中央寄せ・レイアウト幅を調整 |
| inner | 内側の層 | 内側余白（padding）を与えて整える |
| content | 中身 | テキスト・画像など実際の情報を配置する |
🟣 outer（外側の層）
ページやセクション全体を包む“最も外側の層”。
背景色やセクション間の余白（margin）を担当します。
<section class="feature-outer">
...
</section>
- 背景・セクションの区切りを担当
- 上下の余白（margin）を調整
- 見た目の「ブロックの範囲」を作る
💡イメージ：「背景のキャンバス」
🔵 wrapper（全体を包む層）
特定のセクションを1つのまとまりとして包むための層。
レイアウト構造を整えるために使われます。
<div class="feature-wrapper">
...
</div>
- セクション内の主要要素をまとめる
- FlexやGridなどでレイアウト制御することも多い
💡イメージ：「章のようにまとまった一塊」
🟢 container（セクションの箱）
セクション内のコンテンツを中央寄せして最大幅を制御する枠です。
多くのサイトでは、max-width: 1200px; margin: auto;などの設定を持ちます。
<div class="feature-container">
...
</div>
- 中央寄せと幅制御
- ページ全体の整列を担う
- 複数ページで共通利用されやすい
💡イメージ：「見える範囲の中央に収める枠」
🟡 inner（内側の層）
コンテナの内側で、テキストや画像を左右paddingで整える層。
要素が端にくっつかず、読みやすく見えるようにします。
<div class="feature-inner">
...
</div>
- paddingを与えて“ゆとり”を作る
- 背景色やボーダーの内側を調整
- 文章や画像の呼吸スペースを確保
💡イメージ：「部屋の中で家具を並べるスペース」
🟠 content（中身）
実際のテキストや画像、ボタンなど、情報の中核となる部分。
それ以外のクラスが“箱”を作るのに対して、contentは「中身そのもの」です。
<div class="feature-content">
<h2 class="feature-title">サービスの特徴</h2>
<p class="feature-text">ここに説明文が入ります。</p>
</div>
💡イメージ：「箱の中の“商品”」
全体構造イメージ
<section class="feature-outer">
<div class="feature-wrapper">
<div class="feature-container">
<div class="feature-inner">
<div class="feature-content">
<h2 class="feature-title">サービスの特徴</h2>
<p class="feature-text">説明文がここに入ります。</p>
</div>
</div>
</div>
</div>
</section>
このように、outer → wrapper → container → inner → contentの順で包むと、「レイアウト（構造）」と「コンテンツ（中身）」をきれいに分離できます。
よく使うクラス名の一覧表
| 役割 | クラス名 | 意味・用途 |
|---|---|---|
| 外枠 | outer | ページやセクションの外側全体を包む |
| 包む層 | wrapper | 1つのセクションをまとめる |
| 中央寄せ | container | セクションの横幅・レイアウトを制御 |
| 内側調整 | inner | paddingなど内側余白の管理 |
| 中身 | content | テキストや画像など実データ部分 |
| ボタン | btn, btn-primary | ボタン要素に使用 |
| リスト | list, item | 複数要素の集合 |
| 画像ブロック | img-wrap, thumbnail | 画像をまとめる |
| 装飾状態 | is-active, is-hidden | 表示・非表示や状態を表す |
BEM命名規則との相性も抜群
この構造はBEM（Block Element Modifier）にも適しています。
基本は、Block__（アンダーバー２つ）Element–（ハイフン２つ）Modifierという感じで書きます。
<div class="feature feature--highlight">
<div class="feature__container">
<div class="feature__inner">
<div class="feature__content">
<h2 class="feature__title">タイトル</h2>
</div>
</div>
</div>
</div>
feature：ブロック（Block）feature__content：要素（Element）feature--highlight：変化（Modifier）
命名で迷わない3つのコツ
- 外から内へ包む構造で考える
- 各層の役割（margin・width・padding・text）を明確に分ける
- すべてのページで同じパターンを再利用する
📝 まとめ
命名規則は「未来の自分へのメッセージ」。
outer → wrapper → container → inner → content の順序を理解しておけば、どんなサイトでも見通しの良いHTMLが書けます。
最後になりますが、class名は“デザインの飾り”ではなく、“構造の意味”を伝えるためのものです。
今受講していますが、とてもためになる講義がいっぱいです。
最新の情報を入れつつ、基本をしっかり学ぼうって感じですね。
ただ、学校のように講義→復習というスタイルではなく、予習→講義を聴く→復習というスタイルに慣れないとしんどいかもしれません。
Webコーダーのレベルアップには最高に適しています。
デザインの基礎の講義もありますがサラッとって感じなので、別途デザイン講座を受ける感じですかね。
デザインの方は角田綾佳さんが講師でした。
株式会社キテレツのチーフデザイナー、スピカ先生ですね。
もうそれだけでテンションあがってしまいましたよ、おじさんは(笑)
