# 高度CSSスタイリングプロジェクトを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： 高度なCSSスタイリング技術を組み合わせて、プロフェッショナルなUIコンポーネントを作成できるようになる ## 作成してほしいUIコンポーネント： ### 1. インタラクティブボタンコンポーネント - **ホバー時の滑らかな変化** - **複数のバリエーション**（プライマリ、セカンダリ、アウトライン） - **マイクロインタラクション**の実装 - **アクセシビリティ**への配慮 ### 2. アニメーション付きハンバーガーメニュー - **クリック時の変形アニメーション** - **滑らかなトランジション** - **メニューの開閉アニメーション** - **レスポンシブ対応** ### 3. スクロールアニメーション付きカード - **スクロール検知による表示アニメーション** - **複数カードの連続アニメーション** - **視差効果**の活用 - **パフォーマンス最適化** ### 4. クリエイティブローディングアニメーション - **複数パターンのローディング**（スピナー、プログレスバー、パルス） - **無限ループアニメーション** - **カスタムキーフレーム**の活用 - **ブランドに合わせたデザイン** ## 使用技術の要件： - **背景とグラデーション**の効果的な活用 - **境界線とシャドウ**による立体感 - **Transform**による変形効果 - **Transition**による滑らかな変化 - **Animation**による複雑な動き - **CSS変数**による効率的な管理 ## 提供してほしい内容： - **各コンポーネントの完全なHTMLコード** - **各コンポーネントの完全なCSSコード** - **使用している技術の詳細な解説** - **効果の仕組みと実装理由** - **カスタマイズ方法とバリエーション** - **パフォーマンス最適化のポイント** ## デザインの考慮点： - **ユーザビリティ**の向上 - **視覚的フィードバック**の提供 - **ブランド一貫性**の維持 - **アクセシビリティ**への配慮