メディアクエリ（画面サイズ対応）
@mediamin-widthmax-widthprefers-color-schemeprefers-reduced-motion
メディアクエリを使うと、画面サイズ・デバイスの特性・ユーザーの好みに応じてスタイルを切り替えられます。レスポンシブデザインの基盤技術です。
デモ：ウィンドウ幅に応じてスタイルが変わる
現在の画面サイズ
ブラウザウィンドウの幅を変えると背景色が変わります: 紫=デスクトップ / 黄=タブレット / ピンク=モバイル
デモ：レスポンシブグリッド
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
<480px: 1列 / 480px〜: 2列 / 768px〜: 3列
デモ：prefers-color-scheme（ダークモード）
このボックスはシステムのダークモード設定に応じてスタイルが変わります。 OSの設定でダークモードに切り替えてみてください。
デモ：prefers-reduced-motion（アニメーション軽減）
OSの「視差効果を減らす」設定をONにするとアニメーションが停止します。アクセシビリティのために重要です。
コード例
/* 基本構文 */
@media (min-width: 768px) {
.container { max-width: 768px; }
}
/* メディアタイプ + 条件 */
@media screen and (min-width: 1024px) { ... }
@media print { ... }
/* 論理演算子 */
@media (min-width: 600px) and (max-width: 1200px) { ... } /* and */
@media (max-width: 480px), (orientation: landscape) { ... } /* or (カンマ) */
@media not screen { ... } /* not */
/* よく使われるブレークポイント（Tailwind CSS準拠） */
/* sm: 640px / md: 768px / lg: 1024px / xl: 1280px / 2xl: 1536px */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
/* ユーザー設定系（アクセシビリティ） */
@media (prefers-color-scheme: dark) {
body { background: #111; color: #f9f9f9; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
@media (prefers-contrast: high) {
.button { border: 3px solid currentColor; }
}
/* orientation */
@media (orientation: portrait) { /* 縦長 */ }
@media (orientation: landscape) { /* 横長 */ }
/* ポインタの精度 */
@media (hover: hover) { /* マウスでホバー可能な環境 */ }
@media (pointer: coarse) { /* タッチデバイス（指） */ }比較：モバイルファースト vs デスクトップファースト
| 観点 | モバイルファースト（min-width） | デスクトップファースト（max-width） |
|---|---|---|
| 基本スタイル | モバイル向けをデフォルトに記述 | デスクトップ向けをデフォルトに記述 |
| 追加スタイル | 大きい画面に向けて追加・上書き | 小さい画面に向けて追加・上書き |
| パフォーマンス | ✅ モバイルは余分なスタイルを処理しない | ❌ モバイルが多くのスタイルを上書きする |
| 現在の主流 | ✅ 推奨（Tailwind CSS, Bootstrap等） | ⚠️ レガシーなアプローチ |
| コードの見通し | シンプルから複雑へ（拡張しやすい） | 複雑から単純へ（削ぎ落としにくい） |
NEW範囲構文 と ユーザー設定クエリ（2022〜2023）
① メディアクエリ範囲構文（Level 4）
min-width / max-width の代わりに、より直感的な比較演算子が使えます。
/* 従来の書き方 */
@media (min-width: 768px) { ... }
@media (max-width: 1023px) { ... }
@media (min-width: 768px) and (max-width: 1023px) { ... }
/* 新しい範囲構文 (Chrome 113+, Firefox 63+, Safari 16.4+) */
@media (width >= 768px) { ... } /* min-width と同じ */
@media (width <= 1023px) { ... } /* max-width と同じ */
@media (768px <= width <= 1023px) { ... } /* 範囲指定が1行で! */
/* height にも使える */
@media (height >= 600px) { ... }② prefers-contrast（アクセシビリティ）
/* ハイコントラストモード対応 (Chrome 96+, Firefox 101+, Safari 14.1+) */
@media (prefers-contrast: high) {
.button {
border: 3px solid currentColor;
font-weight: bold;
}
.subtle-text { color: #000; }
}
@media (prefers-contrast: low) {
/* コントラスト低め好みのユーザー */
.divider { border-color: rgba(0,0,0,0.1); }
}
/* forced-colors: Windows ハイコントラストモード */
@media (forced-colors: active) {
.custom-checkbox { forced-color-adjust: none; }
}アクセシビリティ対応は必須の時代。prefers-reduced-motion, prefers-color-scheme, prefers-contrast の3つは特に重要です。
🤖 AIプロンプトテンプレート
CSSのメディアクエリを使ったレスポンシブデザインの実装例をReact + Tailwind CSSで作成してください。 要件: - min-width / max-width を使ったモバイルファーストのブレークポイント切り替えデモ - prefers-color-scheme でダークモード・ライトモードを自動切り替えするUI - prefers-reduced-motion でアニメーションを軽減するアクセシビリティ対応デモ - ウィンドウ幅に応じてグリッド列数が変わるレスポンシブカードレイアウト - 範囲構文（768px <= width <= 1024px）の新しい書き方の実例 - Tailwind CSSのsm / md / lg / xl ブレークポイントを活用したコンポーネント
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。