【第7回】ボックスモデル基礎｜CSS初心者ノート

📏 ボックスモデルとは？CSSの基本構造を図解で理解しよう

Webページの要素は、すべて「四角い箱」でできています。
その仕組みを理解すると、デザインの整え方がぐっとわかりやすくなります。

構成はこの4つ👇

┌───────────────┐
│ margin（外側の余白） │
│ ┌─────────────────┐
│ │ border（枠線） │
│ │ ┌────────────┐ │
│ │ │ padding（内側の余白）│ │
│ │ │ コンテンツ（文字や画像）│ │
│ │ └────────────┘ │
│ └─────────────────┘
└───────────────┘

💡これは「構造をイメージする図」で、コードではありません。

---

↔️ marginとは？外側の余白を調整するCSSプロパティ

要素の外側にできる余白を調整するのが margin です。
他のボックスとの間をあけたいときに使います。

.box {
  margin: 20px;
}

👉 ボックスのまわりに20pxのすき間ができます。

---

上下左右の余白を個別に指定する方法

指定方法	例	意味
margin-top	10px	上だけ余白
margin-bottom	20px	下だけ余白
margin: 10px 20px;	上下10px・左右20px

💡 単位は「px」「em」「%」など。中央寄せしたいときは margin: 0 auto; が便利です。

---

↕️ paddingとは？内側の余白を作るCSSの基本

ボックスの内側にできる余白です。
文字や画像と枠の間を広げたいときに使います。

.box {
  padding: 15px;
}

👉 ボックスの中のコンテンツが、枠から15px離れて表示されます。

💡 padding は背景色の範囲に含まれるため、内側を広げると背景が広がったように見えます。

---

⬛ borderとは？枠線をつけて要素を区切るCSSプロパティ

ボックスの**ふち（境界）**を囲む線です。

.box {
  border: 2px solid #333;
}

👉 2pxの黒い実線の枠がつきます。

---

💡 よく使うborder-styleの種類

値	意味
solid	実線
dotted	点線
dashed	破線

💡 border-radius を使うと角丸デザインにもできます。

---

💻 実際のコード例

HTML部分：

<div class="box">
  <h2>ボックスモデルを理解しよう</h2>
  <p>margin・padding・borderを使うと、見た目のバランスがぐっと整います。</p>
</div>

CSS部分：

.box {
  background-color: #f9f9f9;
  margin: 20px;
  padding: 20px;
  border: 2px solid #999;
  border-radius: 8px;
}

---

👀 実際の表示結果

CSSで設定したボックスが、
周りに余白ができ、内側にもゆとりがあり、枠線で囲まれて表示されます。

（※Cocoonでは装飾ボックスを使っても同じような効果が出せます♪）

---

✅ margin・padding・borderの違いをまとめて復習！

プロパティ	役割	よく使う目的
margin	外側の余白	要素と要素の間をあける
padding	内側の余白	コンテンツを枠から離す
border	枠線	要素を区切る・装飾する

💡 3つを上手に組み合わせることで、
読みやすく整ったデザインが作れるようになります💪

---

HTMLやCSSの基礎をもっと学びたい方におすすめ👇

---

📌 次回予告

【第8回】枠線をデザインしてみよう
→ border / border-radius を使って、角丸や色付きボックスを作ってみます🎨

---

🔖 この回で出てきたプロパティ

#margin #padding #border #border-style #border-color #border-width