CSSメディアクエリ生成
CSSメディアクエリを視覚的に生成。レスポンシブデザインのブレークポイント、ダークモード、印刷用のプリセット付き。CSSコードをコピー。無料、100%ブラウザで動作。
条件
プリセット
CSS出力
リファレンス
CSSメディアクエリとは？
メディアクエリ（@media）は、デバイスの特性（画面幅、解像度、カラースキームなど）に基づいてCSSスタイルを条件付きで適用するルールです。レスポンシブWebデザインの基盤であり、1つのHTMLで様々なデバイスに対応できます。
メディア特性
width / min-width / max-width — ビューポートの幅。レスポンシブデザインで最もよく使用。prefers-color-scheme — ユーザーのカラースキーム設定（lightまたはdark）。ダークモード対応に使用。prefers-reduced-motion — アニメーション軽減設定。アクセシビリティに重要。orientation — デバイスの向き（portrait/landscape）。print — 印刷時のスタイル指定。
プライバシー
すべての生成処理はブラウザで100%実行されます。データはサーバーに送信されません。