🚀 プログラミング学習

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

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

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

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

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

ボックスモデルとは？

HTMLのすべての要素は外側から順に4つの層でできています。

層役割
contentテキストや画像などの実際の内容
paddingcontent と border の間の余白
border枠線
margin要素の外側の余白。隣の要素との距離

幅と高さ：width / height

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

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

デフォルトでは 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 で解決

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

* {
  box-sizing: border-box;
}

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

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

💻 やってみよう！

<!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>
* {
  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）を開くと、要素を選択したときにボックスモデルの図が表示されます。実際の数値を確認しながら学ぶと理解が深まります！

📌 まとめ

🚀 次のレッスンへ

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

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