CSSにおける「箱」の概念

Webデザインを学ぶ上で、避けて通れない最重要概念が「ボックスモデル」です。画面に表示されるすべてのHTML要素（見出し、段落、画像、ボタンなど）は、実はすべて「見えない長方形の箱」の中に収まっています。CSSを使ってレイアウトを作る作業は、いわばこの「箱」のサイズや隙間を調整して、積み木のように組み立てていく作業そのものです。

ボックスを構成する4つの要素

一つの箱は、内側から順に以下の4つの層でできています。この順序と役割を完全に理解することが、脱初心者への第一歩です。

1. Content (コンテンツ)

箱の「中身」そのものです。テキストや画像が表示される領域で、`width`（幅）や `height`（高さ）プロパティで指定されたサイズがここに適用されます。

2. Padding (パディング)

コンテンツと枠線の間の「緩衝材」です。これがないと、テキストが枠線にピタッとくっついてしまい、窮屈で読みづらくなります。「内側の余白」と覚えましょう。背景色を指定すると、このパディング領域まで色が塗られます。

3. Border (ボーダー)

箱の「皮」にあたる境界線です。太さ、色、スタイル（実線、点線など）を指定できます。デバッグ時に `border: 1px solid red;` をつけて箱の範囲を可視化するのは、プロもよくやるテクニックです。

4. Margin (マージン)

箱と箱の間の「隙間」です。「隣の要素とどれくらい離れるか」を指定します。マージンには背景色は塗られず、常に透明です。「外側の余白」と覚えましょう。

レイアウト崩れの元凶とその解決策

初心者が最もハマりやすい罠が、「widthを100%にしたのに、paddingをつけたらはみ出した！」という現象です。

デフォルトのCSS（content-box）では、`width` は「コンテンツの幅」だけを指します。そのため、全体の幅は `width + padding + border` になり、指定したサイズよりも箱が大きくなってしまうのです。

* {
    box-sizing: border-box;
}

まとめ

「paddingは内側、marginは外側」。そして「box-sizing: border-box を使う」。この2点を抑えておけば、CSSレイアウトの9割は怖くありません。箱の構造をイメージしながら、自在にデザインを組めるようになりましょう。