CSSメディアクエリとブレイクポイントを完全解説！レスポンシブデザインの基本

メディアクエリでブレイクポイントを設定する方法

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

生徒

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

先生

「それは『メディアクエリ』を使って、画面サイズごとにデザインを切り替える設定をすれば解決しますよ。」

生徒

「画面の大きさで命令を変えることができるんですね！その境目のことは何て呼ぶんですか？」

先生

「その切り替え地点のことを『ブレイクポイント』と言います。まずはその仕組みから学んでいきましょう！」

1. メディアクエリとブレイクポイントの基本を知ろう

Webサイトを制作する際、避けて通れないのが「レスポンシブデザイン」です。これは、パソコン、タブレット、スマートフォンといった異なる画面サイズ（デバイス）に合わせて、見やすいレイアウトに自動調整する仕組みのことです。この調整を実現するために欠かせないのが「メディアクエリ」というCSSの機能です。

メディアクエリとは、一言で言えば「もし画面の幅が〇〇だったら、このデザインを適用してね」という条件付きの命令です。そして、その条件となる「画面幅の境界線」のことを「ブレイクポイント」と呼びます。例えば、「画面の横幅が768px以下になったらスマホ用の見た目に変える」という時の、768pxがブレイクポイントにあたります。パソコンを触ったことがない方でも、「テレビの画面」と「携帯の画面」でポスターの配置を変えるようなイメージだと考えれば分かりやすいでしょう。

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

メディアクエリを書くときは、CSSの中に「@media」という記号を使います。これを使うことで、特定の範囲内だけで有効なCSSルールを作ることができます。基本的には、通常のCSSを書いた後に、メディアクエリ用の記述を追加していく形になります。初心者の方は、まず「@media (条件) { ここに指示を書く }」という形を丸暗記してしまいましょう。

条件の部分には「max-width（マックス・ウィズ）」や「min-width（ミン・ウィズ）」という言葉を使います。max-widthは「最大でも〇〇pxまで（＝〇〇px以下）」、min-widthは「最小でも〇〇pxから（＝〇〇px以上）」という意味になります。スマホ向けのデザインを書きたいときは、一般的に画面幅が狭い場合を指すので、max-widthを使うことが多いです。


<style>
/* 共通のスタイル（最初はこれ） */
.info-box {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

/* 画面の幅が480px以下のとき（スマホなど）だけ適用 */
@media (max-width: 480px) {
    .info-box {
        background-color: lightpink;
        font-size: 12px;
    }
}
</style>

<div class="info-box">
    画面を狭くすると背景がピンク色に変わるよ！
</div>

ブラウザ表示

3. ブレイクポイントの決め方と一般的な数値

「ブレイクポイントは何ピクセルに設定すればいいの？」というのは、初心者の方が一番悩むポイントです。実は、これには「絶対的な正解」はありません。なぜなら、世界中には星の数ほど異なる画面サイズのスマートフォンやタブレットが存在するからです。しかし、多くのプロが採用している「よく使われる数値」というものは存在します。

一般的には、スマホ向けには「480px以下」、タブレット向けには「768pxから1024pxの間」、パソコン向けには「1025px以上」といった区切り方がよく使われます。まずは、自分のサイトがどんな人に見られるかを想像して、代表的なサイズで切り替えてみることから始めましょう。最近では、あまり細かく分けすぎず、「スマホか、それ以外か」という2段階だけで管理するシンプルな方法も人気があります。

4. min-widthを使ったモバイルファーストの考え方

最近のWeb制作では「モバイルファースト」という手法が推奨されています。これは、まず「スマホ用のデザイン」を基本として作り、画面が広くなったとき（パソコンで見るとき）の指示をメディアクエリで付け足していく考え方です。この場合は「min-width」を使います。

なぜこの方法が良いかというと、スマホの画面はシンプルなので、基本のコードもシンプルになりやすいからです。そこから画面の広さに合わせて「もっと横に並べよう」「余白を広げよう」と肉付けしていく方が、管理が楽になります。プログラミングに慣れていない方こそ、この「積み上げ方式」で考えていくと、CSSの記述がスッキリと整理されるようになります。


<style>
/* 基本はスマホ用（1列で並ぶ） */
.card-list {
    display: block;
    background-color: #f0f0f0;
}
.card-item {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
}

/* 画面が768px以上のとき（パソコンなど）は横並びにする */
@media (min-width: 768px) {
    .card-list {
        display: flex; /* 横並びに変身！ */
        justify-content: space-around;
    }
}
</style>

<div class="card-list">
    <div class="card-item">カード 1</div>
    <div class="card-item">カード 2</div>
    <div class="card-item">カード 3</div>
</div>

ブラウザ表示

5. 複数のブレイクポイントで段階的に変化させる

画面の大きさが変わるにつれて、デザインを2段階、3段階と細かく調整したい場合もあります。そのときは、複数のメディアクエリを記述します。例えば「スマホでは縦1列」「タブレットでは横2列」「パソコンでは横4列」という風に、段階を追って変化させることができます。

この時のコツは、数値を小さい順、あるいは大きい順に並べて書くことです。バラバラに書いてしまうと、どの命令が優先されるか分からなくなり、原因不明の表示崩れにつながることがあります。階段を一段ずつ登るように、画面幅の変化に合わせてデザインを丁寧に作り込んでいくのが、美しいサイトを作るための秘訣です。以下の例で、画面幅を動かしながら3段階の変化を確認してみてください。


<style>
.step-box {
    padding: 20px;
    text-align: center;
    color: white;
}

/* 1. スマホ向け（基本：赤） */
.step-box { background-color: red; }

/* 2. タブレット向け（600px以上：青） */
@media (min-width: 600px) {
    .step-box { background-color: blue; }
}

/* 3. パソコン向け（1000px以上：緑） */
@media (min-width: 1000px) {
    .step-box { background-color: green; }
}
</style>

<div class="step-box">
    画面幅に応じて「赤 → 青 → 緑」と変化します！
</div>

ブラウザ表示

6. 画像のサイズもブレイクポイントで切り替えよう

文字の色や並び方だけでなく、画像の表示方法もブレイクポイントで調整することが非常に重要です。パソコンの大きな画面で見せたい迫力ある横長の写真も、スマホの縦長画面では何が写っているか分からなくなってしまうことがあります。このような場合もメディアクエリの出番です。

例えば、スマホのときだけ画像の幅を「100%」にして画面いっぱいに広げたり、不要な装飾画像を隠して読み込み速度を上げたりすることができます。ユーザーの使い勝手を一番に考えて、「このサイズの画面で見ている人は、何を一番見たいだろう？」と想像しながらブレイクポイントを設定していきましょう。細かな配慮が、訪問者に喜ばれるサイト作りの第一歩です。


<style>
.responsive-img {
    width: 200px; /* パソコンでは小さめに表示 */
    height: auto;
}

@media (max-width: 500px) {
    .responsive-img {
        width: 100%; /* スマホでは画面いっぱいに表示 */
        border: 5px solid #333;
    }
}
</style>

<div style="text-align:center;">
    <img src="/img/sample150-100.jpg" class="responsive-img" alt="サンプル画像">
    <p>500pxを境に画像の大きさが変わります。</p>
</div>

ブラウザ表示

7. ブラウザの検証ツールでブレイクポイントをテストする

メディアクエリを書き終えたら、実際に正しく動くかテストをしましょう。パソコンの画面をマウスで引き伸ばしたり縮めたりしても確認できますが、もっと正確に確認する方法があります。それがブラウザ（Google Chromeなど）に搭載されている「検証ツール（デベロッパーツール）」です。

画面を右クリックして「検証」を選ぶと、スマートフォンのようなアイコンが表示されます。これをクリックすると、iPhoneやPixelといった特定の機種で見た時の表示をシミュレーションできます。また、画面上部のバーをドラッグして、自分が設定したブレイクポイント（〇〇px）の瞬間にデザインがパッと切り替わるかどうかを数値で確認できます。このツールを使いこなすことが、一人前のWeb制作への近道です。

8. メディアクエリを使う時の注意点とコツ

最後に、メディアクエリを使う時の大事な約束事を一つお伝えします。それは、HTMLの「head」という部分に「ビューポート（viewport）」の設定が正しく入っているか確認することです。これが抜けていると、いくらCSSでメディアクエリを頑張って書いても、スマホ側が「自分はスマホだよ！」と正しく認識してくれず、デザインが反映されないことがあります。

最近のテンプレートを使っていれば最初から入っていることが多いですが、「コードを書いたのにスマホで変わらない！」という時は、まずここを疑ってみてください。プログラミング未経験の方は難しく感じるかもしれませんが、こうした一つひとつの「おまじない」を積み重ねることで、どんな環境でも美しく表示される、使い心地の良いWebサイトが完成していきます。焦らず少しずつ挑戦していきましょう！

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