CSSメディアクエリ生成 | min-width・max-width・範囲とメディア特性をまとめて出力

ブレークポイントの種類とピクセル値、orientation や prefers-color-scheme などのメディア特性を選ぶと、@media ルールが組み上がる。生成したコードはそのままコピーでき、どの幅で効くのかをバー図で確認できる。

💡 このツールについて

@media (min-width: 768px) までは手で書けても、and (orientation: landscape) や prefers-reduced-motion: reduce を足すたびに括弧の入れ子と and の位置を確認する作業が地味に面倒、というのがレスポンシブ実装のあるあるです。特に範囲指定で「タブレットだけ」を狙うとき、min-width と max-width を 1px ずらし忘れて境界の幅でスタイルが二重適用されるバグは何度見ても飽きません。

このツールはブレークポイントタイプを3択（最小幅 / 最大幅 / 範囲）から選び、375 / 768 / 1024 / 1440px のデバイスプリセットかカスタム値で幅を決め、チェックボックスでメディア特性を足すだけで、構文の整った @media 文を組み立てます。ビジュアルプレビューのバーが「この条件は 0〜1920px のどこで効くのか」を塗り分けるので、min-width と max-width の向きを取り違えていないかを目で確かめられます。

🧐 よくある質問

min-width と max-width はどちらを基準にすべき? モバイルファースト設計なら min-width で小さい画面のスタイルを土台にし、大きくなるたびに上書きします。既存の PC 向けレイアウトを縮める場合は max-width が手早いです。「よく使うパターン」の Mobile First / Desktop First がそれぞれの雛形です。

範囲指定で「タブレットだけ」を狙うコツは? min-width: 768px と max-width: 1023px のように、上限を次のブレークポイントより 1px 小さくします。1024px をそのまま上限にすると、ちょうど 1024px の端末で2つのクエリが両方効いてしまいます。このツールは Tablet Only パターンで 768〜1023px を初期値にしています。

prefers-color-scheme や prefers-reduced-motion も組み込める? できます。メディア特性のチェックを入れると and (prefers-color-scheme: dark) のように幅条件と連結されます。幅を問わずダークモードだけ狙いたいときは、カスタム値を 0 にするか Dark Mode パターンを使います。

生成されるのは and 連結だけ? or は? このツールは1つの @media ルール内の and 連結に対応しています。複数条件の論理和（カンマ区切り）が必要な場合は、生成したルールを2つ並べて使ってください。

em や rem 単位には対応している? 出力は px 固定です。em ベースのブレークポイントを使う方針なら、生成された px 値を基準フォントサイズ（多くは 16px）で割って差し替えてください。

📚 豆知識

メディアクエリは CSS3 の Media Queries 勧告（2012年 W3C 勧告）で標準化され、それ以前は JavaScript で画面幅を測って分岐するのが定番でした。prefers-color-scheme や prefers-reduced-motion といった「ユーザーの好み」を読む特性は Media Queries Level 5 で追加された比較的新しい仲間で、OS のダークモードや視差効果オフの設定をそのまま CSS に反映できます。日本の制作現場では長らく「PC・タブレット・スマホ」の3段階で組むのが定番でしたが、折りたたみ端末や超ワイドモニタの普及で、固定の段階ではなくコンテンツが破綻する幅でブレークポイントを置く「コンテンツ駆動」の考え方も広がっています。