ビューポートとメディアクエリ

前回、レスポンシブデザインの全体像は分かりました。でも実際に画面幅で切り替えるには、何を使うんですか？

そこで登場するのが viewport と media query だよ。viewportは「ブラウザがどんな幅の画面としてページを見るか」、media queryは「その幅に応じてどのCSSを使うか」を決める仕組みなんだ。

2つがセットなんですね。なんとなく聞いたことはありますが、まだ結びついていません。

今日はそこを丁寧につなげよう。最初に viewport を整えて、その上で media query で見た目を変える。この順番で考えると整理しやすいよ。

viewportとは何か

viewport は、ブラウザがページを表示するときの「見える範囲」や「表示の基準になる幅」のことです。スマホでもPCでも同じHTMLを開けますが、ブラウザはまず「このページをどの幅として扱うか」を決めます。

スマホ向けのページで viewport の設定が適切でないと、ブラウザがPC向けページのように縮小して表示してしまい、文字が小さく見えることがあります。

よく使うviewport設定

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

この設定の意味は次の通りです。

viewport を適切に設定すると、スマホでも「スマホの幅らしい見え方」でCSSが効きやすくなります。media query もこの前提があると、狙ったとおりに切り替わりやすくなります。

viewport を忘れるとどう見えるか

viewport を入れ忘れると、CSS がまったく効かないわけではありません。ただし、ブラウザが「PC向けの広いページを縮小して見せよう」とするので、次のような違和感が出やすくなります。

まずは meta name="viewport" を確認してから media query を調整する、という順番で見ると切り分けしやすくなります。

media queryでCSSを切り替える

media query は、「もし画面幅がこの条件なら、このCSSを使う」という書き方です。レスポンシブ対応で最もよく使うのは、画面幅による条件分岐です。

基本構文

@media (max-width: 768px) {
    .box {
        padding: 16px;
    }
}

この例では、画面幅が768px以下のときだけ .box に padding: 16px; が適用されます。

よく使う考え方

つまり、普段のCSSに「この幅なら追加でこうする」を足していく感じですね。

そういうこと。最初から全部分岐させるより、基本の見た目を作ってから必要な変化だけ追加するほうが分かりやすいよ。

画面幅で切り替える実例

ここでは、PCでは横並び、スマホでは縦並びに変える例を見ます。レスポンシブ対応ではとてもよく出てくるパターンです。

<section class="news-list">
    <article class="news-card">新着記事</article>
    <article class="news-card">人気記事</article>
    <article class="news-card">おすすめ記事</article>
</section>

.news-list {
    display: flex;
    gap: 16px;
}

.news-card {
    flex: 1;
    padding: 20px;
    border-radius: 12px;
    background: #ecfeff;
}

@media (max-width: 700px) {
    .news-list {
        flex-direction: column;
    }
}

※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。

PCサイズでは .news-list が横並びになり、狭い画面では flex-direction: column; に切り替わって縦積みになります。こうした「並び方の切り替え」は、レスポンシブ対応の定番です。

media query が効かないときの見方

レスポンシブ実装では、「書いたのに切り替わらない」と感じることがあります。そのときは次の順で確認すると原因を見つけやすいです。

どの幅で切り替えるか

ここで大事なのは、決め打ちの数字を暗記することではなく、レイアウトが苦しくなる幅を見つけることです。

min-widthとmax-widthの考え方

media query では max-width と min-width のどちらもよく使います。

max-width

「この幅以下なら切り替える」という書き方です。広い画面向けの見た目を基本にして、狭い画面で調整を加えるときに分かりやすいです。

min-width

「この幅以上なら切り替える」という書き方です。スマホ向けのシンプルな見た目を先に作って、広い画面で機能や列数を増やすときに向いています。

/* 基本の見た目 */
.container {
    padding: 16px;
}

/* 768px以下で調整 */
@media (max-width: 768px) {
    .container {
        padding: 12px;
    }
}

/* 900px以上で調整 */
@media (min-width: 900px) {
    .container {
        padding: 32px;
    }
}

この段階では、max-width は「狭くなったときの調整」、min-width は「広くなったときの追加調整」と読み分けられれば十分です。モバイルファーストという設計の考え方は、次の実践記事でまとめて扱います。

理解度チェッククイズ

まとめ

viewportは表示の土台で、media queryはその上で見た目を切り替える仕組みなんですね。

max-width と min-width の違いも整理できました。基本のCSSを先に書いて、必要な変化だけ追加するのが分かりやすいです。

その理解で進めれば大丈夫。次は、相対単位や max-width を使って、そもそも崩れにくいサイズ指定を作る方法を見ていこう。切り替えだけでなく、自然に伸び縮みする設計が重要になるよ。