MENU
  1. ホーム
  2. CSS
  3. 【CSS】メディアクエリの書き方：レスポンシブ対応・ブレイクポイント・複数指定・効かない対策

【CSS】メディアクエリの書き方：レスポンシブ対応・ブレイクポイント・複数指定・効かない対策

CSS
css-media
ポートフォリオ向けサーバー
HTML/CSSスキルが活きる！
学んだ知識を活かして、
自分だけのブログを始めませんか？

WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。

ブログ向けサーバー4選を見る

CSSメディアクエリは、スマホやPCなど画面サイズに合わせてレイアウトを最適化する「レスポンシブデザイン」の心臓部です。

本記事では、メディアクエリの書き方やブレイクポイント一覧、実務でハマりやすい「効かない」時の原因と解決策まで解説します。

HTML/CSS学習者の方へ
「学んだコード、自分のブログで試してみませんか？」
多くのブロガーがデザインでつまずく中、コードが読めるあなたは圧倒的に有利です。
自由自在なサイト構築の第一歩となる、初心者向けサーバーを分かりやすく比較しました。

＼ スキルを活かして情報発信 ／ ブログ向けレンタルサーバー4選を読む▶︎
目次

メディアクエリとは：レスポンシブ対応と書き方

現代のWebサイト制作において、スマートフォン、タブレット、PCなど、あらゆる画面サイズに合わせてレイアウトを最適化する「レスポンシブデザイン」は必須要件です。

このレスポンシブ対応の心臓部となるのがメディアクエリ（@media）です。

メディアクエリによるレスポンシブ対応マスターすれば、1つのHTMLファイルだけで、スマホ用の縦並びレイアウトからPC用の横並びレイアウトまで自由に変化させられます。

ここでは、メディアクエリの書き方、実務で直面するレスポンシブ対応などを解説します。

メディアクエリとは：レスポンシブ対応と書き方
  • 画面サイズに応じてCSSを切り替えるメディアクエリの仕組み
  • @mediaの基本構文とmin-width/max-widthの違い

画面サイズに応じてCSSを切り替えるメディアクエリの仕組み

メディアクエリの仕組みはシンプルで、CSSの中に「もし画面幅が〇〇px以上なら、このスタイルを適用する」という条件分岐を作る機能です。

初心者がレスポンシブ対応を行う際、スマホ用のCSSをすべてコピーしてメディアクエリ内に貼り付け、少しだけ数値を変えるというミスが多発します。

これをやるとCSSのファイルサイズが何倍にも膨れ上がり、あとから「ボタンの色を変えたい」と思った時にスマホ用とPC用の2箇所を修正しなければならず、保守性が最悪になります。

メディアクエリを書く際は、「メディアクエリの中には『変更したいプロパティ（差分）』だけを記述し、共通するスタイル（色やフォントサイズなど）は重複して書かないこと」です。

⭕️ 画面幅を伸縮させて確認！メディアクエリは「差分」だけを書く！

画像エリア
レスポンシブカード

スマホ画面では縦並びになりますが、PC画面（768px以上）になると自動的に横並びに変化します。

/* ❌ 全て重複して書いてしまう */
@media (min-width: 768px) {
  .card-fail {
    background-color: white; /* 🚨 共通のスタイルまで書き直すのはNG */
    display: flex;
    flex-direction: row;
  }
}

/* ⭕️ 変更点（差分）だけを上書きする！ */
.card-success {
  display: flex;
  flex-direction: column; /* 💡 ベースはスマホ用の縦並び */
}
@media (min-width: 768px) {
  .card-success {
    flex-direction: row; /* 💡 PCの時だけ横並びに「上書き」する */
  }
}
HTMLコード表示
<div class="mq-base-wrapper">
  
  <p class="mq-base-caption">⭕️ 画面幅を伸縮させて確認！メディアクエリは「差分」だけを書く！</p>

  <div class="mq-base-demo-area">
    
    <!-- レスポンシブに変化するカード要素 -->
    <div class="responsive-card">
      <div class="card-image-area">
        画像エリア
      </div>
      <div class="card-text-area">
        <div class="card-title">レスポンシブカード</div>
        <p class="card-desc">
          スマホ画面では縦並びになりますが、PC画面（768px以上）になると自動的に横並びに変化します。
        </p>
      </div>
    </div>

  </div>

  <div class="mq-base-code-area">
    <span class="hl-comment">/* ❌ 全て重複して書いてしまう */</span><br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.card-fail</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">white;</span> <span class="hl-comment">/* 🚨 共通のスタイルまで書き直すのはNG */</span><br>
        <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
        <span class="hl-green">flex-direction:</span> <span class="hl-red">row;</span><br>
      }<br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 変更点（差分）だけを上書きする！ */</span><br>
    <span class="hl-blue">.card-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">flex;</span><br>
      <span class="hl-green">flex-direction:</span> <span class="hl-red">column;</span> <span class="hl-comment">/* 💡 ベースはスマホ用の縦並び */</span><br>
    }<br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.card-success</span> {<br>
        <span class="hl-green">flex-direction:</span> <span class="hl-red">row;</span> <span class="hl-comment">/* 💡 PCの時だけ横並びに「上書き」する */</span><br>
      }<br>
    }
  </div>

</div>
CSSコード表示
.mq-base-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.mq-base-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.mq-base-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

/* ＝レスポンシブカードのベース（スマホ用）スタイル＝ */
.responsive-card {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #ced4da;
  overflow: hidden;
  /* スマホファーストで縦並びに設定 */
  display: flex;
  flex-direction: column;
}

.card-image-area {
  background-color: #0d6efd;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  /* スマホでは高さを指定 */
  height: 150px;
  width: 100%;
}

.card-text-area {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.card-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.card-desc {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
  line-height: 1.6;
}

/* ＝💡 メディアクエリ：768px以上（PCサイズ）になった時の「差分」＝ */
@media (min-width: 768px) {
  .responsive-card {
    /* PCでは横並びに上書き！ */
    flex-direction: row;
  }
  
  .card-image-area {
    /* 画像エリアの幅と高さをPC用に調整 */
    width: 40%;
    height: auto;
    min-height: 200px;
  }
  
  .card-text-area {
    /* テキストエリアの幅を調整 */
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ＝コード解説エリア＝ */
.mq-base-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

メディアクエリで様々なパーツに適用したサンプル集からコピペしたい人は「【CSS】レスポンシブデザイン対応の基本：メディアクエリの書き方とパーツ別サンプル集」を一読ください。

【CSS】レスポンシブデザイン対応の基本：メディアクエリの書き方とパーツ別サンプル集

@mediaの基本構文とmin-width/max-widthの違い

メディアクエリを書く際、@mediaの後に記述する条件式でよく使われるのがmin-widthとmax-widthです。

この2つは「どの画面サイズをベース（基準）にしてサイトを作るか」という根本的な設計思想を決定づけます。

  • min-width（〇〇px「以上」）
    基本のCSSをスマホ向けに書き、画面が大きくなった時にPC用のスタイルで上書きする「モバイルファースト」のアプローチ。
  • max-width（〇〇px「以下」）
    基本のCSSをPC向けに書き、画面が小さくなった時にスマホ用のスタイルで上書きする「デスクトップファースト」のアプローチ。

初心者がやってしまいがちなのが、ファイル内でmin-widthとmax-widthを思いつきで混在させてしまうことです。

これにより優先順位が複雑に絡み合い、意図せぬレイアウト崩れを引き起こします。

さらに、「PC用はmin-width: 768px」「スマホ用はmax-width: 768px」と両方を記述してしまうミスです。

これだと画面幅が768pxになった瞬間、両方のスタイルが衝突してレイアウトが崩れるバグが発生します。

ブレイクポイント（切り替わる点）を管理するには、以下の2点です。

  1. 「現代の開発・制作では原則として『モバイルファースト（min-width）』で統一して記述すること」
  2. 「両方を使う場合はmax-width: 767pxとmin-width: 768pxのように『1pxの差』をつけて衝突を完全に回避すること」

⭕️ 画面幅を伸縮！「以上（min）」と「以下（max）」の切り替わりを体感しろ！

min-width の動き

📱 スマホ表示中（ベース状態）

💻 PC表示中（768px以上で上書き発動！）

max-width の動き

💻 PC表示中（ベース状態）

📱 スマホ表示中（767px以下で上書き発動！）

/* ⭕️ 現代の主流（モバイルファースト：min-width） */
.box-min {
  background-color: #e2e3e5; /* 📱 ベースはスマホ用の色 */
}
@media (min-width: 768px) {
  .box-min {
    background-color: #0d6efd; /* 💻 768px「以上」でPC用の色に上書き */
  }
}

/* ⭕️ デスクトップファースト（max-width） ※衝突回避のため767pxにする */
.box-max {
  background-color: #198754; /* 💻 ベースはPC用の色 */
}
@media (max-width: 767px) {
  .box-max {
    background-color: #ffc107; /* 📱 767px「以下」でスマホ用の色に上書き */
  }
}
HTMLコード表示
<div class="mq-width-wrapper">
  
  <p class="mq-width-caption">⭕️ 画面幅を伸縮！「以上（min）」と「以下（max）」の切り替わりを体感しろ！</p>

  <div class="mq-width-demo-area">
    
    <div class="width-demo-row">
      <!-- 💡 min-width（モバイルファースト）のデモ要素 -->
      <div class="demo-box is-min-width">
        <div class="demo-box-title">min-width の動き</div>
        <p class="demo-status is-sp-text">📱 スマホ表示中（ベース状態）</p>
        <p class="demo-status is-pc-text">💻 PC表示中（768px以上で上書き発動！）</p>
      </div>

      <!-- 💡 max-width（デスクトップファースト）のデモ要素 -->
      <div class="demo-box is-max-width">
        <div class="demo-box-title">max-width の動き</div>
        <p class="demo-status is-pc-text">💻 PC表示中（ベース状態）</p>
        <p class="demo-status is-sp-text">📱 スマホ表示中（767px以下で上書き発動！）</p>
      </div>
    </div>

  </div>

  <div class="mq-width-code-area">
    <span class="hl-comment">/* ⭕️ 現代の主流（モバイルファースト：min-width） */</span><br>
    <span class="hl-blue">.box-min</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">#e2e3e5;</span> <span class="hl-comment">/* 📱 ベースはスマホ用の色 */</span><br>
    }<br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.box-min</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">#0d6efd;</span> <span class="hl-comment">/* 💻 768px「以上」でPC用の色に上書き */</span><br>
      }<br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ デスクトップファースト（max-width） ※衝突回避のため767pxにする */</span><br>
    <span class="hl-blue">.box-max</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">#198754;</span> <span class="hl-comment">/* 💻 ベースはPC用の色 */</span><br>
    }<br>
    <span class="hl-blue">@media (max-width: 767px)</span> {<br>
      <span class="hl-blue">.box-max</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">#ffc107;</span> <span class="hl-comment">/* 📱 767px「以下」でスマホ用の色に上書き */</span><br>
      }<br>
    }
  </div>

</div>
CSSコード表示
.mq-width-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.mq-width-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.mq-width-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.width-demo-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 画面幅が広がった時は横並びにする（見栄えのため） */
@media (min-width: 768px) {
  .width-demo-row {
    flex-direction: row;
  }
}

.demo-box {
  flex: 1;
  padding: 30px 20px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  transition: background-color 0.3s ease;
}

.demo-box-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 10px;
}

.demo-status {
  font-weight: bold;
  font-size: 14px;
  margin: 0;
  display: none; /* デフォルトは非表示 */
}


/* ＝＝＝ 💡 1. min-width の挙動（モバイルファースト） ＝＝＝ */
.is-min-width {
  /* スマホ（ベース）のスタイル */
  background-color: #6c757d; 
}
.is-min-width .is-sp-text {
  /* スマホの時はスマホテキストを表示 */
  display: block;
}

@media (min-width: 768px) {
  /* 💻 768px以上でPCスタイルに上書き発動 */
  .is-min-width {
    background-color: #0d6efd; /* 青に変化 */
  }
  .is-min-width .is-sp-text {
    display: none;
  }
  .is-min-width .is-pc-text {
    display: block;
  }
}


/* ＝＝＝ 💡 2. max-width の挙動（デスクトップファースト） ＝＝＝ */
.is-max-width {
  /* PC（ベース）のスタイル */
  background-color: #198754; /* 緑 */
}
.is-max-width .is-pc-text {
  /* PCの時はPCテキストを表示 */
  display: block;
}

@media (max-width: 767px) {
  /* 📱 767px以下でスマホスタイルに上書き発動 */
  .is-max-width {
    background-color: #ffc107; /* 黄色に変化 */
    color: #333; /* 文字色も見やすく変更 */
  }
  .is-max-width .demo-box-title {
    border-bottom-color: rgba(0,0,0,0.2);
  }
  .is-max-width .is-pc-text {
    display: none;
  }
  .is-max-width .is-sp-text {
    display: block;
  }
}

/* ＝コード解説エリア＝ */
.mq-width-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

min-widthとmax-widthの使い方を詳しく知りたい人は「【CSS】min-widthとmax-widthの使い方【レスポンシブ対応】」を一読ください。

【CSS】min-widthとmax-widthの使い方【レスポンシブ対応】

スマホ対応！ブレイクポイントの目安と複数指定の書き方

レスポンシブデザインを実装する上で、「どこからどこまでをスマホ扱いにするか？」という画面幅の境界線のことを ブレイクポイントと呼びます。

メディアクエリでスマホ対応を行う際、ブレイクポイントの数値を間違えたり、CSSを書く順番を間違えたりすると、「タブレットで見た時にレイアウトが崩壊する」「狙った画面サイズでCSSが効かない」といったトラブルに会います。

特定の画面幅だけを狙うメディアクエリにおける複数条件の指定方法、実務で必須となるブレイクポイントの設計と書き方について解説します。

ブレイクポイントの目安と複数指定の書き方
  • スマホ・タブレット・PCの一般的なブレイクポイント一覧
  • スマホファースト（モバイルファースト）でのCSSの書き順ルール
  • 〇〇px以上〜〇〇px以下など複数条件を組み合わせる指定

スマホ・タブレット・PCの一般的なブレイクポイント一覧

「どの数値をブレイクポイントに設定すればいいのか？」は、主流とともに変化するため正解がありません。

しかし、現在のWeb制作の実務において、多くの現場やフレームワークで採用されている「デファクトスタンダード（事実上の標準）」となる数値が存在します。

【現在の一般的なブレイクポイントの目安】

  • スマホ（スマートフォン）： ~ 767px（ベーススタイルとして記述）
  • タブレット（iPadなど）： 768px ~
  • PC（ラップトップ・デスクトップ）： 1024px ~ （または 1080px / 1200px ~）

ブレイクポイントを決める際は、「デバイスのサイズに合わせるのではなく『コンテンツのレイアウトが崩れるタイミング』でブレイクポイントを設けること」です。

もしくは「悩んだら上記の標準的な数値（768px / 1024px）で3段階に分けること」です。

⭕️ 画面幅を伸縮させて確認！標準的な3段階のブレイクポイント！

📱 スマホサイズ（767px以下）

💻 タブレットサイズ（768px以上）

🖥️ PCサイズ（1024px以上）

/* 💡 1. スマホ向け（ベース） */
.status-box {
  background-color: #6c757d;
}

/* 💡 2. タブレット向け（768px以上） */
@media (min-width: 768px) {
  .status-box {
    background-color: #198754;
  }
}

/* 💡 3. PC向け（1024px以上） */
@media (min-width: 1024px) {
  .status-box {
    background-color: #0d6efd;
  }
}
HTMLコード表示
<div class="bp-wrapper">
  
  <p class="bp-caption">⭕️ 画面幅を伸縮させて確認！標準的な3段階のブレイクポイント！</p>

  <div class="bp-demo-area">
    <div class="device-status-box">
      <!-- 画面サイズに応じて表示されるテキストが切り替わります -->
      <p class="status-sp">📱 スマホサイズ（767px以下）</p>
      <p class="status-tab">💻 タブレットサイズ（768px以上）</p>
      <p class="status-pc">🖥️ PCサイズ（1024px以上）</p>
    </div>
  </div>

  <div class="bp-code-area">
    <span class="hl-comment">/* 💡 1. スマホ向け（ベース） */</span><br>
    <span class="hl-blue">.status-box</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">#6c757d;</span><br>
    }<br><br>

    <span class="hl-comment">/* 💡 2. タブレット向け（768px以上） */</span><br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.status-box</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">#198754;</span><br>
      }<br>
    }<br><br>

    <span class="hl-comment">/* 💡 3. PC向け（1024px以上） */</span><br>
    <span class="hl-blue">@media (min-width: 1024px)</span> {<br>
      <span class="hl-blue">.status-box</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">#0d6efd;</span><br>
      }<br>
    }
  </div>

</div>
CSSコード表示
.bp-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.bp-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.bp-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

/* ＝ブレイクポイントのデモボックス＝ */
.device-status-box {
  padding: 40px 20px;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  transition: background-color 0.3s ease;
  
  /* 💡 1. スマホ向け（ベーススタイル） */
  background-color: #6c757d; /* グレー */
}

/* テキストの表示切り替え（ベースはスマホのみ表示） */
.device-status-box p {
  margin: 0;
}
.status-sp { display: block; }
.status-tab { display: none; }
.status-pc { display: none; }

/* 💡 2. タブレット向け（768px以上で上書き） */
@media (min-width: 768px) {
  .device-status-box {
    background-color: #198754; /* 緑 */
  }
  .status-sp { display: none; }
  .status-tab { display: block; }
  .status-pc { display: none; }
}

/* 💡 3. PC向け（1024px以上でさらに上書き） */
@media (min-width: 1024px) {
  .device-status-box {
    background-color: #0d6efd; /* 青 */
  }
  .status-sp { display: none; }
  .status-tab { display: none; }
  .status-pc { display: block; }
}

/* ＝コード解説エリア＝ */
.bp-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

スマホファースト（モバイルファースト）でのCSSの書き順ルール

min-widthを使ったモバイルファーストのアプローチでは、CSSを記述する「順番」が重要になります。

CSSは「カスケード（滝のように上から下へ流れる）」という性質を持っており、同じプロパティが指定された場合、「ファイルの下の方に書かれたコード」が優先（上書き）されるからです。

min-widthを使ってモバイルファーストで記述する際は、「『ベース（スマホ）』→『タブレット（768pxなど中間の数値）』→『PC（1024pxなど大きい数値）』と、ブレイクポイントの数値が小さい順（狭い画面→広い画面）に上から下へ記述すること」です。

これを破るとレイアウトが崩壊します。

⭕️ min-width は必ず「数値が小さい順（上から下へ）」に書け！

❌ 罠（大きい数値を上に書く）

1024pxの指定が上にあり、768pxの指定が下にある状態。

※PC画面で見ても、下にあるタブレット用のスタイルに上書きされてしまうバグが発生！

⭕️ 成功（小さい数値から順に書く）

ベース → 768px → 1024px の正しい順序で記述。

※画面幅に応じて、正しい順番でスタイルが上書きされていく！

/* ❌ 罠：記述の順番が逆（PCでタブレットのスタイルが効いてしまう） */
@media (min-width: 1024px) {
  .box-fail { background-color: blue; }
}
@media (min-width: 768px) {
  .box-fail { background-color: green; } /* 🚨 PCサイズでもこの指定が下にあるため緑になってしまう！ */
}

/* ⭕️ プロの鉄則：数値が小さい順に上から下へ書く！ */
@media (min-width: 768px) {
  .box-success { background-color: green; }
}
@media (min-width: 1024px) {
  .box-success { background-color: blue; } /* 💡 PCサイズなら、緑を上書きして青になる */
}
HTMLコード表示
<div class="order-wrapper">
  
  <p class="order-caption">⭕️ min-width は必ず「数値が小さい順（上から下へ）」に書け！</p>

  <div class="order-demo-area">
    
    <div class="order-flex-row">
      <!-- ❌ 罠：順番を間違えた場合 -->
      <div class="order-box is-trap-order">
        <h4 class="order-box-title" style="color:#dc3545;">❌ 罠（大きい数値を上に書く）</h4>
        <p>1024pxの指定が上にあり、768pxの指定が下にある状態。</p>
        <p>※PC画面で見ても、下にあるタブレット用のスタイルに上書きされてしまうバグが発生！</p>
      </div>

      <!-- ⭕️ 成功：正しい順番の場合 -->
      <div class="order-box is-success-order">
        <h4 class="order-box-title" style="color:#0d6efd;">⭕️ 成功（小さい数値から順に書く）</h4>
        <p>ベース → 768px → 1024px の正しい順序で記述。</p>
        <p>※画面幅に応じて、正しい順番でスタイルが上書きされていく！</p>
      </div>
    </div>

  </div>

  <div class="order-code-area">
    <span class="hl-comment">/* ❌ 罠：記述の順番が逆（PCでタブレットのスタイルが効いてしまう） */</span><br>
    <span class="hl-blue">@media (min-width: 1024px)</span> {<br>
      <span class="hl-blue">.box-fail</span> { <span class="hl-green">background-color:</span> <span class="hl-red">blue;</span> }<br>
    }<br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.box-fail</span> { <span class="hl-green">background-color:</span> <span class="hl-red">green;</span> } <span class="hl-comment">/* 🚨 PCサイズでもこの指定が下にあるため緑になってしまう！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 数値が小さい順に上から下へ書く！ */</span><br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.box-success</span> { <span class="hl-green">background-color:</span> <span class="hl-red">green;</span> }<br>
    }<br>
    <span class="hl-blue">@media (min-width: 1024px)</span> {<br>
      <span class="hl-blue">.box-success</span> { <span class="hl-green">background-color:</span> <span class="hl-red">blue;</span> } <span class="hl-comment">/* 💡 PCサイズなら、緑を上書きして青になる */</span><br>
    }
  </div>

</div>
CSSコード表示
.order-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.order-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.order-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.order-flex-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .order-flex-row {
    flex-direction: row;
  }
}

.order-box {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  border: 2px solid transparent;
}

.order-box-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* ＝＝＝ ❌ 罠：順番を間違えたCSS ＝＝＝ */
.is-trap-order {
  background-color: #6c757d; /* ベース：グレー */
}

/* 先に大きい数値(1024px)を書いてしまう */
@media (min-width: 1024px) {
  .is-trap-order {
    background-color: #0d6efd; /* 青にしたい */
  }
}
/* その後に小さい数値(768px)を書いてしまう */
@media (min-width: 768px) {
  .is-trap-order {
    background-color: #198754; /* 緑。PCでも条件を満たすため、こちらが最終的に上書きしてしまう！ */
  }
}


/* ＝＝＝ ⭕️ 成功：正しい順番のCSS ＝＝＝ */
.is-success-order {
  background-color: #6c757d; /* ベース：グレー */
}

/* 正しい順序：小さい数値(768px)から */
@media (min-width: 768px) {
  .is-success-order {
    background-color: #198754; /* 緑 */
  }
}
/* 次に大きい数値(1024px)を書く */
@media (min-width: 1024px) {
  .is-success-order {
    background-color: #0d6efd; /* 青。PCではこちらが勝ち、正しく表示される */
  }
}

/* ＝コード解説エリア＝ */
.order-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

〇〇px以上〜〇〇px以下など複数条件を組み合わせる指定

通常はmin-widthで上書きしていくのがベストですが、「タブレットのサイズ（例えば768px〜1023pxの間）の時だけ、特別なスタイルを当てたい」というケースもあります。

そんな時に使うのがand演算子を用いて条件を組み合わせるメディアクエリにおける複数の指定方法です。

@media (min-width: 768px) and (max-width: 1023px)と記述することで、「768px以上かつ1023px以下」という限定的な範囲を作ることができます。

複数条件を組み合わせる際は、「andの前後には『半角スペース』を入れること」です。

そして、「複数条件は『タブレット限定で余白を変えたい』などの局所的な調整にのみ使い、基本のレイアウト構築はmin-widthの単一指定で行うこと」です。

多用すると、どこでどのスタイルが当たっているのか把握できなくなり、保守性が低下します。

⭕️ 特定の画面幅「だけ」を狙い撃ちしたい時は、andで条件を組み合わせろ！

タブレット限定デザイン

画面幅が 768px 以上、かつ 1023px 以下の時「のみ」、このボックスは特別なデザイン（オレンジ色で丸くなる）に変化します。

📱 スマホ（〜767px） 💻 タブレット（768px 〜 1023px）🎯 狙い撃ち中！ 🖥️ PC（1024px〜）
/* ❌ 罠：and の前後にスペースがない（構文エラーで無視される） */
@media (min-width: 768px)and(max-width: 1023px) {
  /* 🚨 動かない！ */
}

/* ⭕️ and の前後には必ず半角スペースを入れる！ */
@media (min-width: 768px) and (max-width: 1023px) {
  .target-box {
    background-color: #fd7e14; /* 💡 タブレットサイズの時「のみ」オレンジ色になる */
    border-radius: 50px;
  }
}
HTMLコード表示
<div class="multi-cond-wrapper">
  
  <p class="multi-cond-caption">⭕️ 特定の画面幅「だけ」を狙い撃ちしたい時は、andで条件を組み合わせろ！</p>

  <div class="multi-cond-demo-area">
    
    <div class="target-box">
      <div class="target-title">タブレット限定デザイン</div>
      <p class="target-desc">
        画面幅が 768px 以上、かつ 1023px 以下の時「のみ」、このボックスは特別なデザイン（オレンジ色で丸くなる）に変化します。
      </p>
      
      <!-- 画面サイズを可視化するラベル -->
      <div class="size-label-wrap">
        <span class="size-label is-sp">📱 スマホ（〜767px）</span>
        <span class="size-label is-tab">💻 タブレット（768px 〜 1023px）🎯 狙い撃ち中！</span>
        <span class="size-label is-pc">🖥️ PC（1024px〜）</span>
      </div>
    </div>

  </div>

  <div class="multi-cond-code-area">
    <span class="hl-comment">/* ❌ 罠：and の前後にスペースがない（構文エラーで無視される） */</span><br>
    <span class="hl-blue">@media (min-width: 768px)and(max-width: 1023px)</span> {<br>
      <span class="hl-comment">/* 🚨 動かない！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ and の前後には必ず半角スペースを入れる！ */</span><br>
    <span class="hl-blue">@media (min-width: 768px) and (max-width: 1023px)</span> {<br>
      <span class="hl-blue">.target-box</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">#fd7e14;</span> <span class="hl-comment">/* 💡 タブレットサイズの時「のみ」オレンジ色になる */</span><br>
        <span class="hl-green">border-radius:</span> <span class="hl-red">50px;</span><br>
      }<br>
    }
  </div>

</div>
CSSコード表示
.multi-cond-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.multi-cond-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.multi-cond-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

/* ＝ベースのスタイル（スマホ＆PC共通）＝ */
.target-box {
  background-color: #343a40; /* ベースは黒 */
  color: #fff;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  max-width: 500px;
  transition: all 0.3s ease;
}

.target-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 10px;
}

.target-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* サイズラベルの表示制御 */
.size-label {
  display: none;
  font-weight: bold;
  background-color: #fff;
  color: #333;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 13px;
}
.is-sp { display: inline-block; }

/* ＝＝＝ 💡 複数条件（タブレット限定）の指定 ＝＝＝ */
@media (min-width: 768px) and (max-width: 1023px) {
  .target-box {
    /* タブレットサイズの時「だけ」特別に当てるスタイル */
    background-color: #fd7e14; /* オレンジ色 */
    border-radius: 50px;       /* 角を丸くする */
    transform: scale(1.05);    /* 少し大きくする */
  }
  
  /* ラベルの切り替え */
  .is-sp { display: none; }
  .is-tab { display: inline-block; color: #fd7e14; }
}

/* PCサイズになったらベースに戻りつつ、ラベルだけ変える */
@media (min-width: 1024px) {
  .is-sp { display: none; }
  .is-tab { display: none; }
  .is-pc { display: inline-block; }
}

/* ＝コード解説エリア＝ */
.multi-cond-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

メディアクエリが効かない！原因と解決策

メディアクエリが効かない原因は、実はシンプルで「3つのケアレスミス」のどれかに当てはまることがほとんどです。

ここでは、実務でもよく陥る罠と解決策をチェックリストとして解説します。

メディアクエリが効かない！原因と解決策
  • HTMLに「meta viewport」タグを書き忘れている
  • CSSを書く順番が間違っている
  • 全角スペースの混入や波括弧 {} の閉じ忘れ

HTMLに「meta viewport」タグを書き忘れている

「PCのChromeの開発者ツールではちゃんとレスポンシブになるのに、実際のスマホ実機で確認するとPCサイトがそのまま小さく表示される」という場合、原因は100%これです。

メディアクエリを正しく動作させるには、HTMLの<head>タグ内に「ブラウザの表示領域（viewport）をデバイスの画面幅に合わせる」という指示を書かなければなりません。

レスポンシブ対応を行う際は、「CSSを1行書く前に、HTMLの<head>内に<meta name="viewport" content="width=device-width, initial-scale=1.0">を記述すること」です。

これを忘れたらデザインレイアウトが崩壊します。

⭕️ Viewportタグがないと、スマホはPC画面を無理やり縮小してしまう！

❌ 罠（Viewportタグなし）
PCサイトがそのまま極小サイズで表示される

PC用ヘッダー
文字が小さすぎて全く読めない。ボタンもタップできない。

⭕️ 成功（Viewportタグあり）
画面幅に最適化され、メディアクエリが発動！

スマホ
文字が適切な大きさになり、読みやすい！
<!– ⭕️ headタグ内に必ずこの1行を入れる！ –>
<head>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
HTMLコード表示
<div class="err-vp-wrapper">
  
  <p class="err-vp-caption">⭕️ Viewportタグがないと、スマホはPC画面を無理やり縮小してしまう！</p>

  <div class="err-vp-demo-area">
    
    <!-- ❌ 罠：Viewportがないスマホ画面のシミュレーション -->
    <div class="err-vp-item">
      <p class="err-vp-label" style="color:#dc3545;">❌ 罠（Viewportタグなし）<br><small>PCサイトがそのまま極小サイズで表示される</small></p>
      
      <div class="mock-phone">
        <div class="mock-screen is-trap-vp">
          <header class="mock-header">PC用ヘッダー</header>
          <div class="mock-content">文字が小さすぎて全く読めない。ボタンもタップできない。</div>
        </div>
      </div>
    </div>

    <!-- ⭕️ 成功：Viewportがあるスマホ画面 -->
    <div class="err-vp-item">
      <p class="err-vp-label" style="color:#0d6efd;">⭕️ 成功（Viewportタグあり）<br><small>画面幅に最適化され、メディアクエリが発動！</small></p>
      
      <div class="mock-phone">
        <div class="mock-screen is-success-vp">
          <header class="mock-header">スマホ</header>
          <div class="mock-content">文字が適切な大きさになり、読みやすい！</div>
        </div>
      </div>
    </div>

  </div>

  <div class="err-vp-code-area">
    <span class="hl-comment"><!-- ⭕️ headタグ内に必ずこの1行を入れる！ --></span><br>
    <span class="hl-blue"><head></span><br>
      <span class="hl-blue"><meta <span class="hl-green">name=</span><span class="hl-red">"viewport"</span> <span class="hl-green">content=</span><span class="hl-red">"width=device-width, initial-scale=1.0"</span>></span><br>
    <span class="hl-blue"></head></span>
  </div>

</div>
CSSコード表示
.err-vp-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.err-vp-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.err-vp-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.err-vp-item {
  width: 220px;
  text-align: center;
}

.err-vp-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 擬似スマホ端末のモックアップ */
.mock-phone {
  width: 200px;
  height: 300px;
  background-color: #333;
  border-radius: 20px;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

.mock-screen {
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* モックアップ内のパーツ */
.mock-header {
  background-color: #0d6efd;
  color: #fff;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

.mock-content {
  padding: 15px;
  line-height: 1.6;
}

/* ＝❌ 罠：Viewportなし（PC版が縮小されたように見せる）＝ */
.is-trap-vp .mock-header {
  font-size: 8px;
  padding: 5px;
}
.is-trap-vp .mock-content {
  font-size: 7px;
  padding: 10px;
}

/* ＝⭕️ 成功：Viewportあり（最適化された文字サイズ）＝ */
.is-success-vp .mock-header {
  font-size: 14px;
  padding: 15px;
}
.is-success-vp .mock-content {
  font-size: 14px;
  padding: 15px;
}

/* ＝コード解説エリア＝ */
.err-vp-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

基本的なHTML構造やCSSの優先順位について詳しく知りたい人は以下から一読ください。

CSSを書く順番が間違っている

「メディアクエリの構文は合っているのに、PCサイズにしても色が切り替わらない！」という場合に疑うべきなのが、CSSを記述する「順番」です。

CSSは、その名の通り「上から下へ流れるように」読み込まれます。

そのため、全く同じセレクタ（クラス名）があった場合、ファイルの下の方に書かれた指定が上の指定を強制的に上書きしてしまいます。

スタイルが効かない時は、「メディアクエリの指定は、『ベースとなるスタイル』よりも【下】に書くこと」です。

つまり、「共通スタイルを上に書き、条件分岐（メディアクエリ）はファイルの末尾の方にまとめる」のがよいです。

⭕️ メディアクエリは必ず「ベースのスタイルより下」に書け！

❌ 罠（メディアクエリが上）
下に書かれたベーススタイルに上書きされる

PCサイズなのに
グレーのまま！（バグ）

⭕️ 成功（メディアクエリが下）
条件を満たした時だけ正しく上書きされる！

正しく上書きされ
青色に変化する！
/* ❌ メディアクエリをベースより上に書いてしまう */
@media (min-width: 768px) {
  .box-fail { background-color: blue; } /* 1. ここで青になるはずが… */
}
.box-fail {
  background-color: gray; /* 🚨 2. 下にあるこのベーススタイルに強制上書きされる！ */
}

/* ⭕️ ベースを上に書き、メディアクエリを下に書く！ */
.box-success {
  background-color: gray; /* 💡 1. まずベースをグレーにする */
}
@media (min-width: 768px) {
  .box-success {
    background-color: blue; /* 💡 2. 条件を満たした時だけ、正しく「後出し」で青に上書きされる！ */
  }
}
HTMLコード表示
<div class="err-ord-wrapper">
  
  <p class="err-ord-caption">⭕️ メディアクエリは必ず「ベースのスタイルより下」に書け！</p>

  <div class="err-ord-demo-area">
    
    <!-- ❌ 罠：メディアクエリを上に書いた場合 -->
    <div class="err-ord-item">
      <p class="err-ord-label" style="color:#dc3545;">❌ 罠（メディアクエリが上）<br><small>下に書かれたベーススタイルに上書きされる</small></p>
      
      <!-- PCサイズを想定していますが、下にあるスタイルに負けてグレーになります -->
      <div class="demo-box is-trap-ord">
        PCサイズなのに<br>グレーのまま！（バグ）
      </div>
    </div>

    <!-- ⭕️ 成功：メディアクエリを下に書いた場合 -->
    <div class="err-ord-item">
      <p class="err-ord-label" style="color:#0d6efd;">⭕️ 成功（メディアクエリが下）<br><small>条件を満たした時だけ正しく上書きされる！</small></p>
      
      <div class="demo-box is-success-ord">
        正しく上書きされ<br>青色に変化する！
      </div>
    </div>

  </div>

  <div class="err-ord-code-area">
    <span class="hl-comment">/* ❌ メディアクエリをベースより上に書いてしまう */</span><br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.box-fail</span> { <span class="hl-green">background-color:</span> <span class="hl-red">blue;</span> } <span class="hl-comment">/* 1. ここで青になるはずが... */</span><br>
    }<br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">gray;</span> <span class="hl-comment">/* 🚨 2. 下にあるこのベーススタイルに強制上書きされる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ ベースを上に書き、メディアクエリを下に書く！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">gray;</span> <span class="hl-comment">/* 💡 1. まずベースをグレーにする */</span><br>
    }<br>
    <span class="hl-blue">@media (min-width: 768px)</span> {<br>
      <span class="hl-blue">.box-success</span> {<br>
        <span class="hl-green">background-color:</span> <span class="hl-red">blue;</span> <span class="hl-comment">/* 💡 2. 条件を満たした時だけ、正しく「後出し」で青に上書きされる！ */</span><br>
      }<br>
    }
  </div>

</div>
CSSコード表示
.err-ord-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.err-ord-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.err-ord-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.err-ord-item {
  width: 250px;
  text-align: center;
}

.err-ord-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 共通のボックススタイル */
.demo-box {
  padding: 30px 20px;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
}

/* ＝＝＝ ❌ 罠：メディアクエリを上に書いた状態の再現 ＝＝＝ */
/* （メディアクエリが上にあると仮定） */
@media (min-width: 0px) {
  .is-trap-ord {
    background-color: #0d6efd; /* 青にしたい */
  }
}
/* その下にベーススタイルが書いてある */
.is-trap-ord {
  background-color: #6c757d; /* 🚨 ここで最終的にグレーに上書きされてしまう！ */
}

/* ＝＝＝ ⭕️ 成功：メディアクエリを下に書いた状態の再現 ＝＝＝ */
/* 先にベーススタイルを書く */
.is-success-ord {
  background-color: #6c757d; /* グレー */
}
/* その下にメディアクエリを書く */
@media (min-width: 0px) { /* デモ用に必ず発動する条件にしています */
  .is-success-ord {
    background-color: #0d6efd; /* 💡 正しく後出しで青に上書きされる！ */
  }
}

/* ＝コード解説エリア＝ */
.err-ord-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

全角スペースの混入や波括弧 {} の閉じ忘れ

「Viewportも書いたし、順番も完璧！なのに特定の位置から下のCSSが全く効かなくなった！」という場合、CSSの構文エラー（シンタックスエラー）です。

たった1文字のミスで、何百行ものコードがすべて無効化されてしまいます。

目に見えないエラーを防ぐには、「VSCodeなどのエディタの設定で『全角スペースを強調表示（ハイライト）』するようにし、コードの『インデント（字下げ）』を常に整えて括弧のペアを視覚的に把握すること」です。

⭕️ たった1文字の全角スペースや、カッコの閉じ忘れが全てを破壊する！

❌ エラー1：全角スペースの混入
@media (min-width:　768px) {
  .box {
    background-color: blue;
  }
}

コロンの後に全角スペース（□）が混ざっているため、このメディアクエリは完全に無視されます。

❌ エラー2：波括弧 } の閉じ忘れ
@media (min-width: 768px) {
  .box {
    background-color: blue;
← 🚨 クラスの閉じ括弧「}」がない！
} ← メディアクエリの閉じ括弧が、クラスの閉じ括弧だと誤認される

.footer {
  color: white; ← 🚨 ここから下のCSSが全て死ぬ！
}

閉じ括弧が1つ足りないだけで、それ以降に書いた関係のないCSSまで全て効かなくなります。

/* ⭕️ インデント（字下げ）を綺麗に揃えれば、カッコのミスは防げる！ */
@media (min-width: 768px) { /* ← 大枠の開始 */

  .box-success { /* ← 中枠の開始（字下げする） */
    background-color: blue;
  } /* ← 中枠の終了 */

} /* ← 大枠の終了。インデントが揃っていれば、一目で閉じてあるか確認できる！ */
HTMLコード表示
<div class="err-syn-wrapper">
  
  <p class="err-syn-caption">⭕️ たった1文字の全角スペースや、カッコの閉じ忘れが全てを破壊する！</p>

  <div class="err-syn-demo-area">
    
    <div class="syn-code-blocks">
      <!-- ❌ 罠1：全角スペース -->
      <div class="syn-block">
        <div class="syn-title" style="color:#dc3545;">❌ エラー1：全角スペースの混入</div>
        <div class="syn-fake-code">
          @media (min-width:<span class="zenkaku-alert">　</span>768px) {<br>
            .box {<br>
              background-color: blue;<br>
            }<br>
          }
        </div>
        <p class="syn-desc">コロンの後に全角スペース（□）が混ざっているため、このメディアクエリは完全に無視されます。</p>
      </div>

      <!-- ❌ 罠2：波括弧の閉じ忘れ -->
      <div class="syn-block">
        <div class="syn-title" style="color:#dc3545;">❌ エラー2：波括弧 } の閉じ忘れ</div>
        <div class="syn-fake-code">
          @media (min-width: 768px) {<br>
            .box {<br>
              background-color: blue;<br>
          <span class="missing-bracket">← 🚨 クラスの閉じ括弧「}」がない！</span><br>
          } <span class="bracket-note">← メディアクエリの閉じ括弧が、クラスの閉じ括弧だと誤認される</span><br>
          <br>
          .footer {<br>
            color: white; <span class="missing-bracket">← 🚨 ここから下のCSSが全て死ぬ！</span><br>
          }
        </div>
        <p class="syn-desc">閉じ括弧が1つ足りないだけで、それ以降に書いた関係のないCSSまで全て効かなくなります。</p>
      </div>
    </div>

  </div>

  <div class="err-syn-code-area">
    <span class="hl-comment">/* ⭕️ インデント（字下げ）を綺麗に揃えれば、カッコのミスは防げる！ */</span><br>
    <span class="hl-blue">@media (min-width: 768px)</span> { <span class="hl-comment">/* ← 大枠の開始 */</span><br>
    <br>
      <span class="hl-blue">.box-success</span> { <span class="hl-comment">/* ← 中枠の開始（字下げする） */</span><br>
        <span class="hl-green">background-color:</span> <span class="hl-red">blue;</span><br>
      } <span class="hl-comment">/* ← 中枠の終了 */</span><br>
    <br>
    } <span class="hl-comment">/* ← 大枠の終了。インデントが揃っていれば、一目で閉じてあるか確認できる！ */</span>
  </div>

</div>
CSSコード表示
.err-syn-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.err-syn-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.err-syn-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.syn-code-blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .syn-code-blocks {
    flex-direction: row;
  }
}

.syn-block {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.syn-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}

.syn-fake-code {
  background-color: #f1f3f5;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
  border-left: 3px solid #dc3545;
}

.zenkaku-alert {
  background-color: #ffc107;
  color: #dc3545;
  font-weight: bold;
  position: relative;
}
.zenkaku-alert::after {
  content: "←ココ！";
  position: absolute;
  top: -15px;
  left: 0;
  font-size: 10px;
  white-space: nowrap;
}

.missing-bracket {
  color: #dc3545;
  font-weight: bold;
  font-size: 11px;
}
.bracket-note {
  color: #6c757d;
  font-style: italic;
  font-size: 11px;
}

.syn-desc {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
  line-height: 1.5;
}

/* ＝コード解説エリア＝ */
.err-syn-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • メディアクエリ内には変更点（差分）のみを記述し、共通スタイルは重複させない。
  • 現代の主流はmin-widthを基準とした「モバイルファースト」のアプローチである。
  • ブレイクポイントの標準的な目安は、スマホ（〜767px）、タブレット（768px〜）、PC（1024px〜）。
  • 特定の端末サイズに依存せず、レイアウトが崩れるタイミングでブレイクポイントを設定する。
  • min-widthは「数値が小さい順（上から下へ）」に記述する（逆だと上書きされてバグる）。
  • 特定の範囲を指定する複数条件（and）では、前後の「半角スペース」が必須である。
  • レスポンシブ対応を機能させるには、HTMLの<head>内にmeta viewportタグの記述が絶対条件である。
  • メディアクエリの記述は、ベースとなる共通スタイルよりも「下」に記述する。
  • 全角スペースの混入や波括弧{ }の閉じ忘れは、CSS全体を無効化する構文エラーの原因となる。

よくある質問（FAQ）

メディアクエリとは何ですか？

Webサイトをスマートフォン、タブレット、PCなど異なる画面サイズに合わせて、レイアウトやデザインを自動的に切り替える（レスポンシブ対応）CSSの機能です。

@mediaという記述を使って、「画面幅が〇〇px以上ならこのスタイルを適用する」といった条件分岐を作ることができます。

これにより、1つのHTMLファイルであらゆる端末に対応することが可能になります。

スマホやPCの一般的なブレイクポイントの目安はいくつですか？

ターゲット層やデザインによって正解は異なりますが、現代のWeb制作の実務において標準的に使われることが多い目安は以下の通りです。

  • スマートフォン向け：〜767px
  • タブレット向け：768px〜1023px
  • PC向け：1024px〜

悩んだ場合は、これらの数値を基準にしてレイアウトを調整していくとスムーズです。

メディアクエリのmin-widthとmax-widthの違いは何ですか？

どちらを基準にしてサイトを作るか（設計思想）の違いです。

  • min-width（〇〇px以上）
    スマホ用のデザインをベースに作り、画面が大きくなるにつれてPC用のスタイルを上書きしていく「モバイルファースト」の手法で使われます。
    現代の開発の主流はこちらです。
  • max-width（〇〇px以下）
    PC用のデザインをベースに作り、画面が小さくなるにつれてスマホ用のスタイルを上書きしていく「デスクトップファースト」の手法で使われます。
メディアクエリはCSSファイルのどこに書くべきですか？

メディアクエリの記述は、ベースとなる共通のCSSよりも「下」に書いてください。

CSSは「下にある記述が優先して上書きされる」というルールがあるため、メディアクエリを上に書いてしまうと、通常のスタイルに負けてしまい設定が反映されません。

また、min-widthを使ってモバイルファーストで書く場合は、「数値が小さい順（768px → 1024px）」に上から下へ記述していくのがよいです。

メディアクエリを正しく書いたはずなのに効かないのはなぜですか？

実務でもよくある原因は、主に以下の3つです。

  1. Viewportタグの書き忘れ
    HTMLの<head>内に<meta name="viewport" content="width=device-width, initial-scale=1.0">を書き忘れていると、スマホ実機で見た時にメディアクエリが発動しません。
  2. 書く順番の間違い
    ベーススタイルより上に書いている、またはmin-widthの数値が大きい順（PC→スマホ）に書かれていることで、意図せず上書きされてしまっているケースです。
  3. 構文エラー（タイポ）
    @media (min-width: 768px)のandや括弧の前後の半角スペース忘れ、波括弧{ }の閉じ忘れ、目に見えない全角スペースの混入がないかを確認してください。
CONTACT

サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。

お問い合わせページへ
WordPress移行
Webサイトを公開しよう！

「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。

おすすめサーバー4選を見る
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次