【6日でできるHTML＆CSS入門】ボックスモデル

―すべての要素は“箱”でできている―
　ブラウザは、見出しも段落も画像も 四角いボックス として配置します。このボックスは content → padding → border → margin の4層構造でできており、幅や余白の計算はすべてこのルールに従います。これを ボックスモデル と呼び、レイアウトやパーツデザインを行う際の基礎概念になります。

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

1.1. コンテンツ領域

　要素そのもの（文字列・画像など）が描画されるエリア。width と height で直接指定するのはこの部分です。

1.2. パディング

　コンテンツと境界線の間の内側余白。背景色はここまで塗りつぶされます。設定すると コンテンツサイズはそのぶん縮む 点に注意。

1.3. ボーダー

パディングを囲む線。border: 太さ種類色 で一括指定できます。線幅はコンテンツサイズに含まれません。

1.4. マージン

　ボックス外側の外側余白で、隣り合うボックスとの距離を確保します。同じ方向のマージンがぶつかると 相殺（margin-collapse） が起こり、大きい方の値だけが残ります。

２．実践：ボックスを視覚化してみよう

2.1. サンプルコード

ファイル名： lesson28_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボックスモデル可視化</title>
<style>
  .panel{
    width:260px;               /* content 幅 */
    height:80px;               /* content 高さ */
    padding:16px;              /* 内側余白 */
    border:4px solid #0077b6;  /* 境界線 */
    margin:24px auto;          /* 上下外側余白 */
    background:#e0f4ff;        /* 背景色は padding まで */
    box-sizing:content-box;    /* 計算方法を明示 */
  }
  .sibling{
    width:260px;
    height:40px;
    background:#ffd166;
    margin-top:24px;           /* 上マージンは前要素と相殺 → 24px のまま */
  }
</style>
</head>
<body>
  <h1>Box Model Demo</h1>
  <div class="panel">content 260×80<br>padding 16<br>border 4</div>
  <div class="sibling">別ボックス</div>
</body>
</html>

表示結果

青線＝border、線内の淡い水色＝content＋padding。
panel と sibling の間隔は 24 px（上マージン同士が重なり相殺）。

2.2. ポイント解説

プロパティ	指定値	効果
`padding`	`16px`	ボックス内側に 16 px の余白
`border`	`4px solid #0077b6`	4 px の実線（青）
`margin`	`24px auto`	上下 24 px、左右中央寄せ
`box-sizing`	`content-box`	幅高さ=content のみ（既定値）

使用タグ・属性一覧

タグ	役割
`<div>`	汎用ブロック。ボックスデモ用
`<h1>`	見出し
`<style>`	内部 CSS

プロパティ	用途
`width / height`	content サイズ
`padding`	内側余白
`border`	線種・太さ・色
`margin`	外側余白
`box-sizing`	サイズ計算方式

まとめ

content → padding → border → margin の順に外へ広がる。
padding は背景に含まれる、margin は含まれない。
上下マージンは相殺される場合があるので、レイアウト時は数値設計に注意。

ボックスモデルを理解すれば、余白・線幅・実サイズの計算に迷わずモダンなレイアウトを作成できます。