レイアウトの基本（ボックスモデル・Flexbox・グリッド）

---

レイアウトの基本 – ボックスモデル・Flexbox・グリッドを学ぼう

HTMLとCSSの基礎を理解したら、次は レイアウト の仕組みを学びましょう。
Webページは、テキストや画像がただ並んでいるのではなく、「ボックス」 を基に配置されています。この「ボックス」を適切に整えることで、見やすく、デザイン性のあるページを作ることができます。

ここでは、レイアウトを決める3つの基本要素 ボックスモデル・Flexbox・グリッド について解説します。

---

1. ボックスモデルとは？

Webページのすべての要素は「ボックス」として扱われています。これを 「ボックスモデル」 といいます。

ボックスモデルの構成

CSSで定義されたボックスは、以下の4つの領域で構成されます。

ボックスモデルのCSS例

.box {
    width: 300px;         /* 横幅 */
    height: 150px;        /* 高さ */
    margin: 20px;         /* 外側の余白 */
    padding: 15px;        /* 内側の余白 */
    border: 2px solid #333; /* 枠線 */
    background-color: #f0f0f0; /* 背景色 */
}

<div class="box">これはボックスモデルの例です</div>

📌 ポイント

• margin：要素の外側の余白（他の要素との間隔）
• border：要素の境界線（枠線）
• padding：要素の内側の余白（ボーダーと内容の間の余白）
• content：実際に表示される内容部分

---

2. Flexbox（フレックスボックス）

Flexbox（フレックスボックス）は、要素を横や縦に 柔軟に配置 するためのレイアウト手法です。
親要素（コンテナ） に display: flex; を指定することで、子要素の配置を簡単に調整できます。

Flexboxの基本構造

<div class="flex-container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.flex-container {
    display: flex;      /* Flexboxを適用 */
    justify-content: space-between;  /* 子要素の間隔調整 */
    align-items: center;  /* 垂直方向の中央揃え */
}

.box {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: white;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
}

📌 ポイント

• display: flex; を指定すると、子要素が横並びになる
• justify-content: space-between; で子要素を均等に配置
• align-items: center; で垂直方向の中央揃え

Flexboxは ナビゲーションメニュー や カード型デザイン など、横並びのレイアウトに便利です。

---

Flexbox（フレックスボックス）の詳細

3. CSSグリッドレイアウト（Grid Layout）

CSSグリッド は、行と列を使って柔軟なレイアウトを作成できる強力な機能です。Flexboxが「1次元（横 or 縦）」の配置なのに対し、グリッドは2次元（縦・横両方） の配置を管理できます。

グリッドレイアウトの基本

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列のグリッド */
    gap: 10px;  /* グリッド間の間隔 */
}

.grid-item {
    background-color: #28a745;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
}

📌 ポイント

• display: grid; を指定すると、グリッドレイアウトが適用される
• grid-template-columns: repeat(2, 1fr); で 2列 のグリッドを設定
• gap で要素の間隔を調整

グリッドは複雑なレイアウト（カラム・カード配置など）に適しているため、レスポンシブデザインにも便利です！

---

CSSグリッドレイアウトの詳細

4. どのレイアウトを使うべき？

レイアウト手法	特徴	使いどころ
ボックスモデル	基本となるレイアウトの概念	すべての要素
Flexbox	横並び・縦並びのレイアウトが得意	ナビゲーション・カード配置
Grid	複雑な2次元レイアウトを簡単に作成	ページ全体のレイアウト

---

5. まとめ

• ボックスモデル は、すべてのHTML要素に適用される基礎的な概念
• Flexbox は 横並び・縦並び のレイアウトに最適
• CSSグリッド は 複雑なレイアウト を管理しやすい
• 使い分けることで、自由なレイアウト が可能になる

次回は、レスポンシブデザイン（スマホ対応）の基礎 を学びましょう！

---

補足情報（学習に役立つリンク）

• MDN Web Docs（ボックスモデル）
• MDN Web Docs（Flexbox）
• MDN Web Docs（CSS Grid）

---