メディアクエリの基礎｜@mediaの書き方・ブレークポイント・モバイルファースト

同じWebページなのに、スマートフォンでは1列、パソコンでは2列や3列にきれいに並び替わる。こうした「画面に合わせて見た目が変わる」レスポンシブデザインを支えているのがメディアクエリです。一見むずかしそうに見えますが、仕組みは「ある条件のときだけこのCSSを使う」という単純なルールにすぎません。本記事では、メディアクエリとは何か、どう書くのか、そしてブレークポイントやモバイルファーストといった実践的な考え方までを順に解説します。

メディアクエリとレスポンシブの基礎

メディアクエリ（Media Query）とは、CSSで「画面の幅」「向き」「解像度」などの条件を判定し、その条件を満たすときだけ特定のスタイルを適用する仕組みです。これを使うことで、1つのHTMLとCSSのまま、スマートフォン・タブレット・パソコンといった多様な画面サイズに対応できます。これがレスポンシブデザインの中心的な手法です。

かつては「PC用サイト」と「スマホ用サイト」を別々に作ることもありましたが、管理の手間やSEOの観点から、現在は1つのページを画面幅に応じて変化させる方法が主流です。メディアクエリは、その「変化の境目」をCSSで宣言するための言語だと考えると分かりやすいでしょう。

レスポンシブ対応では、固定のピクセル幅ではなく、画面に対する相対的な値を扱う場面が多くなります。たとえばpxをvw（ビューポート幅の割合）に置き換えたいときは、px→vw変換ツールで目安の数値をすぐに確認できます。

@mediaの書き方と基本構文

メディアクエリは@mediaというルールで書きます。もっとも基本的な形は次の通りです。

@media (max-width: 768px) { /* ここに条件を満たすときのCSS */ }

この例は「画面幅が768px以下のとき」という意味で、波カッコの中に書いたスタイルは、その条件を満たすときだけ適用されます。条件部分はカッコで囲み、いくつかの要素を組み合わせて指定できます。

• メディアタイプ：screen（画面）やprint（印刷）など。省略するとall（すべて）扱いになります。
• メディア特性：min-width、max-width、orientation（縦長か横長か）などの判定条件です。
• 論理演算子：andで条件を重ね、commaで「いずれか」を表します。

たとえば「画面用かつ幅が600px以上1024px以下」のように範囲を指定したい場合は、@media screen and (min-width: 600px) and (max-width: 1024px)のように書きます。条件を満たさないときは、その@media内のスタイルは単に無視され、通常のCSSが使われます。

min-widthとmax-widthの違い

メディアクエリでもっともよく使うのがmin-widthとmax-widthです。名前は似ていますが、向きが逆なので混同しないよう整理しておきましょう。

min-widthは「指定した値以上の画面幅」で発動します。たとえばmin-width: 768pxなら、768px以上のときにスタイルが効きます。小さな画面を基準にして、画面が広くなるほど装飾を足していく書き方と相性が良く、後述するモバイルファーストの基本になります。

max-widthは逆に「指定した値以下の画面幅」で発動します。max-width: 768pxなら、768px以下のときに効きます。PC向けのデザインを基準に作り、画面が狭くなったらレイアウトを崩さないように調整していく、デスクトップファーストの書き方でよく使われます。どちらが正解ということはなく、設計方針に合わせて一貫して使い分けることが大切です。

ブレークポイントの考え方

レイアウトを切り替える境目となる画面幅をブレークポイントと呼びます。たとえば「600pxを境にメニューを横並びから縦並びに変える」といった場合の、その600pxがブレークポイントです。

ブレークポイントを決めるとき、初心者がやりがちなのが「iPhoneは375px、iPadは768px…」と特定の端末の画面サイズに合わせて細かく刻んでしまうことです。しかし端末は次々と新しいものが出るため、機種に合わせ続けるのは現実的ではありません。大切なのは端末名ではなく「コンテンツが見づらくなる幅」で区切るという発想です。

• 文章の1行が長くなりすぎて読みにくくなったら、最大幅を設ける。
• 横並びのカードが窮屈になったら、列数を減らすブレークポイントを置く。
• むやみに数を増やさず、まずは2〜3個程度に絞ると管理しやすい。

よく使われる目安としては、スマホとタブレットの境目あたり（600〜768px前後）、タブレットとPCの境目あたり（1024px前後）などがありますが、これらはあくまで出発点です。実際には自分のデザインを少しずつブラウザ幅を変えながら確認し、崩れる手前にブレークポイントを置くのが王道です。

モバイルファーストとviewport

モバイルファーストとは、まず狭いスマートフォン画面のレイアウトを基本（土台）として作り、min-widthのメディアクエリで「画面が広いときの装飾」を足していく設計手法です。スマホ利用者が多数を占める現在では、もっとも推奨される進め方の一つです。

/* 基本：スマホ向け。1列で表示 */ .cards { display: block; } /* 画面が広いとき：横並びにする */ @media (min-width: 768px) { .cards { display: flex; } }

このように書くと、土台のCSSがすべての画面に共通で適用され、広い画面でだけ追加のスタイルが上書きされます。狭い画面では不要な装飾が読み込まれにくく、コードもシンプルに保ちやすいのが利点です。

そして、レスポンシブで絶対に忘れてはいけないのがviewportメタタグです。HTMLの<head>内に次の1行を入れておきます。

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

この指定がないと、スマートフォンはPC向けの広い画面を縮小表示しようとし、文字が極端に小さくなったり、メディアクエリが意図通りに働かなかったりします。width=device-widthは「画面の実際の幅に合わせる」、initial-scale=1は「初期の拡大率を等倍にする」という意味で、レスポンシブの大前提となる設定です。

相対単位・clampとの組み合わせ

メディアクエリはレイアウトを「段階的に」切り替える仕組みですが、文字サイズや余白までブレークポイントごとに細かく指定すると、コードが膨らみがちです。そこで近年は、相対単位やclamp()関数と組み合わせ、ブレークポイントの数を減らす手法が広がっています。

相対単位とは、固定のpxではなく、親要素や画面サイズを基準にした単位のことです。代表的なものに、ルート要素の文字サイズ基準のrem、画面幅基準のvw（ビューポート幅の1%）などがあります。pxとvwの対応関係をすぐ確かめたいときは、px→vw変換ツールを使うと変換の手間が省けます。

さらに強力なのがclamp()です。clamp(最小値, 可変値, 最大値)と書くことで、「基本は画面幅に応じてなめらかに変化させつつ、小さくなりすぎず大きくなりすぎない」という挙動を1行で実現できます。たとえば見出しのサイズをfont-size: clamp(1.5rem, 4vw, 3rem)とすれば、狭い画面でも広い画面でも自動的に適切なサイズに収まり、メディアクエリでサイズを何段階も切り替える必要がなくなります。こうしたclampの値は、CSS clamp生成ツールで最小・最大サイズと対象の画面幅を入力すれば、すぐに最適な式を作成できます。

まとめると、メディアクエリで「レイアウトの大きな切り替え」を担当し、clampや相対単位で「サイズのなめらかな調整」を担当する、という役割分担が現代的なレスポンシブの基本です。まずはCSS clamp生成ツールとpx→vw変換ツールで具体的な数値を触りながら、@mediaの条件と組み合わせて挙動を確かめてみてください。手を動かすことが理解への近道です。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は変化するため、実装にあたっては最新の公式情報を確認のうえ判断してください。