Media Query Builder

使い方

1. 必要な条件にチェックを入れて数値を入力します。例：min-width 768px。
2. 結合方法を選びます。AND はすべて一致、OR はいずれか一致、NOT は先頭条件を反転します。
3. 必要ならブレークポイントのプリセットを選び、Bootstrap・Tailwind・Material の値を min-width に入力します。
4. 生成されたルールを確認し、現在のウィンドウが一致するかを示すインジケータを見ます。
5. CSS をコピーしてスタイルシートに貼り付けます。

よくある用途

• 新しいブレークポイントの記述 — 入れ子順を推測せずに正しい構文を得られます。
• ダークモードの土台 — prefers-color-scheme と幅の条件を組み合わせてセクションを上書きします。
• 高解像度画面 — 2dppx 以上を対象に、より鮮明な画像を提供します。
• メディアクエリの学習 — AND と OR を切り替えてカンマによる意味の変化を確認します。

よくある質問

Q: OR と AND は出力でどう違いますか？ A: AND は and キーワードで 1 つのクエリ内に条件を連結し、すべてが真である必要があります。OR はカンマ区切りのリストを出力し、ブラウザは別々のクエリとして扱うため、どれか 1 つが一致すれば適用されます。

Q: NOT が先頭の条件にしか使えないのはなぜですか？ A: CSS 仕様では複数のクエリをまとめて否定できず、単一のメディアクエリのみ否定できます。先頭条件に限定することで出力の妥当性を保ち、必要なら OR で別のクエリを追加してください。

Q: プリセットは他の設定を変更しますか？ A: いいえ。プリセットは min-width に数値を入力してチェックを付けるだけで、他の条件はそのまま残ります。