CSSのメディアクエリとは？@mediaの書き方・使い方を解説

PR CSS

CSSのメディアクエリとは？@mediaの書き方・使い方を解説

💡 この記事でわかること

  • メディアクエリ(@media)とは何か
  • 基本の書き方(@mediaの構文)
  • min-widthとmax-widthの使い分け
  • よく使われるブレークポイントの目安
  • 複数条件を組み合わせる書き方と注意点

1. メディアクエリとは?

メディアクエリとは、
👉 画面の幅(や高さ)などの条件によって、適用するCSSを切り替える仕組みです。

👉 レスポンシブデザインについての記事はこちら

💡 例えば「PCでは横並び、スマホでは縦並び」のように、画面サイズごとにレイアウトを変えたいとき、メディアクエリを使えば1つのCSSファイルの中で条件分岐ができます。レスポンシブデザインを実現する中心的な仕組みが、このメディアクエリです。

2. 基本の書き方

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

.box {
  display: flex;
}

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

👉 画面幅が768px以下のときだけ、.boxのflex-directionがcolumn(縦並び)に切り替わります。条件に当てはまらないときは、通常通り最初に書いたdisplay: flex(横並び)のスタイルがそのまま使われます。

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

メディアクエリでよく使う条件がmax-widthとmin-widthです。この2つは向きが逆なので、初心者がつまずきやすいポイントです。

  • max-width:画面幅が「指定した値以下」のときに適用(✅ 大きい画面向けのCSSを、小さい画面用に上書きする書き方)
  • min-width:画面幅が「指定した値以上」のときに適用(✅ スマホ向けのCSSを基本にして、大きい画面用に上書きする書き方)
/* パターン1: PC向けを基本に、スマホ向けを上書き(max-width) */
.box {
  width: 1000px;
}
@media (max-width: 768px) {
  .box {
    width: 100%;
  }
}

/* パターン2: スマホ向けを基本に、PC向けを上書き(min-width) */
.box {
  width: 100%;
}
@media (min-width: 768px) {
  .box {
    width: 1000px;
  }
}

💡 近年はスマホでの閲覧が多いため、スマホ向けのスタイルを先に書き、min-widthでPC向けに拡張していく「モバイルファースト」の考え方が主流です。どちらが正解というルールはありませんが、迷ったらmin-widthで書く癖をつけておくと良いでしょう。

4. よく使われるブレークポイントの目安

「どの幅で切り替えるか(ブレークポイント)」に厳密な決まりはありませんが、一般的には次のあたりが目安としてよく使われます。

  • スマホ:〜480px前後
  • タブレット:481px〜768px前後
  • PC:769px(または1024px)以上

👉 CSSの単位についての記事はこちら

⚠️ 数値そのものを覚えるより、「サイトのデザインが崩れ始める幅」を実際にブラウザの検証ツールで確認しながら決めるのがおすすめです。デバイスの種類は年々増えているため、特定の機種に合わせるより、崩れる箇所を基準に調整する方が現実的です。

5. 複数条件を組み合わせる

メディアクエリはandやカンマ(,)を使って、複数の条件を組み合わせることもできます。

/* andでつなぐ → 両方の条件を満たすときだけ適用(AND条件) */
@media (min-width: 481px) and (max-width: 768px) {
  .box {
    background: lightblue;
  }
}

/* カンマでつなぐ → どちらかの条件を満たせば適用(OR条件) */
@media (max-width: 480px), (min-width: 1024px) {
  .box {
    background: lightgreen;
  }
}

👉 andは「かつ」、カンマは「または」と覚えておくと分かりやすいです。例えば「481px〜768pxの間だけ」のように、範囲を指定したいときにandを使います。

6. 注意点:viewportメタタグを忘れずに

メディアクエリを書いても、スマホで正しく表示されない場合、HTMLの<head>内にviewportの指定が抜けていることが多いです。

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

👉 HTMLのmeta要素についての記事はこちら

⚠️ このタグがないと、スマホがPC向けの画面を縮小して表示しようとするため、メディアクエリの条件(画面幅)が意図した通りに判定されません。レスポンシブ対応するページには必ず入れておきましょう。

📝 まとめ

  • メディアクエリ(@media)は、画面幅などの条件でCSSを切り替える仕組み
  • max-widthは「以下」、min-widthは「以上」で適用される
  • 近年はmin-widthを使ったモバイルファーストの書き方が主流
  • andで「かつ」、カンマで「または」の条件を組み合わせられる
  • viewportメタタグを忘れるとスマホで正しく動かないので注意

ブラウザの検証ツール(デベロッパーツール)には画面幅を切り替えて確認できる機能があるので、実際にコードを書きながら表示の変化を確認してみましょう。

-CSS
-, ,