Day 11 です。
Phase 2 も中盤です。今日は Web デザインの多くを占める「文字（タイポグラフィ）」です。
「ただ文字を表示する」のと「読ませる・魅せる」のは別物です。
フォント選びとちょっとした CSS の調整だけで、サイトのデザインが変わります。
はじめに：文字は「声色」を変える
Web サイトにおけるフォントは、話し言葉でいう「声のトーン」です。
明朝体なら「真面目で上品な声」、ゴシック体なら「親しみやすく元気な声」。
さらに CSS を使えば、グラデーションのドレスを着せたり、ネオンのように光らせたりすることも可能です。
🎯 本日の目標
- Google Fonts を導入して、脱・デフォルトフォントをする。
-
line-height（行間） とletter-spacing（字間） で、「読みやすさ」を向上させる。 - グラデーション文字：文字の中だけを虹色やグラデーションにするモダンなテクニックを習得する。
📝 ミッション内容
以下の要素を含む「タイポグラフィ・ポスター」のような画面を作ってください。
-
Mission 1: Google Fonts の導入
- 英語フォント（例: 'Poppins' や 'Montserrat'）と日本語フォント（例: 'Noto Sans JP'）を読み込んで適用する。
-
Mission 2: グラデーション見出し
- 背景ではなく、「文字の色」自体がグラデーションになっている大きな見出しを作る。
-
Mission 3: 美しい本文
- 行間と文字間隔を調整して、雑誌のように読みやすいパラグラフを作る。
💻 実装サンプル
正解例
See the Pen CSSマスターへの道「テキスト装飾とWebフォント」 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
1. Google Fonts の使い方
基本は 3 ステップです。
- Google Fonts にアクセス。
- 好きなフォントを選び、太さ（Weights）を選択してカートに入れる。
- 発行されたコードを HTML の
<head>または CSS の@importに貼り付ける。
2. 読みやすさの基本数値
-
line-height(行の高さ):- デフォルトは狭すぎます。
- 本文なら
1.6〜1.8くらいに設定すると、読みやすくなります。単位（px や%）をつけずに数字だけで指定するのがベストプラクティスです。
-
letter-spacing(文字の間隔):- 見出しや英語は、広め（
0.05em〜0.1em）に取ると高級感が出ます。 - 長文の本文は、広すぎると散漫になるので
0〜0.05em程度に抑えます。
- 見出しや英語は、広め（
3. グラデーション文字の仕組み
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 だけでアイコンや装飾を出現させるテクニックを学びます。