メディアクエリ
初級読み方：メディアクエリ｜英語：Media Query
@media を使って画面幅に応じてCSSを切り替える仕組みだよ。
やさしい説明
メディアクエリとは、画面サイズに応じてCSSを切り替える仕組みです。レスポンシブデザインの核となる技術です。
「もし画面幅が768px以下なら、このスタイルを適用してね」という条件分岐をCSSで書けます。
書き方は @media (条件) { スタイル } です。max-width（〜以下）や min-width（〜以上）で画面幅を条件にするのが一般的です。
具体例・使い方
/* PC用（デフォルト） */
.nav { display: flex; gap: 16px; }
.sidebar { display: block; }
/* スマホ用（768px以下で切り替え） */
@media (max-width: 768px) {
.nav { flex-direction: column; }
.sidebar { display: none; } /* スマホではサイドバーを非表示 */
}
/* タブレット以上（768px以上で適用） */
@media (min-width: 768px) {
.container { max-width: 1200px; margin: 0 auto; }
}モバイルファーストの書き方
/* モバイルファースト: スマホ用をベースに書き、
min-widthで大きい画面のスタイルを追加する */
/* スマホ（デフォルト） */
.card { width: 100%; }
/* タブレット（600px以上） */
@media (min-width: 600px) {
.card { width: 48%; }
}
/* PC（1024px以上） */
@media (min-width: 1024px) {
.card { width: 31%; }
}現代のWeb開発では「モバイルファースト」が推奨されています。スマホ用をベースに書いて min-width で拡張するアプローチです。Googleもモバイルファーストを推奨しています。
よく使うブレークポイント
- 480px — 小さなスマホ（縦向き）
- 768px — タブレット・スマホ横向きの境界（最もよく使う）
- 1024px — タブレット横向き・ノートPC
- 1280px — デスクトップPC
TailwindCSSのブレークポイントは sm: 640px、md: 768px、lg: 1024px、xl: 1280px です。フレームワークに合わせるのが実務では一般的です。
いつ使う？
- ナビメニューをスマホでハンバーガーメニューに変えるとき
- PCでは3列、スマホでは1列のグリッドレイアウトに切り替えるとき
- スマホでは非表示にするサイドバーの制御
- 画面サイズに応じたフォントサイズの調整
間違いやすいポイント
❌ max-widthを使うときの順番を間違える
max-widthを使う場合は「大きい値→小さい値」の順に書きます。逆だと後のスタイルに上書きされてしまいます。
/* ❌ 順番が逆（スマホ用が先に来て上書きされる） */
@media (max-width: 480px) { .text { font-size: 14px; } }
@media (max-width: 768px) { .text { font-size: 16px; } }
/* ✅ 大きい値→小さい値の順 */
@media (max-width: 768px) { .text { font-size: 16px; } }
@media (max-width: 480px) { .text { font-size: 14px; } }❌ viewportメタタグを忘れる
HTMLの <head> に <meta name="viewport" content="width=device-width, initial-scale=1"> がないと、スマホでメディアクエリが正しく効きません。
よくある疑問
Q: ブレークポイントはいくつ設定すべき？
A: 一般的には768px（タブレット）と1024px（デスクトップ）の2つで十分です。コンテンツに合わせて調整しましょう。
Q: メディアクエリの書き方は？
A: @media (min-width: 768px) { .card { width: 50%; } } のように書きます。768px以上の画面幅でカードの幅が50%になります。
Q: メディアクエリが効かないときは？
A: ①viewport metaタグがあるか確認 ②CSSの記述順（後に書いたものが優先）を確認 ③ブラウザの幅を実際に変えて確認、の3つをチェックしましょう。
関連用語
📖 関連レッスン
レッスンを見る →