「画像が横に並ばない…」を3行で解決！CSS Flexbox超入門【コピペOK】

HTMLで骨組みを作り、CSSで色をつけられるようになりました。
でも、自分でサイトを作ろうとすると、ある「大きな壁」にぶつかりませんか？

「画像を横に並べたいのに、全部縦に並んでしまう…」
「ボタンをど真ん中に配置したいのに、全然動かない…」

そんな悩みを吹き飛ばす、現代Web制作の必須スキル。
それが「Flexbox（フレックスボックス）」です。

今回は、たった3行のコードでレイアウトを自由自在に操る魔法のテクニックを伝授します！

Flexboxの基本は「親と子」の関係
1. 1. 魔法のスイッチ「display: flex;」
配置を操る「2つの軸」
1. 1. 横方向の整列：justify-content
2. 2. 縦方向の整列：align-items
実践：3カラムのカードレイアウトを作ろう
1. 注目ポイント：gapプロパティ
まとめ：もうレイアウトで迷わない

Flexboxの基本は「親と子」の関係

Flexboxを使う時の最大のルール。それは「親要素に命令する」ということです。

例えば、3つの箱（子）を横並びにしたい場合、箱そのものに「横になれ！」と言うのではなく、その箱をまとめている袋（親）に「中身を整列させろ！」と命令します。

1. 魔法のスイッチ「display: flex;」

まずは親要素（divやulなど）に対して、以下の呪文を唱えます。

.parent-box {
    display: flex;
}

これだけで、縦に並んでいた子要素たちが、一瞬で「横並び」になります。
これがFlexboxの基本スイッチです。

配置を操る「2つの軸」

横並びになったら、次は「どこに置くか」を決めます。
覚えるプロパティは2つだけです。

1. 横方向の整列：justify-content

「ジャスティファイ・コンテンツ」と読みます。要素を左寄せにするか、真ん中にするか、均等に広げるかを決めます。

.parent-box {
    display: flex;
    /* 真ん中に寄せる */
    justify-content: center; 
}

よく使う値リスト：

flex-start：左寄せ（初期値）
center：中央寄せ
flex-end：右寄せ
space-between：両端に広げて、間を均等に空ける（メニューバーでよく使います！）

2. 縦方向の整列：align-items

「アライン・アイテムズ」と読みます。高さが違う要素同士の「縦の位置」を揃えます。

.parent-box {
    display: flex;
    /* 縦方向のど真ん中に揃える */
    align-items: center;
}

よく使う値リスト：

stretch：高さを親一杯に伸ばす（初期値）
center：上下の真ん中に配置
flex-start：上揃え
flex-end：下揃え

実践：3カラムのカードレイアウトを作ろう

では、Flexboxを使って、よくある「3つのカードが横に並んだレイアウト」を作ってみましょう。
PCで見ると横並びになり、とても見やすくなります。

以下のコードをコピペして確認してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        /* 親要素（コンテナ）の設定 */
        .card-container {
            display: flex;             /* 1. FlexboxモードON！ */
            justify-content: center;   /* 2. 横方向：中央寄せ */
            align-items: flex-start;   /* 3. 縦方向：上揃え */
            gap: 20px;                 /* おまけ：子要素同士の隙間を20px空ける */
            padding: 50px;
            background-color: #f0f0f0;
        }

        /* 子要素（カード）のデザイン */
        .card {
            background-color: white;
            width: 300px;              /* 幅を指定 */
            padding: 20px;
            border-radius: 10px;       /* 角丸 */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        h2 { color: #00bcd4; }
    </style>
</head>
<body>

    <!-- 親要素 -->
    <div class="card-container">
        
        <!-- 子要素1 -->
        <div class="card">
            <h2>HTML</h2>
            <p>Webページの骨組みを作ります。文章構造を定義する言語です。</p>
        </div>

        <!-- 子要素2 -->
        <div class="card">
            <h2>CSS</h2>
            <p>見た目をデザインします。色やレイアウトを自由に調整できます。</p>
        </div>

        <!-- 子要素3 -->
        <div class="card">
            <h2>JavaScript</h2>
            <p>動きをつけます。クリックした時の動作などを作れます。</p>
        </div>

    </div>

</body>
</html>

注目ポイント：gapプロパティ

コードの中に gap: 20px; という記述がありましたね。
これはFlexboxの便利な機能で、「隣り合うアイテムの間だけに隙間を作る」ことができます。
昔はmarginで計算していましたが、今はこれ1行でOKです！

まとめ：もうレイアウトで迷わない

Flexboxの重要ポイントをおさらいしましょう。

親要素に display: flex; をつける
justify-content で横の位置を決める
align-items で縦の位置を決める

「ど真ん中に配置したい！」と思ったら、こう書けば完璧です。

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

これを覚えるだけで、Webサイト制作の自由度は劇的に上がります。
ぜひ色々な並べ方を試してみてくださいね！