# モダンCSS総合プロジェクトを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： モダンなCSS技術を総合的に活用し、プロフェッショナルレベルの高度なWebサイトを作成できるようになる ## 作成してほしいWebサイト： ### 1. プロジェクト概要 - **モダンなポートフォリオサイト**または**企業サイト** - **複数ページ構成**（ホーム、アバウト、サービス、コンタクト） - **プロフェッショナルなデザイン** - **最新のCSS技術**を駆使した実装 ### 2. 技術要件 - **CSS変数（カスタムプロパティ）**を使ったテーマシステム - **ダークモード/ライトモード**の切り替え機能 - **BEM設計手法**に基づいたクラス命名 - **レスポンシブデザイン**（モバイルファースト） - **CSS Grid + Flexbox**によるモダンレイアウト - **CSS Animation + Transition**による滑らかな動き ### 3. デザイン要素 - **ヒーローセクション**：インパクトのある導入部 - **ナビゲーション**：スティッキーヘッダーとハンバーガーメニュー - **カードレイアウト**：サービスや作品の紹介 - **フォーム**：お問い合わせフォーム - **フッター**：サイト情報とリンク ### 4. 高度な機能実装 - **スムーススクロール** - **パララックス効果** - **ローディングアニメーション** - **ホバーエフェクト** - **スクロールアニメーション** ### 5. パフォーマンス最適化 - **効率的なCSS構造** - **アニメーションの最適化** - **レスポンシブ画像** - **クリティカルCSS**の考慮 ## 提供してほしい内容： ### 1. 完全なコード - **HTML構造**（セマンティックなマークアップ） - **CSS実装**（モダン技術を駆使） - **JavaScript**（テーマ切り替えなど最小限） ### 2. 技術解説 - **使用した各技術の詳細説明** - **設計思想と実装理由** - **CSS変数の活用方法** - **BEM命名規則の適用例** - **レスポンシブ戦略** ### 3. カスタマイズガイド - **色やフォントの変更方法** - **レイアウトの調整方法** - **新しいセクションの追加方法** - **アニメーションの調整方法** ## デザインの考慮点： - **ユーザビリティ**を最優先 - **アクセシビリティ**への配慮 - **ブランド一貫性**の維持 - **モダンで洗練された**ビジュアル - **パフォーマンス**との両立 ## レスポンシブ対応： - **モバイル**（320px-767px） - **タブレット**（768px-1023px） - **デスクトップ**（1024px以上） - **各ブレークポイント**での最適化