メディアクエリの書き方｜ブレイクポイントの決め方とスマホ対応・効かないときの対処法

2025.07.15

2026.10.07

メディアクエリの書き方｜ブレイクポイントの決め方とスマホ対応・効かないときの対処法

スマートフォン、タブレット、パソコンと、Webページはさまざまな画面幅で見られます。画面幅に合わせてレイアウトや文字の大きさを切り替える「レスポンシブデザイン」の中心になるのが、CSSのメディアクエリ（media queries）です。

この記事では、メディアクエリの基本の書き方から、min-width と max-width の使い分け、ブレイクポイントの決め方、ダークモードなど幅以外の条件、うまく効かないときの確認ポイントまでを解説します。

メディアクエリとは

メディアクエリは、「画面幅が768px以下のとき」のような条件を書き、条件に合うときだけCSSを適用する仕組みです。1つのHTMLのまま、画面の大きさに合わせて見た目を変えられます。

たとえば、パソコンでは横に3列並べているカードを、スマートフォンでは1列にする、といった切り替えに使います。CSSそのものの基本は「CSSとは？基本構文と使い方をわかりやすく解説」で解説しています。

最初に必ず入れるviewportの設定

メディアクエリを使う前に、HTMLの <head> の中に次の1行があるか確認してください。

HTML

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

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

この設定が無いと、スマートフォンのブラウザはページを「幅980pxほどのパソコン用の画面」として表示し、全体を縮小して見せます。画面幅が980pxとして扱われるので、max-width: 767px のようなスマートフォン用の条件に当てはまらず、メディアクエリが効きません。

width=device-width は「画面の幅を端末の実際の幅に合わせる」、initial-scale=1 は「最初の表示倍率を等倍にする」という意味です。

メディアクエリの基本の書き方

@media の後に条件を書き、{ } の中に、条件に合うときに適用したいCSSを書きます。

CSS

@media (条件) {
  セレクタ {
    プロパティ: 値;
  }
}

@media (条件) {
  セレクタ {
    プロパティ: 値;
  }
}

次の例は、画面幅が767px以下のときに、文字を小さくして余白を詰めます。

CSS

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 0 16px;
  }
}

複数の条件を組み合わせる

「768px以上かつ1023px以下」のように、条件を両方満たすときだけ適用したい場合は and でつなぎます。どちらか一方を満たせばよい場合は ,（カンマ）で区切ります。

CSS

/* 768px以上、かつ1023px以下 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    display: none;
  }
}

/* 横向きの画面、または幅が600px以下 */
@media (orientation: landscape), (max-width: 600px) {
  .hero {
    height: auto;
  }
}

/* 768px以上、かつ1023px以下 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    display: none;
  }
}

/* 横向きの画面、または幅が600px以下 */
@media (orientation: landscape), (max-width: 600px) {
  .hero {
    height: auto;
  }
}

メディアタイプ（screen・print）

@media screen and (max-width: 767px) のように、条件の前に「メディアタイプ」を書くこともできます。screen は画面表示、print は印刷のときに適用されます。省略すると、すべてのメディアが対象（all）になります。画面と印刷で分ける必要がなければ、省略してかまいません。

min-widthとmax-widthの使い分け

画面幅の条件には、min-width（指定した幅以上）と max-width（指定した幅以下）の2つがあります。どちらを中心に使うかで、CSSの組み立て方が変わります。

スマホを先に書く（モバイルファースト）

メディアクエリの外にスマートフォン向けのCSSを書き、画面が広くなるにつれて min-width で上書きしていく方法です。スマートフォンからの閲覧が多いサイトでよく使われます。

CSS

/* スマートフォン（基本） */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* タブレット（768px以上） */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* パソコン（1024px以上） */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* スマートフォン（基本） */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* タブレット（768px以上） */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* パソコン（1024px以上） */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

パソコンを先に書く（デスクトップファースト）

メディアクエリの外にパソコン向けのCSSを書き、画面が狭くなるにつれて max-width で上書きしていく方法です。パソコン用のデザインが先にできていて、後からスマートフォンに対応する場合に向いています。

CSS

/* パソコン（基本） */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* タブレット（1023px以下） */
@media (max-width: 1023px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマートフォン（767px以下） */
@media (max-width: 767px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* パソコン（基本） */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* タブレット（1023px以下） */
@media (max-width: 1023px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマートフォン（767px以下） */
@media (max-width: 767px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

書く順番に注意する

CSSは、同じ強さの指定なら後に書いたものが優先されます。メディアクエリも同じで、条件に当てはまるものが複数あると、後に書いたほうが勝ちます。

min-width は、小さい値から大きい値の順に書く
max-width は、大きい値から小さい値の順に書く

たとえば上のデスクトップファーストの例で、767px以下の指定を1023px以下の指定より前に書くと、スマートフォンでも1023px以下の指定が後から上書きし、2列のままになります。

また、max-width: 768px と min-width: 768px を組み合わせると、ちょうど768pxの画面では両方が当てはまります。境目は「767pxまで」と「768pxから」のように1pxずらすか、次に紹介する範囲の書き方を使ってください。

範囲の新しい書き方

最近のブラウザでは、不等号を使って幅の範囲を書けます。min- や max- よりも意味が読み取りやすく、境目の値も「未満」「以下」をはっきり書き分けられます。

CSS

/* 768px未満 */
@media (width < 768px) {
  .nav {
    display: none;
  }
}

/* 768px以上、1024px未満 */
@media (768px <= width < 1024px) {
  .sidebar {
    width: 200px;
  }
}

/* 768px未満 */
@media (width < 768px) {
  .nav {
    display: none;
  }
}

/* 768px以上、1024px未満 */
@media (768px <= width < 1024px) {
  .sidebar {
    width: 200px;
  }
}

この書き方は、Chrome・Edge 104以降、Firefox 63以降、Safari 16.4以降で使えます。古いブラウザにも対応する必要がある場合は、min-width・max-width で書いてください。

ブレイクポイントの決め方

CSSを切り替える画面幅の境目を「ブレイクポイント」と呼びます。よく使われるのは次のような区切りです。

対象	画面幅の目安	モバイルファーストで書く条件
スマートフォン	〜767px	（メディアクエリの外に書く）
タブレット	768px〜1023px	`(min-width: 768px)`
パソコン	1024px〜	`(min-width: 1024px)`
大きな画面	1280px〜	`(min-width: 1280px)`

ブレイクポイントの数は、2つ（スマートフォン／タブレット・パソコン）か3つで十分なことがほとんどです。数を増やすほどCSSの管理が大変になります。

端末の機種ごとの幅に合わせる必要はありません。ブラウザの幅を少しずつ狭めていき、レイアウトが崩れたり読みにくくなったりした幅をブレイクポイントにするのが確実です。

メディアクエリを書く場所

メディアクエリは、次の3か所に書けます。

CSSファイルの中：通常はこの方法を使います。関係するCSSの近くに書くと、後から探しやすくなります。
HTMLの <style> の中：書き方はCSSファイルと同じです。
<link> の media 属性：条件に合うときだけCSSファイルを適用します。

HTML

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">

media 属性を付けても、条件に合わないCSSファイルの読み込み自体は行われます（優先度が下がるだけです）。それぞれの書き方の違いは「外部CSS・内部CSS・インラインCSSの違いと使い分け」で解説しています。

画面幅以外の条件

メディアクエリでは、画面幅のほかにも、端末や利用者の設定に合わせた条件を書けます。

条件	意味
`(orientation: portrait)` `(orientation: landscape)`	画面が縦長／横長のとき
`(prefers-color-scheme: dark)`	端末がダークモードに設定されているとき
`(prefers-reduced-motion: reduce)`	端末が「動きを減らす」設定になっているとき
`(hover: hover)`	マウスなど、ホバー（カーソルを重ねる操作）ができる端末のとき
`print`	印刷するとき

たとえば次のように書くと、ダークモードの端末では背景を暗くし、ホバーできる端末でだけボタンの色を変えられます。スマートフォンでは、タップした後にホバーの色が残り続けることがあるので、(hover: hover) で囲んでおくと安心です。

CSS

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1e1e1e;
    color: #eeeeee;
  }
}

@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1e1e1e;
    color: #eeeeee;
  }
}

@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

動きを減らす設定への対応は、アニメーションを使うときに特に大切です。アニメーションの書き方は「CSSアニメーションの基本と実用エフェクト例」で解説しています。

メディアクエリが効かないときの確認ポイント

スマホ（iPhoneなど）で効かない

パソコンのブラウザでは効くのにスマートフォンでは効かない場合、ほとんどは viewport の設定が無いことが原因です。<head> に <meta name="viewport" content="width=device-width, initial-scale=1"> があるか確認してください。

一部のスタイルだけ効かない

書く順番：メディアクエリの後に、同じセレクタの指定を書いていると、後の指定で上書きされます。メディアクエリは、元の指定より後に書きます。
セレクタの強さ（詳細度）：メディアクエリの中に書いても、セレクタが強くなるわけではありません。元の指定が .header .nav a、メディアクエリの中が .nav a のように、元のほうが強いと上書きできません。同じセレクタで書くのが確実です。
ブレイクポイントの重なり：max-width: 768px と min-width: 768px のように境目が重なっていると、ちょうどその幅で両方が当てはまります。

まったく効かない

書き間違い：and の前後にはスペースが必要です。screen and(max-width: 767px) のように詰めて書くと、メディアクエリ全体が無効になります。条件を囲む ( ) や、最後の } の閉じ忘れも確認してください。
単位の付け忘れ：(max-width: 767) のように単位を省くと効きません。px などの単位を付けます。
キャッシュ：ブラウザが古いCSSファイルを使っていることがあります。スーパーリロード（Windowsは Ctrl＋F5、Macは Command＋Shift＋R）で読み込み直してください。

Chromeのデベロッパーツールで確かめる

Chromeでは、F12キー（Macは Command＋Option＋I）でデベロッパーツールを開き、左上のスマートフォンとタブレットのアイコン（デバイスツールバー）を押すと、画面幅を変えて表示を確かめられます。「Elements」パネルで要素を選ぶと、右側の「Styles」に、その幅で適用されているCSSと、上書きされて取り消し線が付いたCSSが表示されます。効かない原因を探すときに便利です。

まとめ

メディアクエリを使う前に、HTMLに viewport の meta タグを入れる
モバイルファーストなら min-width を小さい順に、デスクトップファーストなら max-width を大きい順に書く
最近のブラウザなら、(width < 768px) のような範囲の書き方も使える
ブレイクポイントは2〜3つで十分。レイアウトが崩れる幅に合わせて決める
ダークモード、動きを減らす設定、ホバーの可否、印刷にも対応できる
効かないときは、viewport、書く順番、セレクタの強さ、書き間違いを確認する

レイアウトの切り替えには、Flexbox や Grid と組み合わせるのが基本です。詳しくは「フレックスボックス（Flexbox）完全ガイド」「CSS Grid入門」、よく使うプロパティは「CSSプロパティ一覧」をご覧ください。