CSS Flexbox入門：もう横並びレイアウトで悩まないための基本ガイド

公開日: 2025年9月21日

Webサイトのレイアウトで、多くの初心者が最初にぶつかる壁。それが「要素の横並び」です。
floatを使ってみたり、display: inline-block;で謎の隙間に悩まされたり…僕も昔は、レイアウトを組むだけで半日を溶かしてしまうことがよくありました。

しかし、現代のCSSには、そんな悪夢のようなレイアウト作業を過去のものにする、非常に強力なツールがあります。それが、CSS Flexible Box Layout、通称「Flexbox」です。

今日は、このFlexboxの基本的な使い方と考え方を、実際に動くサンプルを見ながらマスターしていきましょう。この記事を読み終える頃には、あなたはもう横並びレイアウトを恐れることはなくなるはずです。

Flexboxの基本：親と子の関係

Flexboxを理解するための最も重要なコンセプトは、「親要素（コンテナ）」と「子要素（アイテム）」の関係です。
Flexboxのプロパティは、親要素に指定するものと、子要素に指定するものに分かれています。まずは、親に指定する最も重要なプロパティから見ていきましょう。

すべての魔法は、この一行から始まります。親要素に display: flex;を指定するだけで、その直下の子要素は、ブロック要素（通常は縦に積まれる）であっても、自動的に横並びになります。

CSS:

.container {
    display: flex;
}

結果:

たったこれだけです。floatのように、後で回り込みを解除 (`clearfix`) する必要もありません。シンプルですよね。

display: flex; を指定したら、次はこの横並びになったアイテムたちを、どのように配置するかを決めていきます。

これは、アイテムを横方向（主軸）に、どのように揃えるかを決めるプロパティです。よく使う値をいくつか見てみましょう。

CSS (中央揃えの例):

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

結果:

これは、アイテムを縦方向（交差軸）に、どのように揃えるかを決めるプロパティです。高さが違うアイテムがある場合に、その威力を発揮します。

CSS (上下中央揃えの例):

.container {
    display: flex;
    align-items: center;
    height: 150px; /* 親の高さが必要 */
}

結果:

Flexboxには、他にもたくさんの便利なプロパティがありますが、初心者が最初に覚えるべきなのは、間違いなくこの3つです。

この3つのプロパティを使いこなせるようになるだけで、あなたが作れるレイアウトの幅は劇的に広がります。ぜひ、あなたのサイトで実際に試してみてください。「SerchCode Pro」で `display: flex` と検索して、色々な実行例を見てみるのも面白いですよ！

#CSS　勉強独学プログラマー　#HTML　勉強 #

記事で紹介したコードがよく分からなかったり、ご自身のコードについてもっと知りたい場合は、AIコード解説ツールが便利です。コードを貼り付けるだけで、AIが日本語で分かりやすく解説します。