メディアクエリとは？初心者でもわかるレスポンシブデザインの基本

メディアクエリとは？基本構文と使い方を解説

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

生徒

「パソコンで見ると綺麗なのに、スマホで見ると文字や画像がバラバラになっちゃいます。どうすればいいですか？」

先生

「それは『メディアクエリ』という便利な道具を使うことで解決できますよ。画面の大きさに合わせてデザインを切り替える仕組みです。」

生徒

「画面の大きさで自動的に変わるんですか？難しそうですが、私でも使えますか？」

先生

「大丈夫です。基本の書き方さえ覚えれば、プログラミングが初めての方でも簡単に設定できます。一緒に見ていきましょう！」

1. メディアクエリの役割と重要性とは？

メディアクエリとは、Webサイトを表示する画面の横幅（デバイスのサイズ）に応じて、適用するCSSの内容を切り替えるための命令です。現代では、Webサイトを見る道具はパソコンだけでなく、スマートフォンやタブレットなど多岐にわたります。パソコンのような大きな画面で見やすいレイアウトが、小さなスマートフォンの画面でも見やすいとは限りません。

例えば、パソコンでは横に並んでいたボタンが、スマホでは縦に並んだ方が押しやすいですよね。このように、閲覧する環境に合わせて見た目を最適化することを「レスポンシブデザイン」と呼び、メディアクエリはその心臓部となる非常に重要な技術です。これを使えるようになると、一つのHTMLファイルだけで、どんな端末でも美しく表示されるホームページが作れるようになります。

2. メディアクエリの基本構文を覚えよう

メディアクエリを書くときは、CSSの中に特殊な記号を使って「ここからは画面が狭いとき用の設定ですよ」と教えてあげる必要があります。最もよく使われるのが「@media」から始まる書き方です。専門用語で「アットルール」などと呼びますが、最初は「特別な合図」だと思っておけば問題ありません。

具体的には、「@media (max-width: 〇〇px) { ... }」という書き方をします。このカッコの中にある「max-width（マックス・ウィズ）」は「最大幅」という意味で、「横幅が最大でも〇〇ピクセルまでのとき」という条件を指定しています。つまり、画面がその数字より小さいときにだけ、中身の命令が実行される仕組みです。初心者の方は、まずこの「条件付きの箱」を作るイメージを持つことから始めましょう。


<style>
/* 普段は黒い文字 */
p {
    color: black;
    font-size: 20px;
}

/* 画面の幅が600px以下のときだけ適用されるルール */
@media (max-width: 600px) {
    p {
        color: red;
        font-size: 16px;
    }
}
</style>

<p>画面を狭くすると、文字の色が赤に変わります。</p>

ブラウザ表示

3. ブレイクポイントの決め方と目安

メディアクエリでデザインを切り替える瞬間の数値のことを「ブレイクポイント」と呼びます。直訳すると「壊れる点」という意味ですが、Web制作では「レイアウトを切り替える分岐点」という意味で使われます。では、一体何ピクセルに設定すれば良いのでしょうか？

一般的には、スマートフォンの横幅を意識した「480px」や、タブレットを意識した「768px」などがよく使われます。しかし、最近はスマートフォンの画面も大きくなっているため、細かく指定しすぎると管理が大変になります。まずは「スマホ用（767px以下）」と「パソコン用（768px以上）」の二段階で考えるのが、初心者の方にはおすすめです。自分のスマートフォンで実際にサイトを見て、文字が小さすぎたり崩れたりしたタイミングをブレイクポイントにするという、感覚的な決め方でも最初は十分です。

4. 画像のサイズを画面に合わせて調整する

スマホ対応で一番困るのが、画像の扱いです。パソコン用の大きな画像をそのまま表示すると、スマホの画面を突き抜けて横にはみ出してしまいます。これではスクロールがしづらくて読者が離れてしまいます。メディアクエリを使えば、スマホのときだけ画像のサイズを調整することが可能です。

例えば、パソコンでは画像の横幅を「500px」という固定値にしていても、メディアクエリを使ってスマホのときだけ「横幅を100%にする」と指定すれば、画面いっぱいに画像がピタッと収まります。パーセント（%）という単位は、親要素（画像が入っている箱）に対してどれくらいの割合かを示すもので、画面サイズがバラバラなスマホ対応には欠かせない単位です。このように「固定された数字」から「柔軟な割合」に変えるのがコツです。


<style>
.responsive-img {
    width: 300px; /* パソコンでは300pxに固定 */
}

@media (max-width: 480px) {
    .responsive-img {
        width: 100%; /* スマホでは画面の幅いっぱいに広がる */
    }
}
</style>

<img src='/img/sample150-100.jpg' class='responsive-img' alt='スマホで大きさが変わる画像'>
<p>画面の幅を480px以下にすると、画像が横いっぱいに広がります。</p>

ブラウザ表示

5. モバイルファーストという考え方

メディアクエリを学ぶ際によく耳にするのが「モバイルファースト」という言葉です。これは、まず最初にスマートフォンのデザインを作り、後からメディアクエリを使ってパソコン用の大きな画面向けの設定を追加していく手法のことです。昔はパソコン用を先に作っていましたが、今はスマホでサイトを見る人の方が多いため、この考え方が主流になっています。

モバイルファーストで書く場合は、「min-width（最小幅）」を使います。これは「画面が〇〇ピクセル以上のときに適用する」という命令になります。スマホ用のシンプルな設定を基本として書き、画面が広くなったときだけ豪華な装飾や横並びのレイアウトを付け足していくイメージです。この方がCSSのコードがスッキリまとまりやすく、初心者にとっても理解しやすい構造になります。

6. 余白の調整でスマホの読みやすさを改善

パソコンでは丁度いい余白（マージンやパディング）も、スマホで見ると余白が広すぎて、内容がスカスカに見えてしまうことがあります。逆に、文字が画面の端ギリギリまで詰まっていると、非常に読みづらくなってしまいます。メディアクエリは、こうした細かな余白の微調整にも威力を発揮します。

画面が狭いスマホでは左右の余白を少し詰め、その代わりに行間を少し広げてあげるだけで、驚くほど読みやすさが向上します。プログラミング未経験の方は、まず「スマホで見たときに自分が読みやすいか？」を基準に、余白の数値を少しずつ変えて試してみましょう。文字を中央に寄せる（text-align: center;）という命令も、スマホではよく使われるテクニックの一つです。小さな工夫の積み重ねが、プロっぽい仕上がりへの近道です。


<style>
.container {
    padding: 50px; /* パソコンではゆったりした余白 */
    background-color: #f0f0f0;
}

@media (max-width: 600px) {
    .container {
        padding: 10px; /* スマホでは画面を有効活用するために余白を狭くする */
        text-align: center; /* スマホでは文字を中央寄せにする */
    }
}
</style>

<div class='container'>
    <p>スマホで見ると余白が狭くなり、中央に寄ります。</p>
</div>

ブラウザ表示

7. 背景画像を表示させない設定

パソコンでは綺麗な背景画像を表示させていても、スマホでは画面が縦長になるため、画像が変な場所で切れてしまったり、読み込み速度が遅くなってしまったりすることがあります。そんなときは、メディアクエリを使って「スマホのときだけ背景を表示しない」という設定にすることもできます。

「display: none;（ディスプレイ・ノン）」という命令を使うと、指定した要素を画面から消すことができます。これは、スマホで不要な情報を隠したり、逆にスマホ専用のメニューボタンを表示させたりするときに非常によく使われる命令です。画面の大きさに合わせて「出すもの」と「隠すもの」を自由に操れるようになると、Webデザインの幅が一気に広がります。最初は難しく考えず、パズルのように要素を組み替える感覚で楽しんでみてください。

8. 書き方のミスを防ぐチェックポイント

メディアクエリを書いても上手く動かないとき、初心者が一番やってしまいがちなミスは「波カッコ（ { } ）の閉じ忘れ」です。メディアクエリの中にさらに通常のCSSを書くため、カッコが二重になり、どこで終わりなのか分からなくなってしまうのです。これを防ぐには、コードを書くときに「段落（インデント）」をしっかりつけて、見た目を整理することが大切です。

また、HTMLの最初の方に「ビューポート（viewport）」という設定が書いてあるかどうかも確認しましょう。これがないと、スマホで見たときにメディアクエリが正しく機能せず、パソコンの画面をただ縮小しただけの表示になってしまいます。難しい呪文のように見えますが、スマホ対応には必須の魔法の一行です。こうした小さなポイントを一つずつクリアしていけば、あなたも立派なレスポンシブデザインの使い手になれますよ。


<style>
/* パソコン用の設定 */
.box {
    background-color: lightblue;
    height: 100px;
}

/* メディアクエリのカッコを閉じ忘れないように！ */
@media (max-width: 500px) {
    .box {
        background-color: lightcoral;
    }
} /* ←ここの閉じ忘れに注意 */
</style>

<div class='box'>
    この箱は、500px以下で色が青から赤に変わります。
</div>

ブラウザ表示

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