CSS: CSSボックスモデル
最終更新：2026-10-13
ボックスモデルは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 |
幅/高さの計算範囲 |
1. ボックスモデルの4つの層
内側から外側へ：
TEXT
┌────────────────────────────────────┐ ← マージン
│ ┌──────────────────────────────┐ │ ← ボーダー
│ │ ┌─────────────────────────┐ │ │ ← パディング
│ │ │ │ │ │
│ │ │ コンテンツエリア │ │ │
│ │ │ │ │ │
│ │ └────────────────────────┘ │ │
│ └──────────────────────────────┘ │
└────────────────────────────────────┘
(1) コンテンツエリア
テキストや画像など、実際のコンテンツが存在するエリアです。幅と高さはwidthとheightプロパティで制御します。
(2) パディング
コンテンツエリアとボーダーの間のスペースで、コンテンツとボーダーの間に余白を作成するために使用します。
▶ サンプル
▶ 試してみよう(3) ボーダー
パディングとコンテンツエリアを包み込むボーダーラインです。
▶ サンプル
▶ 試してみよう(4) マージン
ボーダーと他の要素の間のスペースで、要素間の距離を制御するために使用します。
▶ サンプル
▶ 試してみよう💡 注意： ブロックレベル要素の上下のマージンは「折りたたみ」（加算ではなく最大値を採用）します。左右のマージンは折りたたみません。
2. 実際の要素サイズ
これは最も混乱しやすい部分です——要素の幅と高さはコンテンツエリアの寸法とは等しくありません。
デフォルト（box-sizing: content-box）では：
TEXT
要素の合計幅 = width + padding-left + padding-right + border-left + border-right
要素の合計高さ = height + padding-top + padding-bottom + border-top + border-bottom
例えば：
▶ サンプル
▶ 試してみようこのボックスの実際のレンダリングサイズは：
- 合計幅 = 200 + 20×2 + 2×2 = 244px
- 合計高さ = 100 + 20×2 + 2×2 = 144px
このボックスが200×100だと思っていたら間違いです！多くの初心者がここでつまずきます。
3. box-sizingプロパティ
「実際のサイズが設定より大きい」問題を解決するために、CSS3でbox-sizingプロパティが導入されました。
(1) content-box（デフォルト）
widthとheightはコンテンツエリアのみを含み、パディングとボーダーは含まれません。これがデフォルトであり、「罠」の原因です。
(2) border-box
widthとheightはコンテンツ + パディング + ボーダーを含み、ボーダーとパディングが要素を「拡張」しません：
▶ サンプル：content-boxとborder-boxの比較
▶ 試してみよう💡 比較： content-boxモードでは子要素が親要素からはみ出し、border-boxモードでは子要素が完璧に収まります。これが、モダンプロジェクトで
box-sizing: border-boxをグローバルに設定することをお勧めする理由です。
(3) グローバルborder-box設定
多くのプロジェクトでは、リセットでこれをグローバルに設定します：
▶ サンプル
▶ 試してみよう4. ボックスモデルのデバッグ
ブラウザの開発者ツールを使用して、ボックスモデルを視覚的に検査します：
💡 デバッグヒント： F12を開発者ツールを開き、「要素」パネルの「計算済み」タブで、各要素のコンテンツ、パディング、ボーダー、マージンを視覚的に確認できます——これはレイアウトの問題を診断する最速の方法です。
- ページ上の要素を右クリックし、「検証」を選択
- 「要素」パネルで要素を選択
- 「計算済み」または「レイアウト」パネルに切り替え
- コンテンツ、パディング、ボーダー、マージンの値を示すボックスモデル図が表示されます
5. 要素タイプによるボックスモデルの違い
- ブロックレベル要素: デフォルトの幅は親コンテナの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であることを確認
- ボックスモデルの計算を使用して、入力フィールドとボタンを完璧に揃えたフォームレイアウトを作成してください。
