1. はじめに

前回の記事では、HTMLとCSSの基本を学びました。今回は、より高度なレイアウト技術として「Flexbox」と「Grid」について解説します。

Webデザインをする際、要素の配置を効率的に行うためには、これらの技術を活用するのが重要です。

2. Flexbox（フレックスボックス）とは？
1. Flexboxの基本構造
  1. 例：横並びのレイアウト
  2. Flexboxの主なプロパティ
3. Gridレイアウトとは？
1. Gridの基本構造
  1. 例：2列×2行のレイアウト
  2. Gridの主なプロパティ
4. FlexboxとGridの使い分け
5. まとめ

2. Flexbox（フレックスボックス）とは？

Flexboxは、要素を柔軟に配置し、簡単に中央揃えやレスポンシブデザインを実現できるレイアウト方法です。

Flexboxの基本構造

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

例：横並びのレイアウト

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flexboxの基本</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">アイテム1</div>
        <div class="item">アイテム2</div>
        <div class="item">アイテム3</div>
    </div>
</body>
</html>

Flexboxの主なプロパティ

プロパティ	説明
`display: flex;`	Flexboxを有効にする
`justify-content`	アイテムの配置 (`flex-start`, `center`, `space-between` など)
`align-items`	縦方向の配置 (`flex-start`, `center`, `stretch` など)
`flex-direction`	アイテムの並び方向 (`row`, `column`)

Flexboxの基本はこちらの記事もチェック！

3. Gridレイアウトとは？

Gridレイアウトは、2次元のレイアウト（行×列）を簡単に作成できるCSSの機能です。

Gridの基本構造

Gridを使用するには、親要素に display: grid; を指定します。

例：2列×2行のレイアウト

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gridの基本</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 100px 100px;
            gap: 10px;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .grid-item {
            background-color: #e74c3c;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

Gridの主なプロパティ

プロパティ	説明
`display: grid;`	Gridレイアウトを有効にする
`grid-template-columns`	列の幅を指定する (`1fr 1fr` など)
`grid-template-rows`	行の高さを指定する (`100px 100px` など)
`gap`	要素間のスペースを設定する

Gridの基本は、こちらの記事もチェック！

4. FlexboxとGridの使い分け

Flexbox	Grid
1次元（横または縦）に要素を並べるのに適している	2次元（行×列）のレイアウトに適している
簡単な並び替えや中央揃えに便利	複雑なデザインやダッシュボードに適している
`justify-content`, `align-items` で配置を制御	`grid-template-columns`, `grid-template-rows` でレイアウトを設定

用途に応じて使い分けると、より柔軟なデザインが可能になります！

5. まとめ

Flexbox は1次元のレイアウト向きで、中央揃えや横並びの調整が簡単
Grid は2次元レイアウト向きで、複雑なレイアウトを組むのに便利
状況に応じてFlexboxとGridを使い分ける

今回はFlexboxとGridの基本構造のお話をしました。
次回は、実践的なレイアウト例 を紹介します！

➤こちら、FlexboxとGridを両方使った実戦レイアウト作成の記事です

より高度なCSSレイアウト：FlexboxとGridを学ぼう！(基礎)