既存レイアウトにメディアクエリを追加する方法！初心者でもわかるレスポンシブデザインの基本

既存レイアウトにメディアクエリを追加する手順

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

生徒

「パソコンで見るときれいなホームページが、スマホで見ると文字が小さすぎたり崩れたりしてしまいます。どうすればいいですか？」

先生

「それはレスポンシブデザインという手法で解決できます。メディアクエリという仕組みを使えば、画面の大きさに合わせてデザインを自動で切り替えられるんですよ。」

生徒

「難しそうですが、初心者の私でも既存のレイアウトに追加できますか？」

先生

「もちろんです！書き方のルールさえ覚えれば、今あるデザインに付け足すだけでスマホ対応ができます。手順をゆっくり解説しますね。」

1. メディアクエリとは何？

メディアクエリとは、一言で言うと「もし画面の横幅が〇〇ピクセル以下だったら、このデザインを適用してね」とコンピューターに命令を出すための魔法の言葉です。レスポンシブデザイン（閲覧する機器の画面サイズに応じて表示を最適化すること）を実現するために欠かせない技術です。

プログラミング未経験の方に例えると、これは「衣替え」のようなものです。夏になったら半袖を着て、冬になったら厚手のコートを着ますよね。メディアクエリも同じで、大きな画面のパソコンで見るときは「パソコン用の服（デザイン）」を着せ、画面が小さなスマホで見るときは「スマホ用の服」に着替えさせる役割を持っています。一つのファイルで複数の見た目を管理できるのが最大の特徴です。

2. ビューポートの設定を確認しよう

メディアクエリを書き始める前に、必ず確認しなければならない設定があります。それがビューポート（Viewport）の設定です。これは、スマホのブラウザに対して「このページをスマホの画面幅に合わせて表示してね」と伝えるための合図です。

これを忘れると、いくらメディアクエリを書いてもスマホ側で正しく認識されず、パソコン用の画面がただ小さく縮小されて表示されてしまいます。HTMLのヘッド（head）という部分に、以下の魔法の一行が入っているか確認しましょう。パソコンを初めて触る方は、まずはおまじないだと思って書き込んでみてください。


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

3. 基本的な書き方とブレイクポイント

メディアクエリを書くときは、@media という記述から始めます。その後に、どのくらいの幅でデザインを切り替えるかの数値を指定します。この切り替えるポイントのことをブレイクポイントと呼びます。

一般的には、スマホ向けの切り替えには「480ピクセル」や「768ピクセル」といった数値がよく使われます。例えば、「画面の幅が最大で768ピクセルまでのとき（つまりスマホやタブレットのとき）」という条件を書く場合は、max-width: 768px という書き方をします。これにより、小さな画面のときだけ特別な指示を出すことができるようになります。


<style>
    /* パソコン用の基本デザイン */
    .box {
        background-color: lightblue;
        padding: 50px;
        text-align: center;
    }

    /* スマホ用のデザイン（画面幅が768px以下のとき） */
    @media (max-width: 768px) {
        .box {
            background-color: lightcoral;
            padding: 20px;
        }
    }
</style>

<div class="box">
    画面を小さくすると色が変わるよ！
</div>

ブラウザ表示

4. 文字サイズをスマホ向けに調整する手順

既存のレイアウトをスマホ対応させる際、真っ先に調整したいのが文字の大きさ（font-size）です。パソコンで見るとちょうど良い大きな見出しも、スマホの狭い画面では改行が多くなりすぎて読みづらくなってしまいます。

手順としては、まずパソコン用の通常のCSSの下にメディアクエリの枠組みを作ります。その枠の中に、見出し（h1など）のタグ名と、スマホで表示させたい新しい文字サイズを書き込みます。これで、スマホで見たときだけ文字を少し小さくして、スッキリと読みやすい画面にすることができます。プログラミングでは、後から書いた命令が優先されるというルールがあるため、メディアクエリは必ず元のデザインの記述よりも下に書くのがコツです。


<style>
    h2 {
        font-size: 40px;
        color: #333;
    }

    @media (max-width: 480px) {
        h2 {
            font-size: 24px;
        }
    }
</style>

<h2>スマホで見ると小さくなる見出し</h2>

ブラウザ表示

5. 横並びのレイアウトを縦並びにする

パソコン向けのサイトでは、画像と文章を左右に並べる横並びレイアウトがよく使われます。しかし、スマホの細長い画面で無理に横に並べると、一つ一つの要素が細長くなってしまい、非常に見苦しくなります。これを解決するのがメディアクエリを使った縦並びへの変更です。

現在主流の「フレックスボックス（flex）」という機能を使っている場合、メディアクエリの中で flex-direction: column; という命令を追加するだけで、横に並んでいた要素が積み木のように縦に並び変わります。これにより、スマホユーザーは指一本で上下にスクロールするだけで、快適にコンテンツを読み進めることができるようになります。画像の幅も「100パーセント」に指定し直すと、画面いっぱいに表示されてさらに見やすくなります。


<style>
    .container {
        display: flex;
        gap: 10px;
    }
    .item {
        flex: 1;
        background: #f0f0f0;
        padding: 10px;
    }

    @media (max-width: 600px) {
        .container {
            flex-direction: column;
        }
    }
</style>

<div class="container">
    <div class="item">
        <img src="/img/sample150-100.jpg" style="width:100%">
        <p>項目1の説明です。</p>
    </div>
    <div class="item">
        <img src="/img/sample120-120.jpg" style="width:100%">
        <p>項目2の説明です。</p>
    </div>
</div>

ブラウザ表示

6. 不要な要素をスマホで非表示にするテクニック

パソコンでは賑やかで良い装飾や大きなサイドメニューも、スマホでは邪魔になってしまうことがあります。そんなときは、メディアクエリを使って特定の要素を非表示（隠す）にすることも検討しましょう。

使う命令は display: none; です。これをメディアクエリの中に書くことで、「スマホのときだけこのバナーは出さない」といった細かな調整が可能になります。画面の面積が限られているスマホでは、情報を詰め込みすぎず、本当に必要なものだけを見せる引き算のデザインが重要です。パソコンを使い始めたばかりの方は、消す勇気を持つことも大切だと覚えておいてください。

7. メディアクエリを追加する場所のルール

メディアクエリをどこに書けばいいのか迷う初心者の方は多いですが、基本的にはCSSファイルの最後にまとめて書くのが最も安全です。CSSには「下にある命令ほど優先される」という特性があります。そのため、基本のデザインを上に書き、その後に条件付きのデザイン（メディアクエリ）を書くことで、スマホのときだけ命令を上書きさせることができます。

ファイルが大きくなってくると管理が大変になりますが、まずは一つのファイルの中で、下へ下へと付け足していくスタイルで練習してみましょう。もし複数のメディアクエリを使いたい場合は、例えば「タブレット用」を先に書き、その次に「スマホ用」を書くといったように、画面が小さくなる順番で並べると頭の中を整理しやすくなります。

8. 既存のコードを壊さないためのコツ

すでに完成しているレイアウトに手を入れるのは怖いものですよね。失敗してパソコン表示まで崩れてしまわないか不安になるのは、初心者なら当然のことです。そこで役立つのが検証ツール（ブラウザのデベロッパーツール）です。

Google Chromeなどのブラウザには、キーボードの「F12」キーを押すと出てくる特別な画面があります。これを使うと、実際のファイルを書き換える前に、ブラウザ上で仮のデザインを試すことができます。スマホの画面サイズをシミュレーションしながら、「ここを20ピクセルにしたらどうなるかな？」と試行錯誤できるのです。既存のレイアウトをいじるときは、いきなりファイルを保存せず、まずはこのツールで変化を確認する癖をつけましょう。

9. 余白の調整でスマホサイトの質を上げる

意外と忘れがちなのが余白（marginやpadding）の調整です。パソコンではゆったりとした大きな余白が高級感を演出しますが、スマホで同じ余白を維持すると、肝心のコンテンツが真ん中に細長く追いやられてしまいます。画面が狭い分、左右の余白を少し詰めるだけでも、表示できる情報の量は格段に増えます。

メディアクエリの中で、外側の余白（margin）や内側の余白（padding）を「10ピクセル」程度に小さく設定し直してみてください。これだけで、一気に「スマホ専用に作られたサイト」のようなプロっぽい仕上がりになります。こうした小さな積み重ねが、利用者にとっての使いやすさ（ユーザー体験）を向上させる鍵となります。

10. メディアクエリの動作確認方法

最後に、作成したメディアクエリが正しく動いているか確認する方法をお伝えします。一番簡単なのは、パソコンのブラウザの角をマウスで掴んで、横幅をグーッと狭めていく方法です。ある一定の幅（設定したブレイクポイント）になった瞬間に、パッと色が変わったりレイアウトが縦に並んだりすれば大成功です！

もし変わらない場合は、ピリオドの打ち忘れがないか、カッコ { } の閉じ忘れがないか、そして「2. ビューポートの設定」を忘れていないかを順番にチェックしましょう。プログラミングの世界では、たった一文字のミスで動かなくなることがよくありますが、それは失敗ではなく発見です。根気よく向き合えば、必ず理想通りのレスポンシブサイトが完成します。

2026年最新スキルアップ・実践セミナー