メディアクエリの基本的な書き方

Webサイトをスマホ・タブレット・パソコンなど、画面サイズごとに最適な表示に切り替える仕組みが「メディアクエリ」です。
レスポンシブデザインを実装する上で、避けて通れない基本要素になります。

この記事では、メディアクエリの考え方と、よく使われる指定方法を初心者向けに整理します。

メディアクエリとは何か

メディアクエリとは、
**「画面の条件に応じてCSSを切り替える仕組み」**です。

例えば、

といった制御を、画面サイズに応じて行えます。

HTMLはそのままで、CSSだけを条件分岐できるのが大きな特徴です。

メディアクエリは次のような流れで考えると理解しやすくなります。

つまり、
「全部に効くスタイル」＋「条件付きのスタイル」
という構造です。

この考え方を押さえるだけで、レスポンシブ対応がかなり楽になります。

メディアクエリでは、主に画面の横幅を条件に指定します。

よく使われる考え方は次の2つです。

スマホやタブレット向けに使われることが多い指定です。
「画面が小さくなったらレイアウトを変える」という発想になります。

例としては、

などが該当します。

こちらはPC向けに使われることが多い指定です。
「画面が広い場合だけ、装飾や余白を増やす」といった使い方になります。

厳密な正解はありませんが、現場でよく使われる目安は次の通りです。

ただし、
「端末基準」ではなく「デザインが崩れるポイント」で決める
という考え方がとても重要です。

数字はあくまで目安で、サイトごとに調整するのが基本です。

最初から画面サイズ別に分けすぎると、CSSが複雑になります。
まずは共通部分をしっかり作り、必要なところだけ切り替えるのがコツです。

CSSは後に書いたものが優先されます。
メディアクエリ内の指定は、通常のCSSを上書きする形になるため、
書く順番も重要になります。

細かく分けすぎると、あとから修正が大変になります。
本当に必要なサイズだけに絞ることで、保守しやすいCSSになります。

メディアクエリの基本は、とてもシンプルです。

この考え方を押さえておけば、
レスポンシブ対応はぐっと理解しやすくなります。