CSS コース
✓ ✓ ✓ 4 5 6
4 STEP 4 / 6

レッスン4：ボックスモデルを理解しよう

⏱ 約25分 やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

  • ボックスモデルの4層（content・padding・border・margin）を説明できます。
  • widthとheightで要素のサイズを指定できます。
  • box-sizing: border-boxの意味と使い方がわかります。

📖 前回の復習（レッスン3）

  • background-color で背景色、background-image で背景画像を設定する
  • border で枠線の太さ・種類・色を指定する
  • border-radius で角を丸くできる

📖 導入 — なぜレイアウトがズレるの？

CSSを書いていると「幅を300pxにしたのに、なぜかはみ出す…」という経験をすることがあります。その原因のほとんどが ボックスモデル の仕組みを知らないことです。

ボックスモデルを理解すると、レイアウトのズレが一気に解決できます！このレッスンはCSS学習の中でも特に重要なので、しっかり理解しましょう。

開発者ツール（F12）を使いながら読み進めると、より理解が深まります。

📝 ボックスモデルの仕組み

📖 ボックスモデルとは：HTMLの要素はすべて「箱（ボックス）」として扱われるという考え方。箱の内容・padding（内側の余白）・border（枠線）・margin（外側の余白）の4層で構成される。

ボックスモデルとは？

HTMLのすべての要素は外側から順に4つの層でできています。この構造を理解することが、CSSレイアウトの基本です。

層役割
contentテキストや画像などの実際の内容
paddingcontent と border の間の余白
border枠線
margin要素の外側の余白。隣の要素との距離
CSSボックスモデルの図解 margin border padding content
🎨 4層を色で覚えよう:
■ content（青）: 中身のサイズ（テキストや画像）
■ padding（緑）: 内側の余白（中身と枠線の間）
■ border（オレンジ）: 枠線そのもの
■ margin（赤）: 外側の余白（隣の要素との距離）

開発者ツール（F12）でも、この4層が色分けで表示されます！

幅と高さ： /

width で横幅、height で高さを指定します。単位は px（ピクセル）が基本です。1px = 画面上の1ドットです。

div {
  width: 300px;
  height: 200px;
}

▶ プレビュー

💡 height は指定しないことが多い:
高さは中身の量に応じて自動で決まるため、height を指定しないのが一般的です。固定すると中身がはみ出すことがあります。width だけ指定して、高さは自動に任せましょう。

ボックスモデルの落とし穴

デフォルトでは width は content の幅だけ を指します。padding や border を追加すると、要素全体の幅はその分だけ広がってしまいます。これが「幅を指定したのにはみ出す」原因です。

/* width: 300px のつもりが… */
div {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
/* 実際の幅 = 300 + 20×2 + 2×2 = 344px になってしまう！ */

▶ プレビュー

で解決

box-sizing: border-box を指定すると、width が padding と border を含んだ幅全体を指すようになります。実際の現場ではすべての要素にまとめて適用するのが一般的です。これを書くだけで幅の計算ミスがなくなります。

📐 数値で比較してみよう:

width: 200px; padding: 20px; border: 5px; の場合:

content-box（デフォルト）:
実際の幅 = 200 + 20×2 + 5×2 = 250px（はみ出す！）

border-box:
実際の幅 = 200px（padding と border が内側に収まる）

💡 border-box を使えば計算が楽！ width に指定した値がそのまま見た目の幅になります。 
* {
  box-sizing: border-box;
}

div {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  /* 全体の幅 = ちょうど 300px ✅ */
}

▶ プレビュー

*（アスタリスク）は「すべての要素」を意味するセレクタです。

margin / padding のショートハンド記法

margin と padding は、1〜4つの値で上下左右をまとめて指定できます。これを「ショートハンド記法」と呼びます。

毎回 margin-top, margin-right... と書くより短く書けます。

/* 4値: 上 右 下 左（時計回り） */
margin: 10px 20px 30px 40px;

/* 2値: 上下 左右 */
padding: 16px 24px;

/* 1値: 上下左右すべて同じ */
margin: 20px;

/* 左右を auto にすると中央寄せ */
margin: 0 auto;

💡 margin: 0 auto は「上下0、左右は自動で均等に」= 中央寄せの定番テクニックです。

💡 padding vs margin の使い分け:
・padding: 要素の中身と枠線の間の余白。背景色が適用される領域。
・margin: 要素の外側の余白。隣の要素との距離を調整する。

迷ったら「箱の中を広げたい → padding」「箱と箱の間を空けたい → margin」と覚えましょう。
⚠️ margin の相殺（collapse）に注意:
上下に並んだ要素の margin は、大きい方だけが適用されます（重なる）。例えば上の要素に margin-bottom: 20px、下の要素に margin-top: 30px があると、間の余白は 50px ではなく 30px になります。これを「margin の相殺」と呼びます。
💡 % と max-width（予告）:
width: 80% のように % で指定すると、親要素に対する割合になります。max-width を使うと「最大幅」を制限できます。レスポンシブデザイン（レッスン6）で詳しく学びます。

💻 やってみよう！

VS Codeで my-practice フォルダの index.html と style.css を開き、以下のように書き換えてください。書き終えたら index.html をダブルクリックしてブラウザで確認しましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ボックスモデルの練習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card">
      <h2>プロフィール</h2>
      <p>名前：【名前】</p>
      <p>趣味：ゲーム</p>
    </div>
  </body>
</html>
style.css
* {
  box-sizing: border-box;
}

body {
  background-color: #f0f0f0;
  margin: 0;
  padding: 40px;
}

.card {
  width: 320px;
  padding: 24px;
  border: 2px solid #cccccc;
  border-radius: 8px;
  background-color: #ffffff;
  margin: 0 auto;
}

h2 {
  margin: 0 0 16px 0;
  color: #333333;
}

p {
  margin: 4px 0;
  color: #555555;
}

▶ プレビュー

💡 ブラウザの開発者ツール（F12）を開くと、要素を選択したときにボックスモデルの図が表示されます。実際の数値を確認しながら学ぶと理解が深まります！

実験してみよう:

  • .card の padding: 24px を padding: 8px に変えるとどうなる？
  • margin: 0 auto を margin: 0 に変えるとどうなる？
  • width: 320px を width: 100% に変えるとどうなる？

値を変えて保存→ブラウザ更新を繰り返すと、ボックスモデルの感覚が身につきます。

⚠️ よくあるミス

  • width を指定したのにはみ出す：デフォルトでは width は content の幅だけを指します。padding や border を足すと、指定した幅より大きくなります。box-sizing: border-box を付けると解決します。
  • box-sizing: border-box を書き忘れる：CSSの先頭に * { box-sizing: border-box; } を書く習慣をつけましょう。これがないと幅の計算がずれやすくなります。
  • margin と padding の違いがわからなくなる：ブラウザの開発者ツール（F12）でボックスモデルの図を見ると、どこが margin でどこが padding かひと目でわかります。迷ったら開発者ツールで確認しましょう。
  • margin: 0 auto が効かない：中央寄せには width の指定が必要です。幅が決まっていない要素には margin: 0 auto は効きません。
  • 上下の margin が思ったより狭い：margin の相殺が起きている可能性があります。開発者ツールで実際の margin を確認しましょう。

📌 まとめ

  • ✅ すべてのHTML要素は content → padding → border → margin の4層のボックスでできている
  • ✅ デフォルトでは width は content の幅のみを指す
  • ✅ box-sizing: border-box を使うと width に padding と border が含まれ、サイズ管理が楽になる
  • ✅ * { box-sizing: border-box; } をCSSの先頭に書くのが現場での定番
  • ✅ margin は外側の余白、padding は内側の余白
  • ✅ ショートハンド: 上右下左（時計回り）で指定できる

📖 もっと詳しく学ぶ

CSSとは？初心者向けにわかりやすく解説【中高生向け】

🚀 次のレッスンへ

次のレッスンでは、Flexboxを使って要素を横並びにする方法を学びます！

🔍 もっと調べてみよう：「CSS ボックスモデル padding margin」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！

✅ このレッスンが終わったら

ドリルで知識を確認してから次に進むと、理解が定着しやすいよ！

次のレッスン: Flexbox → 📝 このレッスンの問題を解く →

このレッスンは役に立ちましたか？

目次
    他の質問を見る → 詰まった？質問する

    📖 このレッスンの用語

    ⚠️ よくあるエラー

    📝 関連ブログ記事

    🏋️ 練習問題

    このレッスンの練習問題に挑戦（Q16〜Q25）→

    📋 チートシート

    チートシートを見る →
    ← CSS コース一覧に戻る
    𝕏 シェア LINE シェア
    次のレッスン: Flexbox →