先生と生徒の会話形式で理解しよう

生徒

「フレックスボックスを使うと横並びが簡単にできると聞きましたが、スマホで見ると画面からはみ出しちゃいませんか？」

先生

「そうですね。でも、フレックスボックスには『折り返し』や『並ぶ向きを変える』機能があるんです。」

生徒

「折り返し……？それを使えば、スマホのときは自動で縦に並んでくれるようになるんですか？」

先生

「その通りです！メディアクエリという仕組みと組み合わせれば、驚くほど簡単にレスポンシブ対応ができますよ。」

1. フレックスボックスとレスポンシブデザインの関係

Webサイト制作において、フレックスボックス（Flexbox）は要素を並べるための最強の道具です。一方で「レスポンシブデザイン」とは、パソコンやスマートフォンなど、見ている画面の大きさに合わせてレイアウトを自動調整することを指します。

パソコンの広い画面では「横に3つ並べる」のが綺麗ですが、スマホの狭い画面で無理に横並びにすると、一つひとつの箱が細長くなりすぎて中身が読めなくなります。そこで、フレックスボックスの機能を活用して、画面が狭くなったら「自然に縦に並び替える」という指示を出すのが、現代のホームページ作りにおける王道のテクニックです。プログラミング未経験の方でも、この「並び替え」のコツさえ掴めば、プロのようなサイトが作れるようになります。

2. flex-wrapで要素を自動的に折り返す方法

フレックスボックスを使い始めた初心者が最初に出会う問題が「要素が画面を突き抜けて横に伸びてしまう」ことです。これは、フレックスボックスの初期設定が「何があっても一行に並べる」というルールになっているからです。これを解決するのが「flex-wrap（フレックス・ラップ）」という命令です。

「wrap」とは、日本語で「包む」や「折り返す」といった意味があります。この命令に「wrap」という値を指定してあげると、横幅が足りなくなった時に、はみ出しそうな要素が自動的に次の行（下）へ移動してくれます。これだけでも、最低限のレスポンシブ対応として機能します。箱が勝手に階段のように並んでくれるので、非常に便利な機能です。


<style>
    .flex-wrap-container {
        display: flex;
        flex-wrap: wrap; /* これで横幅が足りない時に折り返します */
        gap: 10px;
        background-color: #f8f9fa;
        padding: 10px;
    }
    .flex-item {
        width: 200px; /* 一つの箱の幅を固定 */
        background-color: #007bff;
        color: white;
        padding: 20px;
        text-align: center;
    }
</style>

<div class="flex-wrap-container">
    <div class="flex-item">箱 1</div>
    <div class="flex-item">箱 2</div>
    <div class="flex-item">箱 3</div>
</div>

ブラウザ表示

3. flex-directionで並ぶ向きをガラッと変える

より高度なレスポンシブ対応をしたい時に使うのが「flex-direction（フレックス・ディレクション）」です。ディレクションとは「方向」という意味です。パソコンでは「row（ロウ：横向き）」、スマホでは「column（カラム：縦向き）」に切り替えるのが一般的なテクニックです。

例えば、パソコンでは左側に画像、右側に説明文を並べていたものを、スマホで見るときだけ「画像が上、説明文が下」という順番に並べ替えることができます。このように、箱の並び方を「横から縦へ」とスイッチひとつで切り替えられるのがフレックスボックスの魅力です。パソコンを触ったことがない方でも、積み木を横に並べるか縦に積むかを決めるイメージだと考えれば分かりやすいはずです。

4. メディアクエリと組み合わせて切り替える実践

では、実際にどうやって「スマホの時だけ」設定を変えるのでしょうか。ここで使うのが「メディアクエリ」という条件分岐の呪文です。CSSの中に「もし画面が〇〇ピクセルより小さかったら、このルールを適用してね」という枠組みを作ります。

以下のサンプルコードを見てください。基本は横並びですが、画面の幅が600ピクセル以下（一般的なスマホのイメージ）になった瞬間に、並び順が縦方向に切り替わります。このように「特定の条件下だけで発動する命令」を覚えることが、レスポンシブデザインをマスターするための大きな一歩となります。


<style>
    .responsive-flex {
        display: flex;
        flex-direction: row; /* 基本は横並び */
        gap: 20px;
    }
    .content-box {
        flex: 1; /* 幅を均等にする */
        background-color: #28a745;
        color: white;
        padding: 30px;
        text-align: center;
    }

    /* 画面幅が600px以下の時の設定 */
    @media (max-width: 600px) {
        .responsive-flex {
            flex-direction: column; /* 縦並びに変更！ */
        }
    }
</style>

<div class="responsive-flex">
    <div class="content-box">メイン記事</div>
    <div class="content-box">サイドメニュー</div>
</div>

ブラウザ表示

5. justify-contentとalign-itemsのレスポンシブ調整

フレックスボックスには、要素を真ん中に寄せたり端に寄せたりする「配置」の命令があります。横方向の配置を決める「justify-content（ジャスティファイ・コンテンツ）」と、縦方向の配置を決める「align-items（アライン・アイテムズ）」です。

パソコンでは要素を左右に散らして配置（space-between）していても、スマホで縦並びにしたときには、すべてを中央寄せ（center）にしたいというケースがよくあります。メディアクエリの中でこれらの値を書き換えることで、デバイスごとに最適な「居心地の良い場所」に要素を配置してあげましょう。スマホユーザーにとって、親指で操作しやすい位置にボタンを配置するなどの工夫も、ここでの設定が鍵を握ります。

6. 画像とテキストを交互に並べるテクニック

パソコンの画面では、1行目が「左に画像、右に文字」、2行目が「左に文字、右に画像」という交互（互い違い）のデザインがよく使われます。おしゃれに見えますが、そのままスマホで縦に並べると「画像→文字→文字→画像」という順番になってしまい、少し違和感が出ることがあります。

そんな時に便利なのが「row-reverse（ロウ・リバース）」や「order（オーダー）」という機能です。リバースは「逆転」という意味で、並び順をあえて逆にすることができます。これを使えば、スマホでは常に「画像が上、文字が下」という一定のルールで表示させることが可能です。このように、フレックスボックスは見た目の順番までもコントロールできる魔法のようなツールなのです。


<style>
    .pair-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    .text-part { padding: 20px; flex: 1; }
    .img-part { flex: 1; text-align: center; }
    .img-part img { max-width: 100%; height: auto; }

    /* スマホでは画像を常に上にしたい */
    @media (max-width: 600px) {
        .pair-container {
            flex-direction: column-reverse; /* 下にあるものを上に持ってくる */
        }
    }
</style>

<div class="pair-container">
    <div class="text-part">
        <h3>美味しい料理の紹介</h3>
        <p>スマホではこのテキストが画像の下に配置されます。</p>
    </div>
    <div class="img-part">
        <img src="/img/sample150-100.jpg" alt="料理">
    </div>
</div>

ブラウザ表示

7. フレックスボックスで挫折しないためのコツ

プログラミング未経験の方がフレックスボックスを学ぶ際、一番大切なのは「親の箱」と「中の要素」の関係を意識することです。命令を出すのは常に「親の箱」です。親に対して「並べ！」と命令すると、中の子供たちが一斉に動きます。レスポンシブ対応も同じで、親の箱の性質をメディアクエリで切り替えるだけです。

最初は思い通りに動かないこともあるかもしれませんが、それはパソコンの仕組みをまだ理解していないだけです。フレックスボックスは非常に視覚的で分かりやすい技術なので、一度コツを掴めばパズルのように楽しくレイアウトを作れるようになります。まずは簡単な「横から縦への切り替え」から練習して、スマホで見やすいサイト制作の第一歩を踏み出しましょう！

8. ブラウザの検証ツールで動きを確認しよう

最後に、自分で作ったフレックスボックスが正しくレスポンシブ対応できているか、確認する方法をお伝えします。パソコンのブラウザには「検証ツール」という機能がついています。これを使えば、パソコンの画面上で「スマホサイズになった時の表示」を擬似的に映し出すことができます。

画面をゆっくり縮めていった時に、自分の書いたメディアクエリが発動して、横並びが縦並びへパッと切り替わる瞬間は、エンジニアとして最もやりがいを感じる瞬間のひとつです。このツールを使いこなしながら、自分のコードに自信を持てるようになるまで試行錯誤してみてください。失敗を恐れず、何度も「width（幅）」や「direction（向き）」を書き換えて、理想の動きを追求しましょう。


<style>
    .final-check {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 20px;
        background-color: #eee;
    }
    .card {
        width: 30%;
        min-width: 150px; /* 150pxよりは小さくならない */
        background: white;
        margin: 5px;
        border: 1px solid #ccc;
        text-align: center;
    }
</style>

<div class="final-check">
    <div class="card">カード A</div>
    <div class="card">カード B</div>
    <div class="card">カード C</div>
</div>

ブラウザ表示