メディアクエリ 生成

機能

• 幅のブレークポイント：`min-width`・`max-width`・範囲
• ⚠️ 範囲の上界は 0.02 減らし、次の `min-width` と隙間なく接します（どの規則も担当しない区間を作りません）
• ⚠️ 2 つの数値を逆に書いても自動で入れ替え、一致しないクエリにはしません
• 好み：暗色 / 明色モード、動きの削減、より高いコントラスト
• デバイス：画面の向き、ホバーの可否、主入力がタッチかどうか
• 印刷
• プレビュー付き（ブロック内の宣言の効果を表示します）
• ⚠️ 暗色の項目には「現在暗色という意味ではない」、動きの削減には「自動では止まらない」と明記
• コピーできるのは完全な `@media … { }` ブロック

使い方

1. 条件を選びます
2. 幅の条件ならブレークポイントを、範囲なら上限も入力します
3. 右側をコピーし、セレクターと宣言を自分のものに変えます

よくある質問

max-width が 767px ではなく 767.98px なのはなぜですか？

範囲を隙間なく接させるためです。`max-width: 767px` と `min-width: 768px` の間には `767px ~ 768px` が残り、どちらの規則も一致しません —— すると特定のウィンドウ幅で理由もなくスタイルが崩れます。この隙間は実在します：ブラウザーのズーム 110%、整数でないデバイスピクセル比、`clamp()` で計算したレイアウトなど、いずれも小数ピクセルのビューポート幅を生みます。0.02 を引くのは定石です（Bootstrap もそうしています）—— どの整数より小さく、767.98 の直後の最初の小数より大きい値です。

prefers-color-scheme: dark が効かないのはなぜですか？

「ユーザーが暗色を好むと表明した」という意味であり、「現在暗色である」ではないからです。テーマの好みを一度も設定していない場合、このクエリは一致しません —— そのため `dark` の中にだけスタイルを書いたページは、そうした人には白背景に見えます（つまり基本スタイル）。正しいやり方は、明色のスタイルを既定として書き、`dark` の中で上書きすることです。暗色を既定にして明色を `light` に入れる書き方では、未表明のユーザーにどちら向けでもないデザインが渡ります。

prefers-reduced-motion を書いたのにアニメーションが動いています。なぜ？

このクエリ自体は何もしないからです —— ユーザーが動きの削減を望んでいる、と伝えるだけの条件です。効かせるには、その中で実際に無効にする必要があります：`animation: none;`、`transition: none;`、あるいは時間をほぼ 0 にする。空の `@media (prefers-reduced-motion: reduce) { }` ブロックは書いていないのと同じですが、コード上は対応済みに見えてしまいます —— これがこの機能の最も多い誤用です。

min-width と max-width のどちらを使うべきですか？

`min-width` を優先してください（モバイルファースト）。理由は好みではなくカスケードです：後ろに書いた `min-width` の規則は自然に前のものを上書きするので、新しいブレークポイントは末尾に足すだけで済みます。`max-width` の規則は正しい位置に挿し込む必要があり、増えるほど絡まります。また、まずスマートフォン向けの基本スタイルを書き、大きい画面向けに足していく順序は、「小さい画面に何が収まらないか」と向き合うことを強制します —— デスクトップ版を作ってからスマートフォンに詰め込むより、正しく作りやすいのです。

メディアクエリでタッチ機器かどうか分かりますか？

確実には分かりません。適切な問いを立てることしかできません。`(pointer: coarse)` は「主入力が粗い（指）か」、`(hover: hover)` は「ホバーできるか」を問います。しかしハイブリッド機器（タッチ対応ノート PC、マウスを繋いだタブレット）では両方が同時に成り立ち、ユーザーはいつでも入力方法を切り替えます。したがって機器を推測するのではなく、能力があるときに強化するために使ってください：`:hover` のスタイルは `@media (hover: hover)` の中にだけ書く —— タッチ画面にはホバーという状態自体が存在しないので、これが正確な使い方です。