CSSでデザインをする上で、
初心者が 必ずつまずくポイント が「ボックスモデル」です。
実は、Webページに表示される全ての要素は
四角い箱（ボックス） として扱われています。
そのため、レイアウトを理解するには
この「ボックスモデル」を避けて通れません。
この記事では、
- ボックスモデルの仕組み
- margin と padding の違い
- border・width・height の意味
- 実際のコード例
- よくあるレイアウトの悩み
これらを初心者向けに丁寧に解説します。
ボックスモデルとは？
HTML 要素はすべて 四角い箱（ボックス） として扱われます。
その箱は以下の4層からできています👇
4つの層の意味
| 層 | 説明 |
|---|---|
| content | 文章や画像などの“中身” |
| padding | 内容と枠線の間の余白（内側） |
| border | 枠線 |
| margin | 要素の外側の余白（他の要素との距離） |
padding（内側の余白）
.box {
padding: 20px;
}- 中身（テキスト）を“内側”から押し広げる
- ボックスが大きく見えやすくなる
- 背景色の範囲も広がる
よく使う例
.card {
background-color: #f5f5f5;
padding: 20px;
}margin（外側の余白）
.box {
margin: 20px;
}- 要素と要素の間の距離を作る
- 背景色には含まれない
- レイアウト調整に欠かせない
よく使う例
.section {
margin-bottom: 40px;
}border（枠線）
.box {
border: 1px solid #ccc;
}border は3つの要素で構成されます。
- 太さ（例：1px）
- 種類（例：solid）
- 色（例：#ccc）
例：
border: 2px dashed red;width と height（幅と高さ）
.box {
width: 300px;
height: 200px;
}ただし、注意点があります。
✔ width + padding + border が実際の総幅になる
例：
.box {
width: 300px;
padding: 20px;
border: 5px solid #000;
}実際の幅は…
300px（width）
+ 20px × 2（左右padding）
+ 5px × 2（左右border）
= 合計 350px「指定したwidthより大きくなってしまう！」
と初心者がつまずくポイントです。
解決策：box-sizing: border-box; を使おう
ほぼ全てのプロジェクト でこれを使うかも（主観）。
* {
box-sizing: border-box;
}これを指定すると…
- width の中に padding と border を含めてくれる
- 思った通りのサイズになる
- レイアウト崩れが激減する
ほぼ“必須”級
CSSフレームワーク（Bootstrapなど）でも
必ず設定されています。
4方向のmargin / padding
① 全方向まとめて指定
margin: 20px;
padding: 20px;② 上下・左右まとめて指定
margin: 10px 20px;意味：
- 上下：10px
- 左右：20px
③ 4方向すべて指定（上→右→下→左）
margin: 10px 20px 30px 40px;④ 個別指定
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;実際のレイアウト例
① カード風デザイン
.card {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
margin-bottom: 20px;
border-radius: 8px;
}② セクションの余白調整
.section {
padding: 40px 20px;
margin-bottom: 60px;
background-color: #f9f9f9;
}③ 2つのボックスの間隔
.box + .box {
margin-top: 20px;
}よくある初心者ミスと解決法
❌ 「margin が効かない！」
→ 親要素に overflow: hidden; が付いている可能性
overflow: hidden; とは？調べてみましょう！
❌ 「上下の margin がくっついてしまう」
→ margin の“相殺（collapse）”
→ 解決法：padding を使う or overflow: auto を付ける
❌ 「width を指定したのにサイズが変わる」
→ border と padding を忘れている
→ 解決法：box-sizing: border-box;
この記事のまとめ
- 全ての要素は“箱”でできている
- padding は内側の余白
- margin は外側の余白
- border は枠線
box-sizing: border-box;はほぼ必須- 4方向の指定方法を覚えると自由度が大きく上がる
ボックスモデルを理解すると、
CSSのレイアウトが“思い通りに”できるようになります。
コメント