ボックスモデル
初級読み方：ボックスモデル｜英語：Box Model
HTML要素を content → padding → border → margin の4層の箱として扱う考え方だよ。
やさしい説明
ボックスモデルとは、HTML のすべての要素を「箱（ボックス）」として扱う考え方です。
ウェブページ上のすべての要素は、目に見えない箱に入っています。この箱は、外側から順に4つの層でできています。
- margin（マージン） — 箱の外側の余白。隣の箱との距離
- border（ボーダー） — 箱の枠線
- padding（パディング） — 箱の内側の余白。内容と枠線の間
- content（コンテンツ） — 実際の内容（文字や画像）
プレゼントの箱に例えると、content が「中身」、padding が「緩衝材」、border が「箱の壁」、margin が「箱と箱の間のスペース」です。
図解：ボックスモデルの4層
具体例・使い方
.card {
margin: 16px; /* 外側の余白 */
border: 2px solid #ccc; /* 枠線 */
padding: 24px; /* 内側の余白 */
width: 300px; /* 内容の幅 */
}ブラウザの開発者ツール（F12）で要素を選択すると、ボックスモデルの図がビジュアルで表示されます。margin・border・padding・content それぞれの値を確認できます。
よくある疑問
Q: margin と padding の違いがわからない
A: margin は箱の「外側」、padding は箱の「内側」の余白です。border を境界線として、外が margin、内が padding です。「カードの内側に余白がほしい → padding」「カード同士の間隔を空けたい → margin」と覚えましょう。
Q: width を 300px にしたのに実際の幅が大きくなるのはなぜ？
A: デフォルトでは width は content の幅だけを指します。padding と border を足した分だけ実際の幅が広がります。box-sizing: border-box を指定すると width に padding と border が含まれ、ぴったり指定サイズになります。
いつ使う？
要素のサイズや余白を調整するときに常に意識します。「カードの内側に余白がほしい」→ padding、「カード同士の間隔を空けたい」→ margin。開発者ツール（F12）でボックスモデルを確認する習慣をつけましょう。
間違いやすいポイント
❌ width を指定したのに想定より大きくなる
デフォルトの box-sizing: content-box では width が content のみを指すため、padding と border を加えた分だけ実際の幅が大きくなります。
/* ❌ 実際の幅 = 300 + 20×2 + 2×2 = 344px になる */
.box { width: 300px; padding: 20px; border: 2px solid; }
/* ✅ box-sizing: border-box でぴったり300pxにする */
*, *::before, *::after {
box-sizing: border-box; /* 全要素に適用するのが定番 */
}よくある疑問
Q: box-sizing: border-box とは？
A: widthにpaddingとborderを含める設定です。* { box-sizing: border-box; } をCSSの最初に書くのが現在の標準的なやり方です。
Q: ボックスモデルを確認するには？
A: 開発者ツール（F12）で要素を選択すると、右側にボックスモデルの図が表示されます。各層のサイズが一目でわかります。
Q: contentとは？
A: テキストや画像など、要素の中身が表示される領域です。widthやheightで指定するのはこのcontent領域のサイズです（border-box未使用時）。
関連用語
📖 関連レッスン
レッスンを見る →