# CSSメディアクエリを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： CSSメディアクエリを完全に理解し、あらゆるデバイスに対応したレスポンシブデザインを作成できるようになる ## 説明してほしい内容： ### 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**：ホバー機能の有無 ## 回答形式： - 各メディアクエリごとにコード例を提示 - ブレイクポイントの設計理由を明確に説明 - 実際に試せる完全なレスポンシブ例 - モバイルファーストとデスクトップファーストの比較表を含める