CSS @media Query Builder

CSS @media Query Builderは、各メディア機能の正確な構文を 記憶することなくCSSメディアクエリを構築できる無料の ブラウザベースツールです。プロパティ名や許容値を 調べる代わりに、ドロップダウンから機能を選択し、 値を入力するだけで、すぐに使える@mediaルールが 即座に生成されます。

複数の機能をand（すべての条件が一致する必要がある） またはor（カンマ区切りのクエリで、いずれかの条件が トリガー）で組み合わせることができます。notトグルで 式全体を否定し、条件が満たされないときに適用する こともできます。

サポートされるメディア機能には、min-width、max-width、 min-height、max-height、orientation、 prefers-color-scheme、prefers-reduced-motion、pointer、 hover、display-mode、prefers-contrast、 min-resolution、aspect-ratio、color-gamutが含まれます。 プリセットライブラリには、最も一般的なレスポンシブ ブレークポイント、ダーク/ライトモード、印刷スタイルシート、 アクセシビリティ関連のクエリのワンクリックテンプレートが 用意されています。

すべての処理はブラウザ内で完全に実行されます。データは サーバーに一切送信されず、アカウントも不要です。

このツールは、一般的なデバイスサイズを確認するための Viewport Size Reference、 レスポンシブレイアウトを構築するための CSS Layout Generator、 メディアクエリと連携する最適化された画像マークアップを 作成するための Responsive Image Srcset Generatorと 組み合わせて使えます。

1. 上部のドロップダウンからMedia Type（screen、print、all、speech）を選択します。
2. Add Featureをクリックしてメディア機能条件を追加します。min-widthなどのプロパティを選択し、768pxなどの値を入力します。
3. 必要に応じて機能を追加します。各機能の横のチェックボックスで、削除せずに有効/無効を切り替えられます。
4. 機能をand（すべて一致）またはor（カンマ区切り、いずれかが一致）で組み合わせるかを選択します。
5. オプションでnotをトグルしてメディアクエリ全体を否定します。
6. 右側（モバイルでは下部）の出力パネルで生成されたCSSを確認します。
7. CopyをクリックまたはCtrl+Shift+Cを押してクリップボードにコピーします。またはCommon Presetをクリックして人気のクエリを即座に読み込みます。