【フロントエンド入門5】FlexboxとGridによるレイアウト設計｜効率的なレイアウトの構築方法

Webページのレイアウトを設計する際、CSSの強力なツールであるFlexboxとGridレイアウトは欠かせません。これらを正しく理解し使いこなすことで、複雑なレイアウトも効率的に実現できます。本記事では、それぞれの特徴や使い方について初心者向けに分かりやすく解説します。

Flexboxとは？
1. Flexboxの基本構造
2. 主なプロパティ
Gridレイアウトとは？
FlexboxとGridの使い分け
1. Flexboxが適している場合
2. Gridが適している場合
実際のレイアウト設計の例
1. レスポンシブな3列レイアウト
結論

Flexboxとは？

Flexbox（フレキシブルボックスレイアウト）は、要素を行方向または列方向に柔軟に配置するためのレイアウトシステムです。主に1次元の配置に適しており、アイテム間のスペースや揃え方を簡単に調整できます。

Flexboxの基本構造

Flexboxを使うには、親要素にdisplay: flex;を指定します。

例

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

.container {
    display: flex;
    border: 1px solid black;
}

.item {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
}

この基本構造により、子要素（.item）は自動的に横一列に並びます。

主なプロパティ

justify-content：主軸方向の配置を指定します。
- flex-start（デフォルト）：左寄せ
- center：中央揃え
- space-between：要素間のスペースを均等に配置
align-items：交差軸方向の揃え方を指定します。
- flex-start：上寄せ
- center：中央揃え
- flex-end：下寄せ
flex-wrap：子要素が折り返されるかどうかを指定します。
- nowrap（デフォルト）：折り返さない
- wrap：折り返す

例：アイテムの中央揃えと折り返し

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

この設定により、子要素は中央に揃い、スペースが不足すると折り返されます。

Gridレイアウトとは？

Gridレイアウトは、2次元のレイアウトを構築するための強力なシステムです。行と列の両方を制御できるため、複雑なレイアウトにも適しています。

Gridの基本構造

Gridレイアウトを使うには、親要素にdisplay: grid;を指定し、行と列を設定します。

例

<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);
    gap: 10px;
    border: 1px solid black;
}

.grid-item {
    padding: 20px;
    background-color: lightgreen;
    border: 1px solid green;
}

この例では、2列のグリッドが作成され、アイテムが順番に配置されます。

主なプロパティ

grid-template-columns：列の幅を指定します。
- repeat(3, 1fr)：3列で各列の幅を均等にする
- 200px 1fr：1列目を200px、2列目を残りの幅で
grid-template-rows：行の高さを指定します。
- auto：自動調整
- repeat(2, 100px)：各行の高さを100pxに固定
gap：行や列の間のスペースを指定します。
- gap: 10px;：行間と列間に10pxのスペースを設ける

エリアの指定

Gridレイアウトでは、特定の領域に要素を配置することができます。

例

<div class="grid-container">
    <div class="header">ヘッダー</div>
    <div class="sidebar">サイドバー</div>
    <div class="main">メインコンテンツ</div>
    <div class="footer">フッター</div>
</div>

.grid-container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: lightcoral;
}

.sidebar {
    grid-area: sidebar;
    background-color: lightgoldenrodyellow;
}

.main {
    grid-area: main;
    background-color: lightcyan;
}

.footer {
    grid-area: footer;
    background-color: lightpink;
}

この例では、各要素が定義されたエリアに配置され、レイアウトが視覚的にわかりやすくなります。

FlexboxとGridの使い分け

Flexboxが適している場合

1次元のレイアウト（行方向または列方向）
要素の順序や間隔を動的に調整したいとき
中央揃えやアイテム間の均等配置が必要な場合

Gridが適している場合

2次元の複雑なレイアウト（行と列を同時に制御）
固定された領域に要素を配置したい場合
レスポンシブデザインで柔軟なグリッド構成が必要な場合

実際のレイアウト設計の例

レスポンシブな3列レイアウト

以下は、画面サイズに応じて列数が変わるレスポンシブレイアウトの例です。

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

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.item {
    background-color: lightgray;
    padding: 20px;
    border: 1px solid darkgray;
}