CSSのメディアクエリとは？画面サイズごとの調整方法
スマートフォンでは1列、パソコンでは3列。
このように、画面の大きさに合わせてデザインを切り替えるときに使うのが、CSSの「メディアクエリ」です。
この記事では、メディアクエリの書き方と、切り替える幅の決め方を解説します。
1.条件でCSSを切り替える
メディアクエリとは、「画面の幅が○px以下のとき」のような条件を付けて、その条件に合うときだけCSSを効かせる書き方です。
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
.cards {
grid-template-columns: 1fr;
}
}この例では、ふだんは3列、画面の幅が600px以下のときは1列で表示します。
| 書き方 | 意味 |
|---|---|
| @media (max-width: 600px) | 画面の幅が600px以下のとき |
| @media (min-width: 900px) | 画面の幅が900px以上のとき |
| @media (prefers-reduced-motion: reduce) | 動きを減らす設定にしているとき |
2.メディアクエリが必要な理由
同じデザインのままでは、パソコンで見やすいページが、スマートフォンでは文字が小さすぎたり、横にはみ出したりします。メディアクエリを使うと、1つのページのまま、画面の大きさに合わせて見え方を変えられます。
これが、レスポンシブデザインの中心となる仕組みです。レスポンシブデザインについては、レスポンシブデザインとは？で解説しています。
メディアクエリは、画面の大きさに合わせて、見え方を切り替えるための書き方です。
3.切り替える幅の決め方と、書き方のコツ
切り替える幅（ブレイクポイント）の決め方
決まった正解はありません。よく使われるのは、スマートフォン、タブレット、パソコンの境目です。端末の大きさに合わせるより、「デザインが崩れ始める幅」で切り替える考え方が分かりやすいです。
| 目安の幅 | 主な端末 |
|---|---|
| 〜600px くらい | スマートフォン |
| 600〜1024px くらい | タブレット、小さめのパソコン |
| 1024px くらい〜 | パソコン |
スマートフォンから書く（モバイルファースト）
スマートフォン向けのCSSを先に書き、画面が広くなったら min-width で足していく書き方を、モバイルファーストと呼びます。スマートフォンで見る人が多いホームページでは、この順番で考えると、スマートフォンの見え方を優先しやすくなります。
.cards {
display: grid;
gap: 16px;
}
@media (min-width: 900px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}よくある間違い
- viewport の指定（meta タグ）がなく、スマートフォンで効かない
- max-width と min-width を混ぜて、条件が重なっている
- メディアクエリをCSSの前の方に書いて、あとの指定に上書きされている
4.よくある質問
切り替える幅は、いくつ作ればよいですか？
2〜3か所くらいが一般的です。多すぎると、管理が大変になります。
max-width と min-width は、どちらを使えばよいですか？
パソコンから書くなら max-width、スマートフォンから書くなら min-width を使います。ホームページの中では、どちらかにそろえると分かりやすくなります。
メディアクエリが効きません。
viewport の指定があるか、書く順番であとの指定に上書きされていないかを確かめましょう。
画面の向き（縦・横）でも切り替えられますか？
orientation という条件で切り替えられます。
5.まとめ
メディアクエリは、画面の幅などの条件によって、CSSを切り替える書き方です。
- @media (max-width: …) や (min-width: …) で条件を書く
- デザインが崩れ始める幅で切り替える
- スマートフォンから書くモバイルファーストも考える
- viewport の指定と、書く順番を確かめる
CSSの単位については、CSSのvw・vh・rem・emの違いとは？で解説しています。
スマートフォンでの表示の崩れで困っている場合は、浅草Web屋にご相談ください。