今の画面に一致するメディアクエリを、リサイズに合わせてリアルタイムに確認できます。範囲構文、ダークモード、モーション軽減、ホバーとポインター、ブレークポイント、コンテナクエリも解説します。
メディアクエリは、端末やユーザー設定に関する条件が真のときだけCSSを適用します。@media (width >= 48rem) { ... } は広い画面を対象にし、配色、モーション軽減、ホバー、ポインターの各クエリはユーザーの設定や入力方法を表します。まず小さい画面向けのスタイルを書き、それより大きいレイアウト用に最小幅のクエリを追加していきましょう。
よく使うクエリ
下のパネルでは、16個のクエリをお使いのブラウザー上で matchMedia を使って実行し、ウィンドウのリサイズ、スマートフォンの回転、ダークモードの切り替えに合わせて結果を更新します。その下では、範囲構文、ユーザー設定に関するクエリ、入力方法に関するクエリ、主要フレームワークのブレークポイント、そしてメディアクエリよりもコンテナクエリのほうが適している場面について順に解説します。
比較演算子を使って幅の条件を短く書く方法です。(min-width: 600px) の代わりに (width >= 600px) と書き、範囲は (400px <= width < 900px) のように書けます。現行の主要ブラウザーはすべて対応しています。Safariは2023年に16.4で対応したので、古い端末をサポートする場合は 対応状況を caniuse で確認してください。
モバイルファーストのスタイルシートでは min-width を使います。基本スタイルが小さい画面に対応し、各クエリがより広い画面用のレイアウトを追加していきます。これで小さい画面向けのCSSをシンプルに保てます。最大幅の指定は小さな例外には問題ありませんが、同じブレークポイントで両方を混在させると1ピクセルの隙間や重なりが生じることがあります。< と >= を使った範囲構文ならそれを避けられます。
@media (prefers-color-scheme: dark) を使い、その中で色の変数を再定義します。JavaScriptでは matchMedia を使って同じクエリの結果を確認でき、ユーザーがテーマを切り替えたときには change イベントが発生します。
メディアクエリはビューポートと端末を参照します。一方、コンテナクエリはコンテナとして指定された親要素のサイズを参照します。どこに配置されても、自分の入っている列が狭いときにはレイアウトを変えたい、というカードにはコンテナクエリが適しています。
よくある原因は次のとおりです。ビューポート の meta タグがなく、スマートフォンが幅約980pxのふりをしている。クエリが上書きすべきルールより上にあり、記述順で負けている。スペースや括弧が抜けていて、条件全体が警告なしに無効になっている。
Tailwind CSS v4 と Bootstrap 5 の公式ドキュメントに記載されている値です。Tailwind の値はレム単位で、ここでは既定の16pxで換算して表示しています。
人気の2つのフレームワークの既定ブレークポイント（min-width、モバイルファースト）
範囲構文は数式のように読めて、重ならない範囲を簡単に作れます。片側に <、もう片側に >= を使います。
どの端末でもサイトをネイティブのように感じさせる、ちょっとした追加です。
matchMedia は matches と change イベントを持つオブジェクトを返します。このページのライブパネルもこれを使っています。
使い分け
2つのカードのマークアップは同じです。行レイアウトに切り替える余裕があるのは幅の広いほうだけです。幅を編集して変化を確認してください。
Tailwind v4 のバリアントと生成されるCSS
幅
Tailwind の sm より狭い（既定の文字サイズで640px）
幅
Tailwind の sm から lg の間
幅
Tailwind の lg 以上
幅
従来のタブレット向けブレークポイント、旧構文
向き
ビューポートが縦長（幅より高さのほうが大きい）
向き
ビューポートが横長（高さより幅のほうが大きい）
入力
主な入力でホバーできる（マウス、トラックパッド）
入力
主な入力の精度が低い（指）
入力
主な入力の精度が高い（マウス、スタイラス）
入力
少なくとも1つの入力でホバーできる
設定
システムがダークモードに設定されている
設定
ユーザーがモーションの軽減を求めている
設定
ユーザーが高コントラストを求めている
ディスプレイ
2x以上の高密度画面
ディスプレイ
インストールされたWebアプリとして実行中
ディスプレイ
印刷中または印刷プレビュー
一致したものをコピー
ビューポート：{size}。ウィンドウのリサイズ、回転、システムテーマの変更に合わせて一覧が更新されます。
測定中...
{w} x {h} CSS px、ピクセル比 {r}x
メディアクエリのライブ結果
グループ
クエリ
一致する条件
現在
はい
いいえ
n/a は、このブラウザーがクエリを解析できなかったことを示します。これは古いバージョンのブラウザーで範囲構文を使った場合に起こります。正確な端末のサイズを知りたい場合は、こちらをお試しください：
画面解像度ツール
無料で始める · クレジットカード不要