ボックスモデルとレイアウト

ボックスモデル — content / padding / border / margin

HTMLのすべての要素は目に見えない「箱（ボックス）」として扱われます。この箱の構造を理解することが、CSSレイアウトを自在に操る第一歩です。ボックスモデルを理解しないと、「幅を200pxに設定したのに実際は244pxになった」「要素間のスペースが意図と違う」といった問題に悩まされます。このレッスンでは4層のボックス構造、box-sizing による計算方式の切り替え、そして縦方向のmarginで起きる「margin相殺」を徹底解説します。

---

ボックスモデルの4層構造

CSSボックスモデル：content / padding / border / margin

CSS のボックスモデルは内側から順に以下の4層で構成されます。

┌────────────────────────────────┐  ← margin（外余白）
│  ┌──────────────────────────┐  │  ← border（枠線）
│  │  ┌──────────────────┐   │  │  ← padding（内余白）
│  │  │                  │   │  │
│  │  │    content       │   │  │  ← コンテンツ領域
│  │  │                  │   │  │
│  │  └──────────────────┘   │  │
│  └──────────────────────────┘  │
└────────────────────────────────┘

content（コンテンツ領域）

テキスト・画像・子要素が実際に表示される領域です。width と height プロパティで直接指定する領域です（box-sizing: content-box の場合）。

.box { width: 200px; height: 150px; }

padding（内余白）

コンテンツとボーダーの間のスペースです。背景色はpaddingまで広がります。

/* 全方向同じ値 */
.box { padding: 16px; }

/* 縦 | 横 の2値 */
.box { padding: 12px 24px; }

/* 上 | 右 | 下 | 左 の4値（時計回り） */
.box { padding: 8px 16px 8px 16px; }

/* 個別指定 */
.box { padding-top: 8px; padding-right: 16px; }

border（枠線）

paddingの外側を囲む枠線です。border: 太さ スタイル 色 の順で指定します。

.box { border: 2px solid #e5e7eb; }
.circle { border: 4px solid #2563eb; border-radius: 50%; }

主なborderスタイル: solid（実線）/ dashed（破線）/ dotted（点線）/ none（なし）

margin（外余白）

ボーダーの外側のスペースです。要素と要素の間隔を設定します。auto を使うと中央揃えができます。

.box { margin: 16px; }
.centered { width: 800px; margin: 0 auto; }  /* 左右中央揃え */
.no-margin { margin: 0; }

💡 paddingとmarginの使い分け: コンテンツ内部の余白にはpadding、要素間のスペースにはmarginを使います。背景色はpaddingまで広がりますが、marginには広がりません。この違いが視覚的なデザインの意図と一致します。

---

box-sizing プロパティ

CSSの width と height がどこまでを含む幅かを決めるプロパティです。

content-box（デフォルト）

width / height は contentのみのサイズを指定します。実際の要素サイズは padding と border が加算されます。

.box {
  box-sizing: content-box;  /* デフォルト */
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* 実際の幅: 200 + 20*2 + 2*2 = 244px */
}

border-box（推奨）

width / height に content + padding + border が含まれます。指定した幅がそのまま要素の占める幅になるため、直感的で設計しやすいです。

.box {
  box-sizing: border-box;  /* 推奨 */
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* 実際の幅: 200px（変わらない） */
}

現代の CSS では以下のように全要素に border-box を適用するのが標準的です。

*, *::before, *::after {
  box-sizing: border-box;
}

⚠️ 新規プロジェクトでは必ず border-box をリセットする: content-box のままでは width: 50% の要素が padding によって 50% を超え、意図しない改行やはみ出しが発生します。CSSリセットの冒頭にこの1行を入れることが業界標準です。

---

margin 相殺（Margin Collapsing）

隣接するブロック要素の縦方向（top / bottom）のmarginは、大きい方の値のみが採用されます。これを「margin相殺」または「マージンコラプス」と呼びます。

基本的な相殺の例

<p class="a">段落A</p>
<p class="b">段落B</p>

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* 実際の間隔: max(30, 20) = 30px */

30 + 20 = 50px になると思いがちですが、実際は 30px になります。

相殺が起きる条件

相殺が起きない条件

• ◆横方向（left / right） のmarginは相殺されない
• ◆Flexboxコンテナの子要素 は相殺されない
• ◆Gridコンテナの子要素 も相殺されない
• ◆親要素に overflow: hidden display: flow-root などが設定されている場合も相殺されない

/* 親子間の相殺を防ぐ */
.parent { padding-top: 1px; }  /* わずかなpaddingでOK */
.parent { overflow: hidden; }
.parent { display: flow-root; }  /* 最も意味的に正確 */

💡 Flexboxを使えばmargin相殺を気にしなくて済む: Flexboxのコンテナ内では子要素間のmargin相殺は発生しません。現代のレイアウトではFlexboxやGrid、そして gap プロパティを使うことで、margin相殺による混乱を避けられます。

---

ブロック要素とインライン要素のボックスモデル

要素の display プロパティによってボックスモデルの挙動が変わります。

インライン要素（<span>, <a> など）に width を指定しても効かない理由がここにあります。display: inline-block に変更することで幅・高さを指定できます。

span { display: inline-block; width: 100px; padding: 8px 16px; }

---

DevTools でボックスモデルを確認する

Chrome / Edge の DevTools（F12）では、選択した要素のボックスモデルを視覚的に確認できます。

1. ◆F12 → Elements パネルを開く
2. ◆要素を選択する
3. ◆右側の「Computed」タブを開く
4. ◆上部にボックスモデル図が表示される（margin / border / padding / content のサイズが数値で確認できる）

⚠️ DevToolsで確認しながら開発する: 「なぜかサイズがズレる」「余白が意図と違う」という問題の9割はボックスモデルの計算ミスです。コードを書きながらDevToolsのボックスモデル図を常に確認する習慣が、フロントエンド開発スキルを最速で上げるコツです。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆box-sizingの比較: content-box と border-box の両方で width: 200px; padding: 20px; border: 2px solid black; を設定し、実際にブラウザで表示されるサイズをDevToolsで計測してください。
2. ◆margin相殺の確認: 2つの <p> 要素に異なるmarginを設定し、実際の間隔をDevToolsで確認してください。次に親要素に display: flow-root を追加して相殺が解消されることを確認してください。
3. ◆中央揃えの実装: 幅800pxのコンテナを margin: 0 auto で画面中央に配置し、ウィンドウ幅を変えても中央に保たれることを確認してください。
4. ◆inline-blockの活用: <span> 要素にデフォルト状態で width を設定し効かないことを確認後、display: inline-block に変更して有効になることを確認してください。

📝まとめ

ボックスモデルはcontent・padding・border・marginの4層で構成され、すべてのHTML要素に適用されます。box-sizing: border-box を全要素に適用するのが現代の標準で、これにより width 指定と実際の表示幅が一致します。縦方向の隣接するmarginは相殺が発生し、大きい方だけが採用されます。Flexbox / Grid の子要素では相殺が起きないため、現代的なレイアウト手法の方が予測しやすいです。DevToolsのボックスモデル表示を活用し、常に実際の値を確認しながら開発しましょう。次のレッスンでは Flexbox を使った実践的なレイアウト技法を学びます。