Day 11 です。

Phase 2 も中盤です。今日は Web デザインの多くを占める「文字（タイポグラフィ）」です。
「ただ文字を表示する」のと「読ませる・魅せる」のは別物です。
フォント選びとちょっとした CSS の調整だけで、サイトのデザインが変わります。

Web サイトにおけるフォントは、話し言葉でいう「声のトーン」です。
明朝体なら「真面目で上品な声」、ゴシック体なら「親しみやすく元気な声」。
さらに CSS を使えば、グラデーションのドレスを着せたり、ネオンのように光らせたりすることも可能です。

以下の要素を含む「タイポグラフィ・ポスター」のような画面を作ってください。

Mission 1: Google Fonts の導入
- 英語フォント（例: 'Poppins' や 'Montserrat'）と日本語フォント（例: 'Noto Sans JP'）を読み込んで適用する。
Mission 2: グラデーション見出し
- 背景ではなく、「文字の色」自体がグラデーションになっている大きな見出しを作る。
Mission 3: 美しい本文
- 行間と文字間隔を調整して、雑誌のように読みやすいパラグラフを作る。

正解例

基本は 3 ステップです。

line-height (行の高さ):
- デフォルトは狭すぎます。
- 本文なら 1.6 〜 1.8 くらいに設定すると、読みやすくなります。単位（px や%）をつけずに数字だけで指定するのがベストプラクティスです。
letter-spacing (文字の間隔):
- 見出しや英語は、広め（0.05em 〜 0.1em）に取ると高級感が出ます。
- 長文の本文は、広すぎると散漫になるので 0 〜 0.05em 程度に抑えます。

background-clip: text は、「背景画像を文字の形で切り抜く」プロパティです。
これを使う時、元の文字色（color）があると背景が見えないので、color: transparent で文字を透明にする のが最大のポイントです。

text-shadow を使うと影を落とせますが、モダンな Web デザインでは「中抜き文字（ストローク）」も使われます。

.outline-text {
  font-size: 4rem;
  font-weight: bold;
  color: transparent; /* 中身は透明 */
  /* 文字の縁取り（幅 色） */
  -webkit-text-stroke: 2px white;
}

背景画像の上にこれを配置すると、背景が文字の中を透けて見えます。

「フォントを変える」「行間を空ける」。この 2 つを意識するだけで、サイトのクオリティは向上します。
特にポートフォリオなどでは、文字の美しさがそのまま「几帳面さ」として評価されることがあります。

次回は 「疑似要素 (::before / ::after)」 です。
HTML には何も書かずに、CSS だけでアイコンや装飾を出現させるテクニックを学びます。