メディアクエリ(Media Queries)完全ガイド！初心者向けのスマホ対応の教科書

メディアクエリ（@media）とは？仕組みと歴史

まずは、技術の根本を理解しましょう。
メディアクエリとは、W3C（Web標準化団体）によって策定されたCSS3の仕様の一つです。
一言で言えば、「閲覧環境（画面幅、解像度、向き、デバイスの種類など）に応じて、適用するCSSを自動的に切り替える条件分岐の仕組み」です。

Before/Afterで見る進化：モバイルインターネットの歴史

【黎明期：iモードとm.ドメイン（〜2010年頃）】
かつてのWeb制作現場は、今とは比較にならないほど非効率でした。
日本ではNTTドコモの「iモード」が爆発的に普及しましたが、これはPC向けのHTMLとは異なる「Compact HTML」という規格でした。
Web担当者は、「PC用サイト（www.example.com）」と「ガラケー用サイト（m.example.com）」を完全に別物として制作・管理し、サーバー側でユーザーエージェント（UA）を判別して振り分けていました。
これは「管理工数が2倍以上になる」「URLが分散してSEO評価が下がる」「デバイス判定ミスが頻発する」という三重苦でした。

【現代：レスポンシブWebデザイン（RWD）の登場】
2010年、Ethan Marcotte氏が「Responsive Web Design」という概念を提唱しました。
これは、「1つのHTMLファイル（単一URL）」に対し、CSSのメディアクエリを使って見た目だけを柔軟に変化させるという革命的なアイデアでした。
iPhoneやAndroidの登場、そしてiPadのようなタブレット端末の普及により、デバイスの画面サイズは無限に多様化しました。
これら全てに専用サイトを作るのは不可能です。だからこそ、「どんなサイズでも伸縮して対応できる」メディアクエリが世界標準となったのです。

メリット・デメリットと「レスポンシブ」の重要性

「とりあえずメディアクエリを使えばいい」という思考停止は危険です。
プロとして長所と短所を理解し、プロジェクトの要件に合わせて最適な設計を選べるようになりましょう。

3つのメリット

1. SEOに最強（Google推奨）：
   Googleは公式にレスポンシブWebデザインを推奨しています。URLが1つに統一されるため、被リンクの評価が分散せず、Googleのクローラー（bot）がサイトを巡回する効率も良くなるからです。「モバイルフレンドリーアップデート」以降、スマホ対応していないサイトは検索順位が下がるようになりました。
2. 運用・メンテナンス性の向上：
   「新しいiPhoneが出た」という時も、HTMLをいじる必要はありません。CSSのブレイクポイントを数行調整するだけで対応完了です。記事の更新も1回で済みます。
3. ユーザー体験（UX）の統一：
   外出先でスマホで見た記事を、帰宅後にPCで見直しても、同じ内容・同じURLでアクセスできます。これはブランディングの観点からも非常に重要です。

3つのデメリットと対策

1. コードの記述量が増え、CSSが肥大化する：
   PC用とスマホ用のスタイルを全て1つのファイルに書くため、記述管理が煩雑になりがちです。Sass（SCSS）のMixin機能などを使って効率的に管理する必要があります。
2. 読み込み速度への懸念（オーバーヘッド）：
   スマホで見ているのに、PC用の巨大な背景画像CSSや、PCでしか使わないJavaScriptライブラリを読み込んでしまう（オーバーヘッド）可能性があります。適切な記述や読み込み制御で回避可能です。
3. HTML構造の制約：
   「PCではヘッダーにある要素を、スマホではフッターに置きたい」場合、HTMLの順番自体を変えることはCSSだけではできません（FlexboxのorderプロパティやGridのarea指定である程度は可能ですが、読み上げ順序と見た目が乖離するためアクセシビリティ上の注意が必要です）。設計段階での緻密な計画性が求められます。

基本構文：書き方のルールを完全理解する

メディアクエリは「条件」と「中身」のセットで書きます。
基本的な文法をマスターしましょう。

/* 基本構文 */
@media メディアタイプ and (メディア特性) {
  /* 条件に一致した時だけ適用されるCSS */
  selector {
    property: value;
  }
}

1. メディアタイプ

• screen：PC、スマホ、タブレットなどのディスプレイ画面。通常はこれを使います。
• print：プリンターでの印刷時。「印刷時はインク節約のために背景色を白にする」「不要なナビゲーションや広告を消す」といった指定に使います。これ意外と重要です。
• all：すべてのデバイス（省略時のデフォルト）。
• speech：スクリーンリーダー（音声読み上げ）用。

2. メディア特性（条件）

• width / min-width / max-width：ビューポート（ブラウザの表示領域）の幅。最も使います。
• height：高さ。横画面スマホなどを判定する際に使います。
• orientation：画面の向き。portrait（縦）か landscape（横）か。「スマホを横にした時だけレイアウトを変える」といった場合に使います。

【重要】モダンな書き方（Range Syntax）

従来の min-width: 600px という書き方は、直感的ではありませんでした。
最新のCSS（Media Queries Level 4）では、数学の不等号を使った書き方がサポートされています。

/* 従来（〜599px） */
@media (max-width: 599px) { ... }

/* 最新（width < 600px）：こちらの方が直感的！ */
@media (width < 600px) { ... }

/* 範囲指定（600px〜1024px） */
/* 従来 */
@media (min-width: 600px) and (max-width: 1024px) { ... }

/* 最新：1行で書ける！ */
@media (600px <= width <= 1024px) { ... }

2026年現在、主要ブラウザ（Chrome, Safari, Edge, Firefox）の最新版はこれに対応しています。
IE対応が不要な現代のプロジェクトであれば、この新しい書き方を積極的に採用することでコードの可読性が劇的に向上します。

【実務編】2026年現在の推奨ブレイクポイント

「ブレイクポイント（デザインが切り替わる境界線）を何pxにするか？」
これはWeb制作における永遠のテーマですが、デバイスの多様化により「正解」は常に変化しています。
2026年のデバイス事情を考慮した、失敗しない「最適解」を提案します。

主要デバイスの解像度データ（2026年版）

• iPhone SE (第3世代): 375px（最小ライン）
• iPhone 16 / Pixel 9: 390px 〜 430px（標準スマホ）
• Foldable (開いた状態): 700px 〜 900px（正方形に近い）
• iPad / Tablet: 768px 〜 820px（縦持ち）
• iPad Pro 12.9: 1024px（横持ちはPC扱い）
• ノートPC: 1280px / 1366px / 1440px
• フルHDモニター: 1920px

【結論】3段階ブレイクポイント戦略

細かく分けすぎると管理不能になるため、以下の3つ（または4つ）に絞るのがベストプラクティスです。
BootstrapやTailwind CSSのデフォルト値とも近く、汎用性が高い設定です。

カテゴリ	ブレイクポイント	解説
1. スマホ （Base）	〜599px	基本スタイル（メディアクエリなし）として記述。 iPhoneの縦持ちを想定。1カラムレイアウト。
2. タブレット （md）	600px 〜	min-width: 600px iPad miniや大型スマホの横持ち。 ここで2カラムに切り替えることが多い。
3. PC / ラップトップ （lg）	1024px 〜	min-width: 1024px iPad Proや一般的なノートPC。 グローバルナビゲーションを展開し、サイドバーを表示。
4. ワイド画面 （xl）	1440px 〜	min-width: 1440px デスクトップモニター。 コンテンツ幅（container）の上限を固定し、余白を調整。

「モバイルファースト」vs「デスクトップファースト」

メディアクエリの書き順には2つの派閥がありますが、2026年現在は「モバイルファースト」一択です。

モバイルファースト（min-width）

スマホ用のCSSを「基本」として書き、画面が広がるにつれてPC用のスタイルを「足していく」手法です。

/* 基本：スマホ用（コード量が最も少ない） */
.box { width: 100%; }

/* 600px以上：タブレット用（差分のみ記述） */
@media (min-width: 600px) {
  .box { width: 50%; }
}

/* 1024px以上：PC用（さらに差分を記述） */
@media (min-width: 1024px) {
  .box { width: 33.3%; }
}

メリット：
スマホ用のコードがシンプルになり、レンダリング負荷が軽い（スマホのバッテリーやパケットに優しい）。
コードの打ち消し（display: none など）が発生しにくく、CSSが読みやすい。

デスクトップファースト（max-width）

PC用のCSSを基本とし、画面が狭くなるにつれてスマホ用に「上書き」していく手法です。
これは「PCサイトをスマホ対応させる」というリニューアル案件以外では推奨されません。
なぜなら、スマホユーザーに不要なPC用のコードを読み込ませることになり、表示速度の低下を招くからです。

コピペで使える！実践レイアウト・パターン集

現場で毎日使う、鉄板のコードパターンを紹介します。

1. Flexboxによるカラム切り替え

スマホは縦積み、PCは横並び。最も基本的なパターンです。

.container {
  display: flex;
  flex-direction: column; /* スマホ：縦並び */
  gap: 20px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; /* PC：横並び */
    flex-wrap: wrap;
  }
  .item {
    width: 48%; /* 2列 */
  }
}

2. Grid Layoutによる自由な配置

CSS Gridを使えば、さらに複雑なレイアウトも簡単です。

.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* スマホ：1列 */
  grid-template-areas: 
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: 200px 1fr 200px; /* PC：3カラム */
    grid-template-areas: 
      "header header header"
      "sidebar main ad"
      "footer footer footer";
  }
}

3. clamp()関数を使った流体タイポグラフィ

文字サイズをメディアクエリで細かく刻むのは大変です。
clamp() 関数を使えば、画面幅に応じて滑らかに文字サイズを変化させることができます。

h1 {
  /* 最小16px、推奨4vw、最大24px */
  /* 画面が広がるにつれて、文字もじわじわ大きくなる */
  font-size: clamp(16px, 4vw, 24px);
}

JavaScript連携：matchMediaメソッドの使い方

CSSだけでなく、JavaScriptでも「画面幅に応じた処理」を行いたい場合があります。
例えば、「スマホの時だけスライダーを表示したい」「PCの時だけマウスオーバーエフェクトを有効にしたい」といったケースです。
window.matchMedia() メソッドを使います。

// メディアクエリの条件を定義
const mediaQuery = window.matchMedia('(min-width: 768px)');

// 判定を行う関数
function handleTabletChange(e) {
  if (e.matches) {
    // 768px以上（PC・タブレット）の時の処理
    console.log('PC mode');
    startHeavyAnimation(); 
  } else {
    // 768px未満（スマホ）の時の処理
    console.log('Mobile mode');
    stopHeavyAnimation(); // スマホでは重い処理を止める
  }
}

// 初期チェック
handleTabletChange(mediaQuery);

// リスナー登録（画面サイズが変わった時に発火）
mediaQuery.addListener(handleTabletChange);

この方法を使えば、resize イベントを監視して window.innerWidth をチェックするよりも、はるかにパフォーマンス良く実装できます。

CSSフレームワーク（Tailwind / Bootstrap）での活用

モダンな開発現場では、素のCSSを書かずにフレームワークを使うことが一般的です。
メディアクエリの記述も、フレームワークごとにルールがあります。

Tailwind CSSの場合

ユーティリティクラスにプレフィックス（接頭辞）を付けるだけでレスポンシブ対応できます。
非常に直感的で、コード量が劇的に減ります。

<!-- スマホ：赤、PC：青 -->
<div class="bg-red-500 md:bg-blue-500">
  Color Box
</div>

<!-- スマホ：1列、タブレット：2列、PC：3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Bootstrap 5の場合

クラス名にブレイクポイントを含めます。

<div class="container">
  <div class="row">
    <!-- スマホ：全幅(12)、PC：半幅(6) -->
    <div class="col-12 col-md-6">Column</div>
  </div>
</div>

次世代技術：コンテナクエリ（@container）の衝撃

2023年頃から全ブラウザで利用可能になった革命的技術、それがコンテナクエリ（Container Queries）です。
これまでのメディアクエリ（@media）は「画面全体（Viewport）の幅」を見ていました。
コンテナクエリ（@container）は「親要素（Container）の幅」を見てスタイルを変えます。

何が嬉しいのか？

例えば「商品カード（Product Card）」という部品コンポーネントを作るとします。
このカードを「メインカラム（広い場所）」に置いたら横レイアウト、「サイドバー（狭い場所）」に置いたら縦レイアウトにしたい。
メディアクエリでは「画面幅」しか分からないため、「画面が広いPCでも、サイドバーの中にいる時は狭い」という状況を判断できませんでした。
コンテナクエリなら、「自分が今入っている箱の大きさ」に応じて変身できます。

/* 親要素（コンテナ） */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 子要素（カード） */
@container card (min-width: 400px) {
  /* 親の幅が400px以上ある時だけ適用 */
  .product-image {
    display: inline-block;
    width: 30%;
  }
}

これにより、完全に独立した「どこに置いても崩れないコンポーネント」を作ることが可能になります。
次世代のコーディングでは必須の知識となるでしょう。

アクセシビリティ対応（ダークモード・視差効果）

メディアクエリの真骨頂は、デバイスの幅だけでなく、「ユーザーの環境・好み・身体的特性」までも検知できる点にあります。
これを活用することで、すべてのユーザーに優しい「インクルーシブデザイン」を実現できます。

ダークモード対応（prefers-color-scheme）

OS（iPhoneやWindows）の設定が「ダークモード」の人に合わせ、配色を自動変更します。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
  a {
    color: #8ab4f8; /* 暗い背景でも見やすい色に変更 */
  }
}

「動き」を抑える（prefers-reduced-motion）

派手なアニメーションやパララックス効果で「画面酔い」するユーザーのために、OS側で「視差効果を減らす」設定をしている人に配慮します。

@media (prefers-reduced-motion: reduce) {
  * {
    /* アニメーションを即時完了させる */
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}

コントラスト設定（prefers-contrast）

視力が弱いユーザーが「ハイコントラストモード」にしている場合を検知します。

@media (prefers-contrast: more) {
  .text-gray {
    color: black; /* 薄いグレーをやめて真っ黒にする */
    background-color: white;
  }
}

レスポンシブ画像の最適化（srcset / sizes）

CSSだけでレイアウトを変えても、画像ファイル自体がPC用の巨大なもの（例：5MBの高解像度画像）だと、スマホユーザーのギガ（通信量）を無駄に消費し、表示速度も遅くなります。
HTMLの srcset 属性と sizes 属性を使いましょう。これを「アートディレクション」と呼びます。

<img src="default.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="レスポンシブ対応の商品写真">

これを書いておけば、ブラウザが「今の画面幅なら medium.jpg で十分だな」「Retinaディスプレイだから大きめの large.jpg を取ってこよう」と判断し、最適なサイズの画像だけをダウンロードしてくれます。
JavaScript不要で実装できる、最強のパフォーマンスチューニングです。

トラブルシューティング：効かない時の完全チェックリスト

「書いてある通りにしたのに動かない！」
そんな時は以下のリストを上から順に確認してください。9割はこれで解決します。

Level 1. 初歩的なミス

• viewportタグはあるか？
  HTMLのhead内に以下がないと、スマホブラウザはPCサイトとして振る舞おう（縮小表示）とします。
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• 全角スペースの混入
  CSS内に全角スペースが含まれていると、その行は無視されます。エディタの機能で可視化しましょう。
• 閉じカッコ忘れ
  @media { ... } の最後の } を忘れていませんか？ネストが深くなるとやりがちです。

Level 2. 詳細度（優先順位）の問題

• 記述順序
  min-width で書く場合、下に書いたスタイルが上のスタイルを上書きします。
  もしメディアクエリをCSSファイルの冒頭に書いてしまうと、その後のデフォルトスタイルで上書きされて消えてしまいます。
  基本スタイル → メディアクエリ の順序を厳守してください。
• ID指定 vs クラス指定
  #header .menu（IDあり：詳細度110）というスタイルを、@media { .menu { ... } }（クラスのみ：詳細度10）で上書きすることはできません。詳細度（強さ）が負けているからです。
  メディアクエリ内でも同じ詳細度にするか、最終手段として!importantを使う必要があります。

まとめ：レスポンシブデザインのその先へ

メディアクエリについて、歴史から最新技術まで解説しました。
しかし、技術はあくまで手段です。

本当に大切なのは、「目の前のユーザーが、どんな状況でサイトを見ているか？」を想像することです。
満員電車の中で片手スマホで見ているかもしれません。直射日光の下で見ているかもしれません。視力が弱く、文字を大きくして見ているかもしれません。

メディアクエリは、そんな多様なユーザー一人ひとりに「最適な体験」を届けるための、Web制作者からの「おもてなし」の手紙なのです。
今回学んだ知識を武器に、誰にでも優しく、美しく、強いWebサイトを作り上げてください。