# CSS色とフォントを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： CSSで色とフォントを適切に設定し、美しいタイポグラフィとカラーデザインを実現できるようになる ## 説明してほしい内容： ### 1. 色の指定方法の完全ガイド - **カラーネーム**：基本的な色名での指定 - **HEX（16進数）**：#rrggbb形式での指定 - **RGB**：rgb(r, g, b)形式での指定 - **RGBA**：透明度を含むrgba(r, g, b, a)形式 - **HSL**：色相・彩度・明度での指定 - **HSLA**：透明度を含むHSL指定 - **各形式の使い分けと特徴** ### 2. フォントファミリーの設定 - **font-family**プロパティの基本 - **セリフ・サンセリフ・等幅フォント**の違い - **フォールバック**の重要性 - **システムフォント**の活用 - **実践的なフォントスタック**の例 ### 3. フォントスタイリングの詳細 - **font-size**：サイズの設定と単位選択 - **font-weight**：太さの調整 - **font-style**：斜体の設定 - **line-height**：行間の調整 - **letter-spacing**：文字間隔の調整 - **word-spacing**：単語間隔の調整 ### 4. テキストの配置と装飾 - **text-align**：テキストの配置 - **text-decoration**：下線・取り消し線等 - **text-transform**：大文字・小文字の変換 - **text-shadow**：テキストの影効果 - **vertical-align**：垂直方向の配置 ### 5. Webフォントの活用 - **Google Fonts**の使い方 - **@font-face**による独自フォントの読み込み - **フォント読み込みの最適化** - **フォールバック戦略** - **パフォーマンスへの配慮** ### 6. 実践的なデザインテクニック - **読みやすいタイポグラフィ**の作り方 - **カラーパレット**の選択 - **コントラスト**とアクセシビリティ - **レスポンシブタイポグラフィ** ## 回答形式： - 各プロパティごとにコード例を提示 - 色とフォントの組み合わせ例 - 実際に試せる完全なコード - デザインのベストプラクティスを含める