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

生徒

「パソコンで見ると横に並んでいるのに、スマホで見ると縦に並んでいるWebサイトってどうやって作っているんですか？」

先生

「それは『レスポンシブデザイン』という手法を使っています。CSS Gridとメディアクエリという仕組みを組み合わせれば、驚くほど簡単に作れるんですよ。」

生徒

「メディアクエリ……難しそうな名前ですね。プログラミングが初めてでも大丈夫でしょうか？」

先生

「大丈夫です！『もし画面が狭かったら、このルールに変えてね』というお願いをCSSに書くだけなんです。具体的な作り方を見ていきましょう！」

1. レスポンシブデザインとメディアクエリの基本

現代のWeb制作において、切っても切り離せないのがレスポンシブデザインです。これは、パソコン、タブレット、スマートフォンといった異なる画面サイズに合わせて、Webサイトの見た目を最適化することを指します。昔のWebサイトはパソコン専用が多かったのですが、今はスマホユーザーが多いため、スマホでの見やすさが非常に重要視されています。

この「見た目の切り替え」を実現するのが、メディアクエリ（Media Queries）という機能です。これは、ブラウザに対して「画面の幅が〇〇ピクセル以下の時は、このCSSを適用してね」という条件分岐を伝えるための命令です。例えば、広い画面では3カラム（3列）で表示し、狭い画面では1カラム（1列）に積み上げるといった指示が可能になります。まるで、見る人の持っている端末に合わせて、自動でページを組み替えてくれる魔法の設計図のようなものです。

2. メディアクエリの書き方をマスターしよう

メディアクエリを書くときは、@media という特殊な記号から始めます。最もよく使われるのが「画面の最大幅」を指定する (max-width: 〇〇px) という書き方です。これは「このピクセル数より小さい画面の時だけ、この中のルールを優先してね」という意味になります。

例えば、スマホ用のデザインを作りたい時は、一般的に 768px という数字を基準（ブレイクポイント）にします。この数字以下の時はスマホ用、それより大きい時はパソコン用、というように境界線を引くわけです。パソコンを初めて触る方でも、一つのファイルの中に「普通の時のルール」と「スマホの時のルール」の2つを書くだけだと考えれば、イメージしやすいはずです。


<style>
    /* 1. まずは普通の時の設定（パソコンなど広い画面用） */
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列に並べる */
        gap: 15px;
    }

    /* 2. メディアクエリ（画面幅が600px以下のスマホ用） */
    @media (max-width: 600px) {
        .container {
            grid-template-columns: 1fr; /* 1列に並べる */
        }
    }

    .box {
        background-color: #ffadad;
        padding: 20px;
        text-align: center;
        border: 2px solid #333;
    }
</style>

<div class="container">
    <div class="box">カード 1</div>
    <div class="box">カード 2</div>
    <div class="box">カード 3</div>
</div>

ブラウザ表示

3. CSS Gridでカラム数を劇的に変える方法

CSS Gridを使えば、レスポンシブ対応が驚くほど簡単になります。先ほどの例のように、grid-template-columns という一箇所の設定を書き換えるだけで、横並びの要素が自動的に縦に並び替わります。これは「フレックスボックス」という別の手法よりも、さらにシンプルで分かりやすい設計方法です。

特に、3列から2列、そして1列へと、段階的に形を変えることもできます。例えばタブレットでは2列、スマホでは1列といった具合です。このように、カラム（列）の数を数字で指定するだけでレイアウトがガラッと変わる快感は、Gridならではの魅力です。プログラミング未経験の方は、まずこの「数字を変えるだけ」という手軽さから慣れていきましょう。

4. サイドバーをスマホで下に移動させるテクニック

ブログサイトなどでよく見かける「左にメニュー、右に本文」というレイアウトも、メディアクエリの出番です。パソコンでは横に並べておきたいですが、画面の狭いスマホで横に並べると、文字が小さくなりすぎて読めなくなってしまいます。

そこで、スマホの時だけ grid-template-columns: 1fr; （1列）にリセットします。そうすると、HTMLで先に書いたものが上に、後に書いたものが下に来るという自然な流れになります。一般的には、スマホでは本文を上に、メニューを下に配置するのが見やすいデザインのコツです。


<style>
    .layout-parent {
        display: grid;
        grid-template-columns: 200px 1fr; /* 左固定・右可変 */
        gap: 10px;
    }
    
    @media (max-width: 768px) {
        .layout-parent {
            grid-template-columns: 1fr; /* スマホでは縦並び */
        }
    }

    .side { background-color: #ffd6a5; padding: 10px; }
    .main { background-color: #fdffb6; padding: 10px; min-height: 100px; }
</style>

<div class="layout-parent">
    <div class="side">サイドバー（メニュー）</div>
    <div class="main">メインの本文が入ります</div>
</div>

ブラウザ表示

5. 画像のサイズもグリッドと一緒に調整

カラムの数が変わるとき、中に入っている画像もきれいにサイズが変わるように設定しておきましょう。CSS Gridのマス目の幅が狭くなっても、画像がはみ出さないようにするには、画像に対して width: 100%; を指定するのが鉄則です。

これにより、グリッドのマス目がパソコンの時に300pxあれば画像も300pxに、スマホになって画面いっぱいに広がれば画像もそれに合わせて大きくなります。レスポンシブデザインでは、「要素が自分自身の幅を決め打ちしない」ことが重要です。常に親であるグリッドのマス目にお任せする、という控えめな姿勢が、崩れないレイアウトを作るための秘訣です。

6. 名前付きエリア（areas）を使ったレイアウトの組み替え

前回の章で学んだ grid-template-areas を使うと、レスポンシブ対応はさらに強力になります。エリアに名前をつけておくことで、スマホの時だけ「順番を入れ替える」ことが可能になるからです。

例えば、パソコンでは「ヘッダー・本文・サイドバー」の順に並んでいても、スマホでは「ヘッダー・サイドバー・本文」の順に変えたいという要望があったとします。本来ならHTMLを書き換えないといけませんが、グリッドならCSSの文字列を並べ替えるだけで地図を書き換えることができます。初心者の方こそ、この「名前で場所を指定する」方法の便利さを実感してほしいです。


<style>
    .smart-layout {
        display: grid;
        grid-template-areas: 
            "h h"
            "s m"; /* PC：左サイド・右メイン */
        grid-template-columns: 150px 1fr;
        gap: 10px;
    }

    @media (max-width: 500px) {
        .smart-layout {
            grid-template-areas: 
                "h"
                "m"
                "s"; /* スマホ：メインが先、サイドが後に変更 */
            grid-template-columns: 1fr;
        }
    }

    .h { grid-area: h; background: #caffbf; padding: 10px; text-align: center; }
    .m { grid-area: m; background: #9bf6ff; padding: 10px; }
    .s { grid-area: s; background: #bdb2ff; padding: 10px; }
</style>

<div class="smart-layout">
    <header class="h">ヘッダー</header>
    <main class="m">本文（スマホではこっちが上！）</main>
    <aside class="s">広告・メニュー</aside>
</div>

ブラウザ表示

7. 初心者がハマる！ブレイクポイントの決め方

メディアクエリを使い始めると、「何ピクセルで切り替えるのが正解なの？」という疑問が必ず湧いてきます。この切り替えポイントをブレイクポイントと呼びます。結論から言うと、「完璧な一つの正解」はありませんが、よく使われる目安があります。

一般的な目安は、スマホ向けなら 480px 前後、タブレットなら 768px 前後、パソコンなら 1024px 以上といった感じです。まずは深く悩まず、 768px を一つだけ設定して、「パソコンかスマホか」という2種類の切り替えから練習してみましょう。パソコンのブラウザの端っこをマウスで掴んで、横にぐーっと縮めてみてください。設定した瞬間にガコンとレイアウトが変わる様子を確認できれば、あなたも立派なWebデザイナーの仲間入りです！

8. レスポンシブ設計で「崩れない」サイトを作るコツ

最後に、グリッドとメディアクエリを使った設計で失敗しないためのコツをお伝えします。それは、「最初はシンプルに作り、徐々に条件を増やす」ことです。最初から何種類もの画面サイズに対応しようとすると、CSSがぐちゃぐちゃになってしまいます。

まずは、一番大きな画面での理想の形を作ります。次に、画面を縮めていって「あ、ここでもう少し狭いと見づらいな」と思ったところでメディアクエリを追加します。これを繰り返すことで、無理のない自然なレスポンシブデザインが完成します。プログラミング未経験でも、マウスで画面をいじりながら「ここだ！」というポイントを見つける作業はとても楽しいものです。ぜひ、自分だけのレスポンシブなサイト作りに挑戦してみてくださいね！