スマホ対応は難しくない！PC用サイトを「3行」でモバイル対応にする方法

前回、Flexboxを使って「横並びのレイアウト」を作れるようになりました。
PCで見ると綺麗ですが、そのページをスマホで見たことはありますか？

「文字が小さすぎて読めない！」「横スクロールが発生して見づらい！」
そんな悲劇が起きているかもしれません。

そこで今回は、Webサイトをスマホの画面サイズに合わせて自動で変形させる技術、「レスポンシブデザイン（メディアクエリ）」を学びます。

メディアクエリ＝「条件分岐」の魔法
必須のおまじない「Viewport（ビューポート）」
実践：Flexboxをスマホで「縦並び」にする
まとめ：今のWeb制作は「スマホファースト」

メディアクエリ＝「条件分岐」の魔法

名前は難しそうですが、やっていることは単純です。
CSSに以下の「条件」を書き足すだけです。

「もし、画面の幅が○○px以下なら、このデザインを使ってね！」

これを専門用語で「メディアクエリ（Media Queries）」と呼びます。
書き方のルールを見てみましょう。

/* ↓ これが「共通（PC向け）」のデザイン */
h1 {
    font-size: 30px;
}

/* ↓ ここからが「スマホ向け（画面幅600px以下）」の上書きルール */
@media (max-width: 600px) {
    h1 {
        font-size: 20px; /* スマホでは少し小さくする */
    }
}

この @media (max-width: 600px) { ... } の中に書いたCSSは、画面が600pxより狭い時だけ適用されます。
この切り替わるポイント（600px）のことを「ブレイクポイント」と呼びます。

必須のおまじない「Viewport（ビューポート）」

CSSを書く前に、必ずやっておかなければならないHTMLの設定があります。
これを忘れると、いくらCSSを書いてもスマホが勝手にサイトを縮小表示してしまい、メディアクエリが動きません。

HTMLの <head> タグの中に、以下の1行を必ず入れてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

意味は覚えなくてOKです。「スマホの画面幅に合わせて、正しく表示してね」というブラウザへの指示書だと思ってください。

実践：Flexboxをスマホで「縦並び」にする

では、前回の「3つのカードが横に並ぶレイアウト」をスマホ対応させてみましょう。
やりたいことは以下の通りです。

PCの時： 横並び（flex-direction: row;）
スマホの時： 縦並び（flex-direction: column;）

以下のコードをコピーして、ブラウザの幅を狭くしたり広くしたりしてみてください。
デザインがパッと切り替わる瞬間が見られますよ！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- ↓これが必須のViewport設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スマホ対応の練習</title>
    <style>
        /* === 1. 基本（PC向け）のデザイン === */
        body {
            font-family: sans-serif;
            background-color: #f0f0f0;
            padding: 20px;
        }

        .container {
            display: flex;          /* 横並びON */
            justify-content: center;
            gap: 20px;
        }

        .card {
            background-color: white;
            width: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* === 2. スマホ向け（画面幅600px以下）のデザイン === */
        @media (max-width: 600px) {
            
            /* Flexboxの向きを「縦」に変える */
            .container {
                flex-direction: column; /* 縦並びにする */
                align-items: center;    /* 縦並びの時の左右中央揃え */
            }

            /* カードの幅を画面いっぱいに広げる */
            .card {
                width: 100%; /* 幅を固定値から100%に変更 */
            }

            body {
                background-color: #e0f2f1; /* 分かりやすく背景色も変えてみる */
            }
        }
    </style>
</head>
<body>

    <h1>画面幅を変えてみて！</h1>

    <div class="container">
        <div class="card">
            <h2>HTML</h2>
            <p>骨組みを作ります。</p>
        </div>
        <div class="card">
            <h2>CSS</h2>
            <p>見た目を整えます。</p>
        </div>
        <div class="card">
            <h2>JavaScript</h2>
            <p>動きをつけます。</p>
        </div>
    </div>

</body>
</html>

まとめ：今のWeb制作は「スマホファースト」

いかがでしたか？
@media というブロックの中に、変えたい部分だけを書く。これだけでサイトは劇的に使いやすくなります。

ポイントのおさらいです。

HTMLに viewport のタグを入れる（必須！）
@media (max-width: 600px) でスマホ用の条件を作る
Flexboxなら flex-direction: column; で簡単に縦並びにできる

今はPCよりもスマホでWebサイトを見る人の方が多い時代です。
「PCで完成！」で満足せず、必ず「スマホだとどう見えるかな？」と確認する癖をつけてくださいね。