【第9回】幅・高さ・中央配置をマスターしよう｜width / height / margin: auto【CSS初心者ノート】

🧱 幅と高さを指定する（width / height）

ボックスや画像などの「大きさ」を決めるのが width（横幅） と height（高さ） です。

.box {
  width: 300px;
  height: 150px;
  background-color: #e6f0ff;
}

👉 この場合、300px × 150px の水色の長方形になります。

💡 単位の種類

単位	意味	例
px	固定サイズ	width: 300px;
%	親要素に対する割合	width: 50%;
vw / vh	画面全体に対する割合	width: 80vw; height: 50vh;

💬 画面サイズに合わせて伸縮させたいときは % や vw/vh が便利です。

---

📦 ボックスを中央に配置する（margin: auto）

横方向の中央揃えをしたいときは、
margin: auto; を使います👇

.center-box {
  width: 300px;
  margin: 0 auto;
  background-color: #d9ecff;
  text-align: center;
  padding: 20px;
}

👉 margin: 0 auto; は上下0・左右自動で、左右の余白が均等になります。

💡 widthを指定していないと中央になりません。
ブラウザが「どの幅で中央にするのか」を決められないためです。

---

💻 実際のコード例

HTML部分：

<div class="center-box">
  <p>中央に配置されたボックスです。</p>
</div>

CSS部分：

.center-box {
  width: 300px;
  height: 150px;
  background-color: #e6f0ff;
  border: 2px solid #7aa6ff;
  margin: 0 auto;       /* 横方向の中央揃え */
  text-align: center;
  line-height: 150px;   /* テキストを縦方向中央に */
}

---

👀 実際の表示結果

水色のボックスが中央に表示され、
テキスト「中央に配置されたボックスです。」が
上下・左右ともに中央に揃って表示されます。

（※line-height で縦方向の中央揃えを実現しています）

---

⚠️ よくあるミスと注意点

• margin: auto; は widthを指定していないと効かない
• 画像などのインライン要素は display: block; を指定して中央に
• text-align: center; は文字やインライン要素を中央に揃える（ボックス自体ではない）

---

✅ ポイントまとめ

📏 横幅を決める → width
📐 高さを決める → height
📦 ボックスを中央に配置 → margin: auto

---

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

---

📌 次回予告

【第10回】リストとリンクのデザイン
→ list-style / a:link / :hover / :visited を使って、
リストとリンクをおしゃれに整えてみます💫

---

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

#width #height #margin #margin-auto

---