CSSボックスモデル

ボックスモデルはCSSレイアウトの基礎です。CSSの世界では、すべてのHTML要素はコンテンツエリア、パディング、ボーダー、マージンで構成される長方形の「ボックス」として扱われます。

ボックスモデルプロパティ早見表

プロパティ	よく使う値	用途
`width`	`300px`、`50%`、`auto`	コンテンツエリアの幅
`height`	`200px`、`auto`	コンテンツエリアの高さ
`padding`	`20px`、`10px 20px`、`10px 20px 15px 5px`	内側の余白（コンテンツからボーダーまで）
`border`	`2px solid #333`	ボーダー（幅 + スタイル + 色）
`margin`	`10px`、`20px auto`、`0 auto`	外側の余白（要素から他の要素まで）
`box-sizing`	`content-box`（デフォルト）、`border-box`	幅/高さの計算範囲

ボックスモデルの4つの層

内側から外側へ：

┌─────────────────────────────────────┐  ← マージン
│  ┌───────────────────────────────┐  │  ← ボーダー
│  │  ┌─────────────────────────┐  │  │  ← パディング
│  │  │                         │  │  │
│  │  │     コンテンツエリア     │  │  │
│  │  │                         │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

1. コンテンツエリア

テキストや画像など、実際のコンテンツが存在するエリアです。幅と高さはwidthとheightプロパティで制御します。

2. パディング

コンテンツエリアとボーダーの間のスペースで、コンテンツとボーダーの間に余白を作成するために使用します。

サンプル

HTML

<style>
.box {
  padding: 20px;  /* 上下左右すべて20px */
  background: #fce4ec;
  border: 2px solid #e91e63;
}
</style>
<div class="box">このボックス要素にはパディングがあり、コンテンツとボーダーの間に20pxのスペースが作成されています</div>

▶ 試してみよう

3. ボーダー

パディングとコンテンツエリアを包み込むボーダーラインです。

サンプル

HTML

<style>
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">このボックス要素にはパディングの外側を包み込むボーダーがあります</div>

▶ 試してみよう

4. マージン

ボーダーと他の要素の間のスペースで、要素間の距離を制御するために使用します。

サンプル

HTML

<style>
.box {
  margin: 10px;  /* 上下左右すべて10px */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">ボックス1 - マージン10px</div>
<div class="box">ボックス2 - ボックス1から20pxの間隔</div>
<div class="box">ボックス3 - ボックス2から20pxの間隔</div>

▶ 試してみよう

💡 注意： ブロックレベル要素の上下のマージンは「折りたたみ」（加算ではなく最大値を採用）します。左右のマージンは折りたたみません。

実際の要素サイズ

これは最も混乱しやすい部分です——要素の幅と高さはコンテンツエリアの寸法とは等しくありません。

デフォルト（box-sizing: content-box）では：

要素の合計幅 = width + padding-left + padding-right + border-left + border-right
要素の合計高さ = height + padding-top + padding-bottom + border-top + border-bottom

例えば：

サンプル

HTML

<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  background: #e3f2fd;
  text-align: center;
  line-height: 1.5;
}
</style>
<div class="box">
  コンテンツエリア 200×100px<br>
  実際のレンダリング 244×144px
</div>

▶ 試してみよう

このボックスの実際のレンダリングサイズは：

合計幅 = 200 + 20×2 + 2×2 = 244px
合計高さ = 100 + 20×2 + 2×2 = 144px

このボックスが200×100だと思っていたら間違いです！多くの初心者がここでつまずきます。

box-sizingプロパティ

「実際のサイズが設定より大きい」問題を解決するために、CSS3でbox-sizingプロパティが導入されました。

content-box（デフォルト）

widthとheightはコンテンツエリアのみを含み、パディングとボーダーは含まれません。これがデフォルトであり、「罠」の原因です。

border-box

widthとheightはコンテンツ + パディング + ボーダーを含み、ボーダーとパディングが要素を「拡張」しません：

サンプル：content-boxとborder-boxの比較

HTML

<style>
.container {
  display: flex;
  justify-content: space-around;
}
.box {
  width: 300px;
  height: 200px;
  border: 10px solid indianred;
}
.item {
  width: 100%;
  background: rgba(49, 115, 187, 0.3);
  border: solid #5B6DCD 10px;
  padding: 15px;
}
.s1 { box-sizing: content-box; }
.s2 { box-sizing: border-box; }
</style>
<div class="container">
  <div class="box">
    <h3>content-box（デフォルト）</h3>
    <div class="item s1">width: 100% + パディング + ボーダー = 親要素からはみ出す</div>
  </div>
  <div class="box">
    <h3>border-box</h3>
    <div class="item s2">width: 100%はパディング + ボーダーを含む = 完璧に収まる</div>
  </div>
</div>

▶ 試してみよう

💡 比較： content-boxモードでは子要素が親要素からはみ出し、border-boxモードでは子要素が完璧に収まります。これが、モダンプロジェクトでbox-sizing: border-boxをグローバルに設定することをお勧めする理由です。

グローバルborder-box設定

多くのプロジェクトでは、リセットでこれをグローバルに設定します：

サンプル

HTML

<style>
*, *::before, *::after {
  box-sizing: border-box;
}
</style>
<div class="box-demo">デモボックス</div>

▶ 試してみよう

ボックスモデルのデバッグ

ブラウザの開発者ツールを使用して、ボックスモデルを視覚的に検査します：

💡 デバッグヒント： F12を開発者ツールを開き、「要素」パネルの「計算済み」タブで、各要素のコンテンツ、パディング、ボーダー、マージンを視覚的に確認できます——これはレイアウトの問題を診断する最速の方法です。

ページ上の要素を右クリックし、「検証」を選択
「要素」パネルで要素を選択
「計算済み」または「レイアウト」パネルに切り替え
コンテンツ、パディング、ボーダー、マージンの値を示すボックスモデル図が表示されます

要素タイプによるボックスモデルの違い

ブロックレベル要素: デフォルトの幅は親コンテナの100%；高さはコンテンツで決定
インライン要素: widthとheightを受け付けない；パディング/マージンは水平方向にのみ有効
インラインブロック要素: width/heightを設定可能だが、行全体を占有しない

❓ よくある質問

Q content-boxとborder-box、どちらを使うべきですか？

A ほとんどのプロジェクトでは`border-box`を選択します。border-boxでは、パディングとボーダーが要素のサイズを拡張しないため、レイアウト計算がより直感的になります。多くのフレームワーク（Bootstrap、Tailwind）はborder-boxをグローバルに設定します。特別なニーズがない限り、デフォルトのcontent-boxは使用しないでください。

Q ブラウザでボックスモデルをどうやって確認しますか？

A F12を開発者ツールを開き、「要素」パネルで要素を選択すると、右側の「計算済み」または「スタイル」パネルにボックスモデルの4層構造（コンテンツ/パディング/ボーダー/マージン）が表示されます。これはレイアウトの問題を診断する最速の方法です——癖にすることを強くお勧めします。

Q マージンとパディングはどちらも余白を作成します——いつどちらを使うべきですか？

A 1つの原則を覚えておいてください：背景色がこのエリアをカバーすべきですか？パディングでは背景がカバーし、マージンではカバーしません。簡単に言うと、要素内の余白にはパディングを、要素間の余白にはマージンを使用します。

📖 まとめ

ボックスモデルはCSSの最も基本的で重要な概念です
コンテンツ、パディング、ボーダー、マージンの4層構造と、box-sizingが寸法計算に与える影響を理解することは、信頼できるレイアウトを書くための前提条件です
プロジェクトの開始時にbox-sizing: border-boxをグローバルデフォルトとして設定すると、寸法計算の手間が大幅に省けます

📝 演習

基本

200×200のボックスを作成し、パディング30px、ボーダー5px solidを設定してください。ブラウザの開発者ツールで実際のレンダリング寸法を確認し、ボックスモデルの公式を検証してください。
上記のボックスをコピーし、box-sizing: border-boxを追加して、実際のサイズの変更を観察し、前の演習と比較してください。

中級

2つの並列ボックスを含むページを作成し、マージンを調整して「マージン折りたたみ」現象（ブロックレベル要素の上下のマージンは加算ではなく最大値を採用）を観察してください。
border-boxを使用して「各50%幅で間に20pxのギャップがある2カラムレイアウト」を作成してください。

チャレンジ

以下のカードコンポーネントを作成してください：
- 固定幅300px
- パディング20px
- ボーダー1px solid #ddd
- border-radius 8px
- border-boxを使用して合計幅が常に300pxであることを確認
ボックスモデルの計算を使用して、入力フィールドとボタンを完璧に揃えたフォームレイアウトを作成してください。