1. CSSでの色表現（カラーコード）

文字や背景の色を指定する際、CSSでは主に以下の3つの表現方法を使用します。

2. タイポグラフィを整える主要なプロパティ

文字情報を美しく、そして抜群に読みやすく調整するため、以下のプロパティが使われます。

• color: 文字自体の色を指定します。
• font-size: 文字の大きさを指定します。単位は px のほか、親要素を基準にする相対単位 rem などが推奨されます。
• font-weight: 文字の太さを指定します。bold や数値（400＝通常、700＝太字）で制御します。
• line-height: 行の間隔（行高）を指定します。値には単位なしの数値（例: 1.7）を渡すことで、文字サイズに対する倍率になり最も管理しやすくなります。
• text-align: 文字の水平方向の揃え位置を指定します。center (中央揃え)、right (右揃え)、justify (両端揃え) など。
• font-family: 適用するフォントの種類（書体）の優先リストを指定します。

3. プロっぽく見える行間とカラーの調整

素人が作ったウェブページと、プロが作った洗練されたデザインページの最も大きな違いは、実は**「文字のコントラストと行間」**にあります。

4. 文字のデザインを体験してみよう

以下のCSSをクラスセレクタに設定すると、小説のように美しい行間と快適なフォントが適用されます。

.readable-text {
    color: #334155;            /* 目に優しいダークグレー */
    font-size: 16px;            /* 標準的なフォントサイズ */
    font-weight: normal;
    line-height: 1.8;            /* 行間を1.8倍に広げて快適に */
    font-family: sans-serif;     /* ゴシック系フォントを指定 */
}

5. まとめと次回予告

第3回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

• 色の指定はキーワードのほかにHEXコード（#10b981など）や、不透明度を扱えるRGBAが多用される。
• 文字サイズや色だけでなく、行間（line-height）を1.7〜1.8程度と広く取ることで読みやすさが劇的にアップする。
• 背景とテキストのコントラスト比を配慮し、目に優しいダークグレーを使用する。

次回（第4回）は、CSSレイアウトの最重要概念である「ボックスモデル：余白と枠線の仕組み」をテーマに、要素のサイズ計算の仕組みやmargin・paddingの違いをマスターします。お楽しみに！