はじめに｜この記事で得られる価値
「メディアクエリの順番、min-widthとmax-widthはどちらが正解？」「レビューで記述順を指摘された…なぜ順番が重要なの？」
Web制作の現場で、こうした悩みに直面していませんか？
プロジェクトごとに書き方がバラバラ、min-widthとmax-widthが混在し、CSSが意図せず破綻――私たちがよく“つまづく”ポイントです。
でも、ご安心を。この記事では、「なぜ順番が大切なのか？」から実践的なコード例、失敗しない書き方のルールまで、現場目線で徹底解説します。
（CSS設計や命名規則については『CSS設計で保守性と拡張性を高める方法｜BEM・OOCSS・SMACSS徹底比較』をご参照ください）
用語解説：CSS
Webページの見た目（色・レイアウト・サイズなど）を指定するスタイルシート言語。HTMLと組み合わせて使う。用語解説：メディアクエリ
画面サイズやデバイスの種類に応じてCSSを切り替える仕組み。レスポンシブデザインの要。用語解説：min-width / max-width
CSSのメディアクエリで使う条件。min-widthは「以上」、max-widthは「以下」を意味し、どちらを基準にするかで設計方針が変わる。用語解説：レスポンシブデザイン
PC・スマホなど様々な画面サイズに自動対応するWebデザイン手法。
1. なぜCSSの“順番”がすべて？— カスケーディングの原則
■ カスケーディング（Cascading）とは？
メディアクエリで順番が重要な理由、それはカスケーディング（Cascading）というCSSの大原則にあります。
同じセレクタに複数のスタイルを指定した場合、後から書かれた指定が優先（後勝ち）です。
用語解説：カスケーディング
CSSの「後勝ち」ルール。複数のスタイルが同じ要素に指定された場合、後から書かれたものが優先される。用語解説：セレクタ
CSSでスタイルを適用する対象（要素）を指定する記述方法。例：.container, p, #header など。
p {
color: blue;
}
p {
color: red;
}
この場合、redが適用されます。
メディアクエリも同じ。「順番」に一貫性がないと、どのスタイルが最終的に有効なのかが予測できず、破綻の温床に。
悪い例：順番・記述法がバラバラ
@media (min-width: 1024px) {
.container { background-color: lightblue; }
}
@media (max-width: 767px) {
.container { background-color: lightpink; }
}
意図せぬ上書きが発生しやすくなります。
2. どっちを選ぶ？— モバイルファーストとデスクトップファースト
■ 診断チャートで最適なアプローチを選ぶ
-
新規プロジェクト？
- はい → min-width（モバイルファースト）が強く推奨
- いいえ → 2へ
-
既存コードがmax-width中心？
- はい → 無理な移行はせずmax-width（デスクトップファースト）で統一
- いいえ → 3へ
-
スマホからのアクセスが多い？
- はい → モバイルファースト最適
- いいえ → 管理しやすさ重視でモバイルファースト推奨
3. min-width（モバイルファースト）の書き方・メリット
■ モバイルファーストの基本
モバイルファーストは「小さい画面」を基準に、画面が広がるほど追加で上書きしていく方式です。
記述順はmin-widthを昇順に並べます。
用語解説：モバイルファースト
スマホなど小さい画面を基準に設計し、画面が広がるほどスタイルを追加する手法。現代Webの主流。
.container {
width: 100%;
}
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1024px) {
.container { width: 980px; }
}
- コードがシンプルで保守しやすい
- 現代のアクセス実態に最適
- モバイル端末で無駄なスタイルを読まないため表示が速い
（CSSレスポンシブの基礎やサンプルについては『初心者向けCSSレスポンシブ解説｜2025年対応・サンプル付きでスマホ対応をマスター』をご参照ください）
4. max-width（デスクトップファースト）の書き方・注意点
■ デスクトップファーストの基本
デスクトップファーストは「大きい画面」を基準に、狭くなった時に上書きします。
max-widthを降順で並べます。
用語解説：デスクトップファースト
PCなど大きい画面を基準に設計し、画面が狭くなるほどスタイルを上書きする手法。古い案件で多い。
.container {
width: 980px;
}
@media (max-width: 1023px) {
.container { width: 750px; }
}
@media (max-width: 767px) {
.container { width: 100%; }
}
- スタイルの「打ち消し」記述が増えやすい
- 古い案件で多いが、新規なら非推奨
5. モバイルファーストでの実装3ステップ
■ 1. ベーススタイル（スマホ用）を定義
body { font-family: sans-serif; line-height: 1.6; }
.header, .footer { padding: 1rem; }
.main-contents { padding: 1rem; }
■ 2. タブレット用（min-width: 768px）
@media (min-width: 768px) {
.main-contents { display: flex; gap: 2rem; }
.article { flex: 2; }
.sidebar { flex: 1; }
}
■ 3. PC用（min-width: 1024px）
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
.header { padding: 2rem; }
}
ポイント：順番は必ず昇順！
ぜひコードをコピペして、まずは動かしてみてください。
6. メディアクエリが効かない4大原因と対処
- min-widthとmax-widthが混在・順番が逆
書き方が統一されていないと意図しない上書きが発生 - viewportメタタグの抜け
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を必ず<head>に - セレクタの詳細度負け
詳細度の高い外部スタイルが優先されている可能性 - ブラウザのキャッシュ
Ctrl+F5やCmd+Shift+Rで「スーパーリロード」を
7. チームで差がつく！Sass(SCSS)でのMixin運用
ブレークポイント値を一元管理＋共通化でミス削減
$breakpoints: ('md': 768px, 'lg': 1024px, 'xl': 1280px);
@mixin mq($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}
使い方：
.card {
width: 100%;
@include mq('md') { width: 50%; }
@include mq('lg') { width: 33.3%; }
}
- ブレークポイント修正も一箇所でOK
- 属人性をなくしチームの品質が上がる
用語解説：Sass(SCSS)
CSSをより効率的に書くための拡張言語。変数や関数（Mixin）などが使える。用語解説：Mixin
Sassで使える「共通処理の部品」。複数箇所で同じスタイルを使い回せる。用語解説：ブレークポイント
画面サイズの区切りとなる値。例：768px, 1024px など。
8. よくある質問Q&A
- Q1. 単位はpx？em？rem？
→ rem推奨。アクセシビリティ対応しやすい。 - Q2. 複雑な条件指定の書き方は？
→ @media (min-width: 768px) and (max-width: 1023px)。「or」はカンマ区切りで。 - Q3. メディアクエリは古い？@containerとの違いは？
→ 目的が違う。メディアクエリはビューポート、コンテナクエリは親要素基準。 - Q4. JavaScriptで判定したい
→ window.matchMedia(‘(min-width: 1024px)’).matchesで判定可能。 - Q5. アクセシビリティで気をつけることは？
→ rem単位使用やprefers-reduced-motionによるアニメーション抑制など。
（CSSアニメーションの仕組みや実装例については『【保存版】Web制作で使えるCSSアニメーション10選｜サンプルコード＆使い方解説』をご参照ください）
用語解説：アクセシビリティ
誰でも使いやすいWebを目指す考え方。文字サイズや色、動きの抑制などがポイント。用語解説：rem / em / px
CSSの単位。remはルート要素基準、emは親要素基準、pxは絶対値。remは拡大・縮小に強い。用語解説：prefers-reduced-motion
ユーザーが「動きを減らしたい」と設定した場合、アニメーションを抑制するCSSメディア特性。
9. まとめ—「順番」で迷わない、保守性の高いCSSを
- CSSは後勝ち、順番で意図せぬ上書きに注意
- モバイルファースト（min-width昇順）が現代の主流・推奨
- 困ったら「順番混在」「viewportタグ」「詳細度」「キャッシュ」をチェック
- SassのMixin活用で効率UP、チーム開発にも強い
メディアクエリはレスポンシブ設計の根幹です。
「一方向に書く」原則だけで、保守性・拡張性が格段に向上します。
ぜひ手元のプロジェクトで、書き方を統一してみてください。
