CSS学習で、
ほぼすべての人が一度はここで止まります。
・余白を指定したのに思った位置にならない
・widthを指定したのに要素がはみ出す
・paddingやmarginの違いが分からない
これらの原因は、
ボックスモデルの理解不足です。
この記事では、
CSSの土台中の土台である
ボックスモデルを図がなくても理解できるレベル
まで整理します。
この記事で学べること
・ボックスモデルとは何か
・content / padding / border / margin の役割
・widthと高さの考え方
・よくあるレイアウト崩れの原因
ボックスモデルとは何か
CSSでは、
すべての要素は「四角い箱（ボックス）」として扱われます。
文字でも画像でも、
HTML上の要素はすべて
目に見えない箱を持っています。
この箱の構造を定義したものが、
ボックスモデルです。
ボックスモデルの4つの要素
1つのボックスは、
次の4つで構成されています。
・content（内容）
・padding（内側の余白）
・border（枠線）
・margin（外側の余白）
この順番は非常に重要です。
content（内容）
contentは、
文字や画像そのものが表示される領域です。
width や height を指定した場合、
基本的にはこの content のサイズを指定しています。
padding（内側の余白）
paddingは、
content と border の間の余白です。
・要素の中に余白を作りたい
・文字と枠線を離したい
といった場合に使います。
paddingを増やすと、
要素の「見た目の大きさ」は大きくなります。
border（枠線）
borderは、
要素の枠線です。
・線の太さ
・線の種類
・線の色
を指定できます。
borderも、
要素のサイズに影響します。
margin（外側の余白）
marginは、
要素の外側に作る余白です。
・要素同士の間隔を空けたい
・上下の距離を調整したい
ときに使います。
marginは、
自分自身のサイズではなく
周囲との距離を調整します。
width指定で混乱する理由
初心者が最も混乱するのが、
次の点です。
「widthを指定したのに、
思ったより大きくなる」
これは、
widthがcontentだけを指している
ことが原因です。
見た目のサイズは合計で決まる
要素の見た目の横幅は、
次の合計になります。
・content
・padding（左右）
・border（左右）
marginは含まれませんが、
周囲との距離として影響します。
この合計を意識しないと、
レイアウトは必ず崩れます。
box-sizingという考え方
この混乱を解消するために使われるのが、
box-sizing というプロパティです。
box-sizingを使うことで、
widthの考え方を変更できます。
box-sizing: border-box の考え方
この指定を使うと、
・width に padding と border を含める
という扱いになります。
現在のWeb制作では、
border-box を使うのがほぼ標準です。
なぜborder-boxがよく使われるのか
理由はシンプルです。
・指定した幅からはみ出しにくい
・レイアウト計算が直感的
・レスポンシブ対応が楽
そのため、
最初から全要素に適用する設計も
よく使われます。
marginとpaddingの使い分け
ここも重要なポイントです。
・padding
要素の内側
クリック範囲を広げたいとき
・margin
要素の外側
要素同士の間隔調整
迷ったら、
「どこに余白が欲しいか」
を言語化して考えましょう。
marginの上下が重なる現象
marginには、
上下方向が重なる特性があります。
これを
「マージンの相殺」
と呼びます。
上下の余白が思った通りにならない場合、
この仕様が原因であることが多いです。
ボックスモデルを理解すると何が変わるか
ここまで理解できると、
・余白調整が怖くなくなる
・レイアウト崩れの原因が分かる
・CSSを感覚で書かなくなる
CSSが
「試行錯誤」から「設計」
に変わります。
開発者ツールとセットで確認する
ボックスモデルは、
ブラウザの開発者ツールで
視覚的に確認できます。
・どこがcontentか
・どこにpaddingがあるか
・marginはどれくらいか
困ったら必ず確認しましょう。
初心者がよくやる間違い
よくあるミスです。
・marginとpaddingを適当に使う
・widthだけ見て全体サイズを考えない
・box-sizingを理解していない
これらは、
ボックスモデル理解で確実に解消できます。
まとめ
ボックスモデルは、
CSSレイアウトの基礎中の基礎です。
・すべての要素は箱
・content / padding / border / margin
・見た目サイズは合計で決まる
ここを理解できれば、
CSSは一気に扱いやすくなります。
次は、
要素の配置を制御するための基本プロパティ
に進みます。
次に読むべき記事
▶ 次の記事
4-5 レイアウトの基本（display / position）
▶ 関連記事
4-3 CSSセレクタの基本（class / id / 要素）
コメント