【完全保存版】CSSメディアクエリの使い方｜効かない原因をDevToolsで特定してスマホ崩れを直す実務ガイド

はじめに｜メディアクエリ、書けるのに「効かない」日が来る

Webサイト制作で必ず出てくるのがCSSメディアクエリです。

• レスポンシブ対応って何から始めればいい？
• メディアクエリの書き方が分からない
• スマホだけレイアウトを変えたい
• さっきまで効いてたのに急に効かない

メディアクエリって、構文はすぐ覚えられます。
でも実務で本当に困るのは、だいたい別のところです。

• viewportが入ってなくてスマホで効かない
• ブレイクポイントは合ってるのに上書きされてる
• スマホだけ横スクロールが出て、原因が見つからない
• 追加でメディアクエリを増やしたら管理が崩壊する

私も昔、@media (max-width: 768px) を書いたのに全然変わらなくて、
CSSを何回も書き直してました。
結局、原因は「メディアクエリの中のCSSより、あとに書いた通常CSSが勝ってた」だけ。
気づいた瞬間、ちょっと恥ずかしかったです。

この記事では「css メディアクエリ」で検索してきた人が、
基本 → よくある実装 → 効かない原因の切り分け → DevToolsの追い方まで一気に進められるようにまとめます。

CSSメディアクエリとは

スニペット向けに一文でまとめます。

CSSメディアクエリは、画面幅などの条件に合わせてCSSを切り替え、PC・タブレット・スマホで見やすいレイアウトに調整する仕組みです。

これがあるおかげで、HTMLを増やさずに表示を変えられます。

• PC用レイアウト
• タブレット用レイアウト
• スマホ用レイアウト

なぜメディアクエリが必要なのか

端末ごとに画面幅が違うから、これに尽きます。

PCでちょうど良い横並びも、スマホではこうなりがちです。

• 要素がはみ出す
• ボタンが小さくて押しづらい
• 文字が詰まって読みにくい
• 横スクロール問題が出る（スマホ崩れ）

メディアクエリは、こういう「スマホでの違和感」を直すための道具です。

メディアクエリの基本構文（まずはこれ）

一番よく使う形です。

@media screen and (max-width: 768px) {
  body {
    background-color: #f5f5f5;
  }
}

ざっくり意味

• max-width: 768px
  → 画面幅が768px以下なら中のCSSを適用する

viewport設定は先に必ず入れる（スマホで効かない原因No.1）

メディアクエリの前に、これが無いとスマホで噛み合わないことがあります。

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

「スマホだけ効かない」とき、まずここを疑うのが早いです。

よく使われるブレイクポイント（まずは3つで十分）

ブレイクポイントは増やしすぎると管理が難しくなります。
最初はこの3つが使いやすいです。

• 1024px：タブレット付近
• 768px：スマホ付近
• 480px：小さめスマホ付近

@media (max-width: 768px) {
  /* スマホ用 */
}

max-widthとmin-widthの違い（ここで混乱しがち）

max-width（〜以下）

@media (max-width: 768px) {
  /* スマホ用 */
}

• 大きい画面のCSSを書いて
• 小さい画面で上書きする

「PCで作って、スマホで直す」流れが分かりやすいです。

min-width（〜以上）

@media (min-width: 769px) {
  /* PC用 */
}

• 小さい画面のCSSを書いて
• 大きい画面で足していく

いわゆるモバイルファーストの書き方で、CSSが整理しやすいメリットがあります。

デスクトップファーストとモバイルファースト（実務での選び方）

デスクトップファースト（max-widthで下げる）

.container {
  display: flex;
  gap: 24px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    gap: 16px;
  }
}

「今PCのデザインがある」「PCで見栄えを作ってからスマホ調整」なら、この形がラクです。

モバイルファースト（min-widthで上げる）

.container {
  display: block;
}

@media (min-width: 769px) {
  .container {
    display: flex;
    gap: 24px;
  }
}

「スマホを基準に、PCで拡張」したいならこの形。
後から追加するデザインが整理しやすいです。

メディアクエリでよく使う実例（そのまま使える）

横並びを縦並びにする（スマホ崩れ対策の王道）

.cards {
  display: flex;
  gap: 24px;
}

@media (max-width: 768px) {
  .cards {
    flex-direction: column;
    gap: 16px;
  }
}

画像のはみ出しを止める（横スクロール問題の犯人になりやすい）

img {
  max-width: 100%;
  height: auto;
}

画像がはみ出すだけで、スマホは一気に横スクロールが出ます。
まずこれ。

余白をスマホだけ詰める（読みやすさが上がる）

.section {
  padding: 48px 0;
}

@media (max-width: 768px) {
  .section {
    padding: 32px 0;
  }
}

フォントサイズをスマホだけ微調整（やりすぎ注意）

body {
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
}

ガッツリ変えるより、1pxだけ動かすくらいが扱いやすいです。

メディアクエリが効かない原因（ここを順番に潰す）

viewportが入っていない

スマホで効かないときの最有力です。

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

pxの付け忘れ

これ、地味に多いです。

@media (max-width: 768) { }

正しくはこう。

@media (max-width: 768px) { }

読み込み順・上書きで負けている

メディアクエリの中で色を変えても、あとに通常CSSで上書きされると負けます。

@media (max-width: 768px) {
  body { color: red; }
}

body { color: black; }

この場合、黒が勝ちます。
「後に書いた方が強い」ケースがあるのがCSSのクセです。

セレクタの強さ（詳細度）で負けている

@media (max-width: 768px) {
  .title { color: red; }
}

header .title { color: black; }

header .title のほうが具体的なので、黒が残ります。
「効かない」というより「負けてる」パターンです。

メディアクエリをDevToolsで確認する手順（差別化ポイント）

効かないとき、勘で直すと時間が溶けます。
DevToolsで「いま効いてるルール」を見るのが最短です。

手順

1. F12 → Elements
2. 変えたい要素をクリックして選択
3. 右側の Styles を見る
4. @media (max-width: 768px) のブロックが表示されているか確認
5. 該当ルールに打ち消し線があれば、別のCSSに負けている

さらに絞りたいときは、Computed（計算済み）で最終的な値を見ます。

• どのプロパティが最終的に何になっているか
• どのルールが勝っているか

「効いてない」じゃなくて「どれが勝ってるか」を見る感じです。

横スクロール問題とメディアクエリ（スマホ崩れの現場あるある）

メディアクエリで直す前に、横スクロールの犯人を見つけるのが先です。
原因として多いのはこの辺。

• 固定幅（width: 1000px など）
• 大きい画像（max-widthが無い）
• 100vw の使いすぎ
• positionで画面外に飛ばしている要素
• 長い英数字やURLが折り返されない

とりあえず事故を減らす一手

* {
  box-sizing: border-box;
}

メディアクエリは何個必要？（増やしすぎないコツ）

最初は1〜2個で十分です。

• スマホ用：@media (max-width: 768px)
• 必要ならタブレット用：@media (max-width: 1024px)

ブレイクポイントを増やすより、
「基本は相対指定（%やmax-width）で自然に縮む」設計に寄せるほうが壊れにくいです。

チェックリスト｜メディアクエリが効かないときの確認順

• viewportは入っているか
• pxの付け忘れがないか
• ブレイクポイントの方向（max/min）を間違えてないか
• CSSの読み込み順で負けてないか
• セレクタの強さで負けてないか
• DevToolsで打ち消し線が出てないか
• そもそも対象要素を選べているか（class名のミス）

上から順にやると、だいたい途中で見つかります。

初心者におすすめの最小構成（これで十分戦える）

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

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

  .row {
    flex-direction: column;
  }
}

これだけで、スマホ崩れはかなり減ります。

まとめ｜メディアクエリは「書き方」より「負けた理由」を追えると強い

CSSメディアクエリはレスポンシブ対応の中心です。

• viewport設定は先に入れる
• max-width/min-widthの意味を押さえる
• ブレイクポイントは増やしすぎない
• 効かないときはDevToolsで打ち消し線を見る
• 横スクロール問題は犯人を特定してから直す

「css メディアクエリ」で検索してきたなら、
まずは @media (max-width: 768px) を入れて、
DevToolsで「効いてるか」「負けてるか」を見る癖をつけるのが一番早いです。