メディアクエリ

# CSSメディアクエリを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすくGrill-me方式（対話型）で私に質問を投げかけながら解説してください。 ## 学習目標： CSSメディアクエリを完全に理解し、あらゆるデバイスに対応したレスポンシブデザインを作成できるようになる ## 学習の進め方（Grill-me方式・対話型）： 1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。 2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。 3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。 ## 説明してほしい内容： ### 1. メディアクエリの基本概念 - **メディアクエリとは何か** - **レスポンシブデザイン**の重要性 - **CSS3での進化**と現在の標準 - **ブラウザサポート状況** ### 2. メディアクエリの基本構文 - **@media**ルールの書き方 - **メディアタイプ**（screen, print, all等） - **メディア特性**（width, height, orientation等） - **論理演算子**（and, or, not）の使用 ### 3. ブレイクポイントの設計 - **一般的なブレイクポイント**の設定 - **モバイル**（320px-767px）の考慮点 - **タブレット**（768px-1023px）の特徴 - **デスクトップ**（1024px以上）の設計 - **カスタムブレイクポイント**の決め方 ### 4. min-widthとmax-widthの使い分け - **min-width**：最小幅での条件指定 - **max-width**：最大幅での条件指定 - **範囲指定**の組み合わせ方法 - **重複回避**のテクニック ### 5. 設計アプローチの比較 - **モバイルファースト**アプローチ - min-widthを中心とした設計 - パフォーマンス上の利点 - 実装の具体例 - **デスクトップファースト**アプローチ - max-widthを中心とした設計 - 従来手法からの移行 - 使用場面の判断 ### 6. 実践的なレスポンシブパターン - **ナビゲーションメニュー**の切り替え - **グリッドレイアウト**の列数変更 - **フォントサイズ**の調整 - **画像の表示切り替え** - **コンテンツの表示・非表示** ### 7. 高度なメディアクエリ機能 - **orientation**：画面の向き検知 - **resolution**：画面解像度の判定 - **prefers-color-scheme**：ダークモード対応 - **prefers-reduced-motion**：アニメーション制御 - **hover**：ホバー機能の有無 ## 回答形式： - Grill-me方式（対話型）を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと - 各メディアクエリごとにコード例を提示 - ブレイクポイントの設計理由を明確に説明 - 実際に試せる完全なレスポンシブ例 - モバイルファーストとデスクトップファーストの比較表を含める