Webサイトをスマホ・タブレット・パソコンなど、画面サイズごとに最適な表示に切り替える仕組みが「メディアクエリ」です。
レスポンシブデザインを実装する上で、避けて通れない基本要素になります。
この記事では、メディアクエリの考え方と、よく使われる指定方法を初心者向けに整理します。
メディアクエリとは何か
メディアクエリとは、
**「画面の条件に応じてCSSを切り替える仕組み」**です。
例えば、
画面が小さいときはレイアウトを縦並びにする
スマホでは文字を大きくする
パソコンでは余白を広く取る
といった制御を、画面サイズに応じて行えます。
HTMLはそのままで、CSSだけを条件分岐できるのが大きな特徴です。
基本的な考え方
メディアクエリは次のような流れで考えると理解しやすくなります。
まずは共通のCSSを書く
特定の画面サイズのときだけ上書きする
つまり、
「全部に効くスタイル」＋「条件付きのスタイル」
という構造です。
この考え方を押さえるだけで、レスポンシブ対応がかなり楽になります。
画面サイズ指定の基本
メディアクエリでは、主に画面の横幅を条件に指定します。
よく使われる考え方は次の2つです。
① 〜px以下のときに切り替える
スマホやタブレット向けに使われることが多い指定です。
「画面が小さくなったらレイアウトを変える」という発想になります。
例としては、
タブレット以下で2カラムを1カラムにする
スマホサイズでメニューをハンバーガーにする
などが該当します。
② 〜px以上のときに切り替える
こちらはPC向けに使われることが多い指定です。
「画面が広い場合だけ、装飾や余白を増やす」といった使い方になります。
よく使われるブレイクポイント
厳密な正解はありませんが、現場でよく使われる目安は次の通りです。
スマホ：〜767px前後
タブレット：〜1024px前後
PC：それ以上
ただし、
「端末基準」ではなく「デザインが崩れるポイント」で決める
という考え方がとても重要です。
数字はあくまで目安で、サイトごとに調整するのが基本です。
メディアクエリを書くときの注意点
共通CSSをしっかり書く
最初から画面サイズ別に分けすぎると、CSSが複雑になります。
まずは共通部分をしっかり作り、必要なところだけ切り替えるのがコツです。
上書きされる順番を意識する
CSSは後に書いたものが優先されます。
メディアクエリ内の指定は、通常のCSSを上書きする形になるため、
書く順番も重要になります。
メディアクエリを増やしすぎない
細かく分けすぎると、あとから修正が大変になります。
本当に必要なサイズだけに絞ることで、保守しやすいCSSになります。
まとめ
メディアクエリの基本は、とてもシンプルです。
画面サイズを条件にCSSを切り替える
共通スタイル＋条件付きスタイルで考える
数字よりも「崩れるポイント」を基準にする
この考え方を押さえておけば、
レスポンシブ対応はぐっと理解しやすくなります。
