【CSS】メディアクエリとは？スマホ対応の書き方やmax-widthが効かない原因

スマホでは1カラム、PCでは2カラムにしたい。画面幅が狭いときだけ文字サイズを小さくしたい。そんなレスポンシブ対応で使うのがCSSのメディアクエリです。一方で、初心者の方は「max-widthとmin-widthの違いがわからない」「書いたのにスマホで効かない」「ブレイクポイントは何pxにすればいい？」と迷いやすいです。

この記事では、基本の書き方、max-widthとmin-widthの違い、スマホ対応の実務コード、効かない原因まで解説します。

CSSのメディアクエリとは？

メディアクエリとは、条件に一致したときだけCSSを適用する仕組みです。

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

この例では、画面幅が768px以下のときだけ.containerの余白を16pxにします。

@mediaを使って条件を書く

メディアクエリは、@mediaのあとに条件を書き、その中に適用したいCSSを書きます。

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

メディアクエリは、スマホ・タブレット・PCなど、画面幅に応じて見た目を変えるレスポンシブ対応の基本です。

max-widthとmin-widthの違い

メディアクエリで最も混同しやすいのが、max-widthとmin-widthです。

条件	意味	よく使う考え方
max-width: 768px	768px以下のとき	PC基準で作り、スマホ側を上書きする
min-width: 769px	769px以上のとき	スマホ基準で作り、PC側を広げる

max-widthは「この幅以下」

max-widthは、指定した幅以下のときにCSSを適用します。

@media (max-width: 768px) {
  .layout {
    display: block;
  }
}

PCでは横並び、スマホでは縦並びにしたいときによく使います。

min-widthは「この幅以上」

min-widthは、指定した幅以上のときにCSSを適用します。

@media (min-width: 769px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
  }
}

スマホを基本に作り、画面が広くなったらPC用レイアウトへ広げる考え方です。

max-widthとmin-widthを混ぜすぎると、どのCSSが効いているか分かりにくくなります。案件ごとに「PC基準」か「スマホ基準」かを決めておきましょう。

応用：複数の条件を組み合わせる（and）

「スマホ以上、PC未満のタブレットだけに適用したい」というように、範囲を限定したい場合は and を使って条件を組み合わせます。

たとえば、「画面幅が600px以上、かつ1023px以下のときだけ」CSSを適用したい場合は以下のように記述します。

@media (min-width: 600px) and (max-width: 1023px) {
  .tablet-only {
    background-color: #f0f0f0;
    padding: 24px;
  }
}

このように and で繋ぐことで、特定のデバイスサイズ（タブレットなど）だけに狙いを絞った細かいレスポンシブ調整が可能になります。min-width と max-width の順番が逆になっても動作は変わりませんが、基本的には数値が小さい方（min）を左側に書くのが一般的です。

最新の書き方：比較演算子が使える（Range Syntax）

これまでは max-width や min-width を使ってきましたが、最新のCSS（Media Queries Level 4）では、数学の不等号（< <= > >=）を使ってより直感的に書けるようになりました。

「以下」や「以上」の新しい書き方

たとえば、「768px以下」を指定する場合、これまでは (max-width: 768px) と書いていましたが、最新の構文では以下のように書けます。

/* 従来の書き方 */
@media (max-width: 768px) { ... }

/* 最新の書き方（同じ意味になります） */
@media (width <= 768px) { ... }

「widthが768px以下（<=）」という見た目通りの意味になるため、初心者の方でもコードが読みやすくなります。

範囲指定（and）もスッキリ書ける

先ほどの「600px以上〜1023px以下」という範囲指定も、最新の構文なら1行で簡潔に記述できます。

/* 最新の書き方で範囲を指定 */
@media (600px <= width <= 1023px) {
  .tablet-only {
    /* ここにスタイルを書く */
  }
}

現在では、主要なブラウザ（Chrome, Safari, Edge, Firefox）の最新バージョンでこの書き方がサポートされています。これからの時代のスタンダードな書き方として、ぜひセットで覚えておきましょう。

スマホ対応でよく使うメディアクエリの書き方

ここでは、実務でよく使うパターンを紹介します。

PCの2カラムをスマホで1カラムにする

<div class="layout">
  <main class="main">本文</main>
  <aside class="sidebar">サイドバー</aside>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

このコードでは、PCでは本文とサイドバーを横並びにし、768px以下では1カラムにしています。

スマホ対応では、横並びを1カラムに戻すメディアクエリが非常によく使われます。

スマホだけ文字サイズを調整する

スマホで見出しが大きすぎる場合は、メディアクエリ内で文字サイズを調整します。

.page-title {
  font-size: 36px;
}

@media (max-width: 600px) {
  .page-title {
    font-size: 26px;
  }
}

文字サイズを画面幅に合わせて極端に変えすぎると、読みづらくなります。スマホでも読みやすい範囲で調整しましょう。

スマホだけ固定ボタンの位置を変える

固定ボタンがスマホで本文に重なる場合は、メディアクエリでサイズや位置を変えます。

.page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
}

@media (max-width: 600px) {
  .page-top {
    right: 12px;
    bottom: 12px;
  }
}

ブレイクポイントは何pxにすればいい？

ブレイクポイントとは、デザインを切り替える画面幅のことです。

よく使われる目安は次の通りです。

幅の目安	想定	使い方
600px前後	スマホ	文字サイズ、余白、ボタン位置の調整
768px前後	スマホ〜タブレット	1カラムと2カラムの切り替え
1024px前後	タブレット〜PC	大きなレイアウトの切り替え

実務ではデザインが崩れる幅で決める

ブレイクポイントは「必ず768px」と決まっているわけではありません。実務では、ブラウザ幅を縮めながら、レイアウトが苦しくなる幅で切り替えることが多いです。

ブレイクポイントは端末名だけで決めるのではなく、デザインが崩れ始める幅を見て決めるのが実務的です。

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

メディアクエリを書いたのに効かない場合は、次のポイントを確認しましょう。

原因1：viewport設定がない

HTMLのhead内にviewport設定がないと、スマホで意図通りにレスポンシブ表示されない場合があります。

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

スマホ対応では、CSSだけでなくHTML側のviewport設定も重要です。

原因2：条件の向きが逆になっている

スマホ用CSSを書きたいのにmin-widthを使っていると、PC側でだけ効いてしまうことがあります。

/* スマホ用のつもりだが、768px以上で効く */
@media (min-width: 768px) {
  .layout { display: block; }
}

/* 768px以下で効く */
@media (max-width: 768px) {
  .layout { display: block; }
}

原因3：後ろのCSSに上書きされている

CSSは後に書かれた同じ強さの指定が優先されます。メディアクエリの後ろに通常CSSがあると、上書きされることがあります。

@media (max-width: 768px) {
  .button {
    width: 100%;
  }
}

.button {
  width: 240px;
}

この場合、後ろのwidth: 240px;が勝つことがあります。

.button {
  width: 240px;
}

@media (max-width: 768px) {
  .button {
    width: 100%;
  }
}

原因4：全角文字や記号・スペースのミスがある

メディアクエリは、カッコやコロンの書き間違い、あるいはスペースの有無だけで完全に効かなくなります。

/* 正しい例 */
@media (max-width: 768px) {
  .box { padding: 16px; }
}

全角のカッコ、全角コロン、閉じカッコの抜けは初心者によくあるミスです。

また、応用編で解説した and を使う際、and と ( の間の半角スペースが抜けているケースも非常に多いです。

• NG： @media screen and(max-width: 768px)
• OK： @media screen and (max-width: 768px)

効かないときは、一文字ずつ構文をチェックしてみましょう。

実務で使うメディアクエリのチェックリスト

確認項目	見るポイント	対策
viewport	meta viewportがあるか	head内に設定する
条件	max-widthとmin-widthを間違えていないか	以下ならmax、以上ならmin
順番	後ろのCSSに上書きされていないか	メディアクエリの位置を整理する
幅固定	要素に固定widthが残っていないか	width: 100%;やmax-widthを使う
検証	実機やブラウザ幅で確認したか	開発者ツールだけでなく実機も確認する

公式ドキュメントも確認する

メディアクエリの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs Using media queries
• MDN Web Docs @media
• MDN Web Docs max-width

まとめ：メディアクエリで画面幅に合わせたCSSを適用しよう

この記事では、CSSのメディアクエリについて解説しました。

メディアクエリは、画面幅や端末条件に応じてCSSを切り替えるための仕組みです。スマホ対応では、@media (max-width: 768px)のように「この幅以下で適用する」書き方がよく使われます。一方、スマホを基準に作る場合は、min-widthを使って画面が広いときだけPC用レイアウトへ広げる方法もあります。

効かないときは、viewport設定、max-widthとmin-widthの向き、CSSの記述順、構文ミス、固定幅の残りを確認しましょう。レスポンシブ対応は、コードを書いたあとに実際の画面幅で確認するところまでがセットです。