メディアクエリ
初級読み方：メディアクエリ｜英語：Media Query
@media を使って画面幅に応じてCSSを切り替える仕組みだよ。いつ使う？ 「スマホでは1列、PCでは3列にしたい」など、画面サイズによってレイアウトを変えたいときに使うよ。間違いやすいポイント: メディアクエリの記述順が大事。モバイルファーストならmin-widthを使い、小さい順に書くよ。また、viewport metaタグがないとメディアクエリが正しく動かないよ。
やさしい説明
メディアクエリとは、画面サイズに応じてCSSを切り替える仕組みです。レスポンシブデザインの核となる技術です。
「もし画面幅が768px以下なら、このスタイルを適用してね」という条件分岐をCSSで書けます。
書き方は @media (条件) { スタイル } です。max-width（〜以下）や min-width（〜以上）で画面幅を条件にするのが一般的です。
具体例・使い方
/* PC用（デフォルト） */
.nav { display: flex; }
/* スマホ用（768px以下で切り替え） */
@media (max-width: 768px) {
.nav { flex-direction: column; }
}
/* タブレット以上（768px以上で適用） */
@media (min-width: 768px) {
.sidebar { display: block; }
}いつ使う？
スマホとPCでレイアウトを変えたいときに使います。ナビメニューを横並び→縦並びに変える、サイドバーをスマホでは非表示にする、文字サイズを調整するなどが典型的な使い方です。
間違いやすいポイント
❌ メディアクエリの順番を間違える
max-widthを使う場合は「大きい値→小さい値」の順に書きます。逆だと後のスタイルに上書きされてしまいます。
❌ ブレークポイントを端末ごとに設定する
「iPhone用」「iPad用」ではなく、レイアウトが崩れるポイントで設定しましょう。768px、1024px あたりが一般的です。
よくある疑問
Q: ブレークポイントはいくつ設定すべき？
A: 一般的には768px（タブレット）と1024px（デスクトップ）の2つで十分です。コンテンツに合わせて調整しましょう。
Q: メディアクエリの書き方は？
A: @media (min-width: 768px) { .card { width: 50%; } } のように書きます。768px以上の画面幅でカードの幅が50%になります。
Q: メディアクエリが効かないときは？
A: ①viewport metaタグがあるか確認 ②CSSの記述順（後に書いたものが優先）を確認 ③ブラウザの幅を実際に変えて確認、の3つをチェックしましょう。
関連用語
📖 関連レッスン
レッスンを見る →