メディアクエリ
Media Query
概要（サマリー）
メディアクエリ（Media Query）は、画面幅、端末の向き、解像度、入力方法、ユーザーの表示設定などの条件に応じて、適用するCSSを切り替える仕組みである。
たとえば、スマートフォンでは1列表示、パソコンでは2列表示にしたい場合、メディアクエリを使って画面幅に応じたスタイルを指定できる。1つのHTMLを使いながら、画面サイズごとに見た目を調整できるため、レスポンシブデザインではよく使われる。
ただし、メディアクエリそのものは「条件に合うCSSを適用する仕組み」であり、レスポンシブデザイン全体を自動で作ってくれるものではない。柔軟なレイアウト、適切な余白、読みやすい文字サイズなどと組み合わせて使う必要がある。
詳細解説
メディアクエリとは何か
メディアクエリは、CSSに条件分岐を持たせるための仕組みである。
通常のCSSは、指定したセレクタに対して常に同じスタイルを適用する。一方、メディアクエリを使うと、「画面幅が768px以上のときだけ」「端末が横向きのときだけ」「マウスホバーできる端末のときだけ」といった条件を指定できる。
代表的な用途は、画面幅に応じたレイアウト変更である。スマートフォンでは縦に並べ、タブレットやデスクトップでは横に並べる、といった調整に使われる。
このように、メディアクエリはブラウザが表示環境を判定し、条件に合うCSSだけを適用するためのルールである。
基本的な書き方
メディアクエリは、CSSの @media ルールで書く。
次の例では、最初にスマートフォン向けの基本スタイルを書き、画面幅が768px以上になったときだけレイアウトを変更している。
CSSの例
.container {
padding: 16px;
}
.article-list {
display: grid;
gap: 16px;
}
.title {
font-size: 20px;
}
@media (min-width: 768px) {
.container {
padding: 32px;
}
.article-list {
grid-template-columns: repeat(2, 1fr);
}
.title {
font-size: 28px;
}
}
この例では、画面幅が767px以下なら1列の一覧として表示される。画面幅が768px以上になると、@media (min-width: 768px) の中に書いたCSSが追加で適用され、一覧が2列になる。
このような切り替えの境界になる値をブレイクポイントと呼ぶ。
実際に画面幅を切り替えながら動きを確認できるデモ付きの解説ページとしてメディアクエリ 実装解説を公開している。コードを見ながら試したい場合は、あわせて参考にすると理解しやすい。
min-widthとmax-widthの違い
画面幅を条件にするときは、min-width と max-width がよく使われる。
min-width は「指定した幅以上のとき」を意味する。たとえば @media (min-width: 768px) は、画面幅が768px以上のときに適用される。
max-width は「指定した幅以下のとき」を意味する。たとえば @media (max-width: 767px) は、画面幅が767px以下のときに適用される。
現代のWeb制作では、まず小さい画面向けの基本スタイルを書き、画面が広くなるにつれて min-width で調整を追加する「モバイルファースト」の書き方がよく使われる。逆に、既存のパソコン向けページをあとからスマートフォン対応する場合は、max-width を使うこともある。
どちらが正解というより、プロジェクト内で方針をそろえることが大切である。min-width と max-width が混ざりすぎると、どの条件が優先されるのか分かりにくくなる。
画面幅以外にも使える
メディアクエリは、画面幅だけを判定する仕組みではない。
代表的な条件には、次のようなものがある。
width、min-width、max-width: ブラウザの表示領域の横幅orientation: 端末や表示領域の向きhover: ホバー操作ができる入力環境かどうかpointer: マウスやタッチなど、ポインティング操作の精度prefers-color-scheme: ユーザーがライトモードかダークモードを選んでいるかprefers-reduced-motion: ユーザーが動きの少ない表示を希望しているか
たとえば、タッチ操作の端末ではホバー前提のUIを避けたり、ダークモード設定に合わせて配色を変えたりできる。
メディアクエリは、単なる「スマホ判定」ではなく、閲覧環境やユーザー設定に合わせてCSSを調整するための仕組みである。
レスポンシブデザインとの関係
メディアクエリは、レスポンシブデザインを作るための重要な道具である。
ただし、レスポンシブデザインはメディアクエリだけで成立するものではない。余白を固定しすぎない、画像を親要素からはみ出させない、文字サイズを読みやすく保つ、FlexboxやGridで自然に折り返す、といった基本設計も必要である。
実務では、まずCSSの通常ルールだけでできるだけ自然に伸縮するレイアウトを作り、どうしても切り替えが必要な箇所にだけメディアクエリを使うとよい。
たとえば、横幅が狭いときは1列、広いときは2列や3列に変える。ナビゲーションを小さい画面では縦並びにし、大きい画面では横並びにする。このように「レイアウトの考え方が変わる境界」に使うと、CSSが読みやすくなる。
viewportの指定も重要
スマートフォンでメディアクエリを正しく使うには、HTML側のviewport指定も重要である。
一般的には、HTMLの head 内に次のような指定を書く。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この指定がないと、スマートフォンのブラウザがページを大きな仮想幅で表示し、CSSの画面幅判定が意図どおりにならないことがある。
メディアクエリを書いたのにスマートフォンで期待どおり切り替わらない場合は、CSSだけでなくHTMLのviewport指定も確認する必要がある。
AIコーディングとの関係
AIコーディングでは、メディアクエリは依頼しやすい作業の1つである。既存のHTML構造やCSSをもとに、画面幅ごとのレイアウト変更をAIに提案させやすいからである。
ただし、「レスポンシブ対応にして」とだけ依頼すると、AIは過剰に多くのブレイクポイントを追加したり、既存のCSSと競合するスタイルを書いたりすることがある。
AIに依頼するときは、次のように条件を具体化するとよい。
既存のCSS構成を保ったまま、モバイルファーストで調整してください。
768px以上ではカードを2列、1024px以上では3列にしてください。
既存の色やフォント指定は変えず、レイアウトと余白だけを調整してください。
また、AIが生成したメディアクエリは、実際に複数の画面幅で確認する必要がある。320px、375px、768px、1024px、1440pxなど、代表的な幅で見た目が崩れないかを確認するとよい。
よくある勘違い
メディアクエリを使えば自動でレスポンシブになる？
自動ではならない。
メディアクエリは、条件に合うCSSを適用するためのスイッチである。要素が自然に縮む、画像がはみ出さない、文字が読みやすい、といった設計は別途必要になる。
まずは相対的な幅、Flexbox、Grid、適切な余白を使い、必要な境界だけメディアクエリで切り替えるのが現実的である。
デバイスごとにブレイクポイントを作るべき？
基本的には、特定のデバイス名を基準にしない方がよい。
「iPhone用」「iPad用」「MacBook用」のように機種ごとに分けると、端末が増えるたびにCSSが複雑になる。ブレイクポイントは、特定の端末ではなく「そのデザインが崩れ始める幅」を基準に決める方が扱いやすい。
メディアクエリはCSSだけで使うもの？
主にCSSで使うが、JavaScriptから利用することもできる。
JavaScriptでは window.matchMedia() を使うことで、CSSのメディアクエリと同じような条件を判定できる。たとえば、画面幅が広いときだけ特定の処理を有効にする、といった制御に使える。
ただし、見た目の切り替えだけで済む場合は、まずCSSで対応する方が分かりやすい。JavaScriptで画面幅を監視しすぎると、CSSとの責任分担が曖昧になりやすい。
まとめ
- メディアクエリは、画面幅や端末特性などの条件に応じてCSSを切り替える仕組みである。
- レスポンシブデザインでは、レイアウトを切り替える境界としてよく使われる。
min-widthは指定幅以上、max-widthは指定幅以下のときに適用される。- ブレイクポイントは端末名ではなく、デザインが崩れる幅を基準に決めるとよい。
- AIに依頼するときは、画面幅ごとのレイアウト変化を具体的に伝えると失敗しにくい。
情報ソース
より詳しくAIに聞いてみよう
- メディアクエリとは何かを、初心者向けに具体例つきで説明してください。
- min-widthとmax-widthの違いを、CSSコード例つきで教えてください。
- レスポンシブデザインでブレイクポイントを決める考え方を教えてください。
- prefers-color-schemeやhoverなど、画面幅以外のメディアクエリの使い道を教えてください。
- AIに既存CSSのレスポンシブ対応を依頼するときのプロンプト例を教えてください。