◀ 11.

CSSメディアクエリでレスポンシブ対応｜画面サイズ別にスタイルを切り替える方法

▶
編集

画面サイズやデバイスごとにCSSを切り替えるには、CSSのメディアクエリ（@media）を使い、「この条件のときだけこのスタイルを当てる」という形でルールを書き分けます。たとえば @media (max-width: 768px) { ... } と書けば、ビューポートの横幅が768px以下のときだけ { } 内のスタイルが適用され、スマホ表示のときだけレイアウトを変える、といったことが実現できます。同じHTMLのまま画面幅に応じて見た目を変える「レスポンシブデザイン」の中心となる仕組みです。

この記事の要点
  • 画面サイズによる切り替えは CSSのメディアクエリ @media で行う。基本構文は @media (max-width: 768px) { ... }。
  • max-width は「指定値以下」、min-width は「指定値以上」に適用される。どちらを基点にするかで設計方針が変わる。
  • 近年の主流は モバイルファースト。スマホ向けを土台に書き、min-width で画面が広いときのスタイルを上書きしていく。
  • <link media="..."> でCSSファイルごと切り替える方法や、orientation（縦横）など幅以外の条件も指定できる。
  • メディアクエリを効かせるには、HTMLの viewportメタタグ の設定が前提。これが無いとスマホで意図どおりに表示されない。

メディアクエリとは

メディアクエリ（Media Query）とは、表示している環境の条件によってCSSの適用を切り替えるための仕組みです。ここでいう「条件」とは、主にブラウザの表示領域（ビューポート）の横幅・高さ、画面の向き、解像度などを指します。

同じHTMLに対して、画面幅が広いPCでは横並びの3カラム、狭いスマホでは縦一列、というように見た目だけを切り替えたい場面は非常に多くあります。メディアクエリを使えば、HTMLを書き換えることなくCSS側だけでこうした出し分けができるため、1つのソースで複数のデバイスに対応する「レスポンシブデザイン」が実現できます。

基本構文

もっとも基本的な形は、@media に続けて条件を ( ) で書き、その後の { } の中に「その条件のときだけ適用したいスタイル」を記述する形です。

/* 通常のスタイル（すべての画面に適用） */
.box {
  font-size: 18px;
  padding: 24px;
}

/* 画面幅が768px以下のときだけ上書きする */
@media (max-width: 768px) {
  .box {
    font-size: 14px;
    padding: 12px;
  }
}

この例では、まず .box に共通のスタイルを当てておき、画面幅が768px以下になったときだけ @media 内のルールが追加で適用されて、文字サイズと余白が小さく上書きされます。条件に合わないときは @media 内のルールは無視されるだけなので、共通スタイルがそのまま残ります。

正式には @media screen and (max-width: 768px) のように screen（メディア種別）を付けて書くこともできます。screen は画面表示用、print は印刷用を表しますが、種別を省略すると all（すべて）扱いになり、画面表示が対象の通常用途ではどちらでもほぼ同じ結果になります。

min-width / max-width とモバイルファースト

メディアクエリで幅を指定するときの中心になるのが min-width と max-width です。意味が逆なので、ここを取り違えると意図と反対の画面でスタイルが当たってしまいます。

  • max-width: 768px … ビューポート幅が 768px以下のとき適用（＝それより狭い画面が対象）。
  • min-width: 769px … ビューポート幅が 769px以上のとき適用（＝それより広い画面が対象）。

この2つは、どちらを「基点」にして設計を進めるかで2つの考え方に分かれます。

デスクトップファーストは、PCなどの広い画面を土台に書き、max-width で「狭くなったとき」の上書きを足していく書き方です。既存のPCサイトをスマホ対応する場合などに使われます。

モバイルファーストは、スマホなどの狭い画面のスタイルを土台（メディアクエリ無しの通常スタイル）として書き、min-width で「画面が広くなったとき」のスタイルを上書きしていく書き方です。近年の主流であり、土台がシンプルなスマホ向けになるため記述の見通しが良く、表示の軽さの面でも有利とされます。以下はモバイルファーストの例です。

/* 土台＝スマホ向け（メディアクエリ無し） */
.menu {
  display: block;  /* 縦並び */
}

/* タブレット以上で上書き */
@media (min-width: 768px) {
  .menu {
    display: flex;  /* 横並び */
  }
}

/* PC幅でさらに上書き */
@media (min-width: 1024px) {
  .menu {
    gap: 32px;
  }
}

このように min-width の値を小さい順に積み重ねていくと、画面が広がるにつれて段階的にスタイルが上書きされていきます。CSSは後に書いたルールが優先されるため、記述の順序にも意味がある点に注意してください。

よく使うブレークポイント

スタイルを切り替える境目の値をブレークポイントと呼びます。端末の画面幅は機種によって幅広いため絶対的な正解はありませんが、一般的によく使われる目安は次のとおりです。

デバイスの目安 幅の目安 よく使う指定例
スマートフォン ～ 480px / ～ 767px (max-width: 767px)
タブレット 768px ～ 1023px (min-width: 768px) and (max-width: 1023px)
ノートPC・小型PC 1024px ～ 1279px (min-width: 1024px)
デスクトップPC 1280px ～ (min-width: 1280px)

表の値はあくまで目安です。実際には「自分のサイトのデザインが崩れ始める幅」を基準にブレークポイントを決めるのが本来の考え方であり、機種名に厳密に合わせる必要はありません。むやみに数を増やさず、必要な切り替え点だけに絞るのがメンテナンスのコツです。

<link media> でCSSファイルごと切り替える

メディアクエリはCSSファイルの中だけでなく、HTMLの <link> タグの media 属性にも書けます。この場合、条件に合うときだけそのCSSファイルが適用されます。デバイスごとにファイルを分けて管理したいときに使えます。

<!-- 共通スタイル -->
<link rel="stylesheet" href="/css/common.css">

<!-- 768px以下のときだけ small.css を読み込む -->
<link rel="stylesheet" href="/css/small.css" media="screen and (max-width: 768px)">

<!-- 769px以上のときだけ large.css を読み込む -->
<link rel="stylesheet" href="/css/large.css" media="screen and (min-width: 769px)">

ただし、条件に合わない（適用されない）CSSファイルもブラウザは基本的にダウンロードします。読み込み自体は発生する点に注意してください。ファイル数が増えると管理が煩雑になりやすいため、小〜中規模では1つのCSS内に @media でまとめて書く方法のほうが扱いやすいことが多いです。

幅以外の条件（orientation など）

メディアクエリでは横幅以外の条件も指定できます。代表的なものを紹介します。

  • orientation: portrait … 画面が縦長（高さ > 幅）のとき。
  • orientation: landscape … 画面が横長（幅 > 高さ）のとき。スマホを横向きにした場合など。
  • min-height / max-height … 幅ではなく高さで条件を指定する。
  • prefers-color-scheme: dark … OS側がダークモード設定のとき。ダークテーマの出し分けに使う。

/* スマホを横向きにしたときだけ適用 */
@media (max-width: 896px) and (orientation: landscape) {
  .header {
    height: 48px;
  }
}

/* OSがダークモードのとき */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #f0f0f0;
  }
}

and で複数条件を繋げると「両方を満たすとき」、カンマ , で区切ると「いずれかを満たすとき（OR）」という意味になります。

補足: viewportメタタグの必要性

メディアクエリを正しく機能させるには、HTMLの <head> 内に viewport（ビューポート）のメタタグが必要です。これが無いと、スマホのブラウザはページを「PCの広い画面」とみなして全体を縮小表示してしまい、max-width などの条件が想定どおりに判定されません。

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

width=device-width は「ビューポートの幅を端末の画面幅に合わせる」、initial-scale=1.0 は「初期倍率を等倍にする」という意味です。レスポンシブ対応をするなら、ほぼ必ずこの1行を入れておきます。

落とし穴と注意点

よくある落とし穴
  • 境界値の重複 … max-width: 768px と min-width: 768px を両方使うと、ちょうど768pxの瞬間に両方の条件が一致し、スタイルが競合します。境界は max-width: 768px と min-width: 769px のように 1pxずらして重ならないようにするのが基本です。
  • viewportメタタグの未設定 … これを入れ忘れると、スマホでメディアクエリが効かず「PCの見た目が縮小されただけ」になります。レイアウトが切り替わらないときは、まずこのタグの有無を確認します。
  • ブレークポイントの乱立 … 機種ごとに細かく区切りすぎると、どの幅でどのスタイルが効くのか把握できなくなり、修正のたびに崩れる原因になります。切り替え点は必要最小限に絞りましょう。
  • 記述順序による上書き … CSSは後に書いたルールが優先されます。min-width 基点なら値が小さい順、max-width 基点なら値が大きい順に並べないと、意図した上書きにならないことがあります。

FAQ

Q. min-width と max-width はどちらを使えばよいですか？
A. どちらでも実現は可能ですが、新規に作るなら min-width を基点にしたモバイルファーストがおすすめです。スマホ向けの土台を書き、画面が広くなったときだけ min-width で上書きしていく形になり、記述がシンプルになります。既存のPC向けサイトに後からスマホ対応を足す場合は max-width 基点のほうが進めやすいこともあります。

Q. メディアクエリを書いたのにスマホで切り替わりません。
A. まず <meta name="viewport" ...> がHTMLに入っているか確認してください。これが無いとスマホでは正しく判定されません。次に、条件の数値（max-width / min-width）の向きが逆になっていないか、CSSの記述順序で後のルールに上書きされていないかを確認します。ブラウザの開発者ツールで実際のビューポート幅を確認するのも有効です。

Q. デバイス（スマホかPCか）そのもので判定したいのですが？
A. CSSのメディアクエリは「デバイスの種類」ではなく「画面の幅や向き」で判定します。スマホもPCも幅で区別するのが基本です。User-Agent（ブラウザが送る端末情報）を使ってサーバー側で判定する方法もありますが、機種が増えると判定が破綻しやすく、近年は幅ベースのレスポンシブ対応が推奨されています。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. CSSで色を指定する方法（HEX / RGB / HSL / oklch）
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法
2026-06-12 14:51:13 atom 123

人気ページ

最近更新/作成されたページ