# モダンレスポンシブレイアウトを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： FlexboxとCSS Gridを組み合わせて、プロフェッショナルなレスポンシブWebサイトを作成できるようになる ## 作成してほしいレイアウト： ### 1. 全体構成 - **ヘッダー**：ロゴとナビゲーション - **メインコンテンツ**：特集記事と複数のカード型コンテンツ - **サイドバー**：関連情報やウィジェット - **フッター**：サイト情報とリンク ### 2. レスポンシブ対応 - **デスクトップ**（1200px以上）：3カラムレイアウト - **タブレット**（768px-1199px）：2カラムレイアウト - **モバイル**（767px以下）：1カラムレイアウト ### 3. 技術要件 - **CSS Grid**：全体のレイアウト構造 - **Flexbox**：各セクション内の要素配置 - **メディアクエリ**：レスポンシブ対応 - **セマンティックHTML**：適切なマークアップ ### 4. デザイン要素 - **モダンなカードデザイン** - **適切な余白とタイポグラフィ** - **ホバーエフェクト** - **アクセシビリティ配慮** ## 提供してほしい内容： - **完全なHTMLコード**（セマンティックなマークアップ） - **完全なCSSコード**（Grid + Flexbox + レスポンシブ） - **各ブレークポイントでの動作説明** - **コードの詳細な解説** - **カスタマイズのヒント** ## デザインのポイント： - **視覚的階層**の明確化 - **読みやすさ**の確保 - **ユーザビリティ**の向上 - **パフォーマンス**への配慮