LTech

レッスン3: 文字で印象が変わる！フォントとサイズを使いこなそう

フォントの種類やサイズの指定方法について学び、読みやすく美しい文字表現をマスターします。

🎯 学習目標

  • フォントファミリーの指定方法とルールを理解する
  • フォントの種類やサイズを自由に変更できるようになる
  • 絶対的な単位と相対的な単位の違いを理解する
  • 実際にフォントとサイズを変更して見た目の印象の変化を体験する

📘 目次

  1. フォントの種類を指定する（font-family）
  2. フォントのサイズを指定する（font-size）
  3. 絶対的な単位と相対的な単位
  4. 今日のまとめ
  5. 演習問題
  6. 理解度チェック

📚 レッスン

1. フォントの種類を指定する（font-family）

font-familyは、テキストのフォント（書体）を指定するCSSプロパティです。Webページの印象を大きく左右する重要な要素です。

p {
  font-family: "Noto Sans JP", "Helvetica Neue", sans-serif;
}

フォント名を複数指定する理由

フォント名を複数指定することで、最初に指定したフォントから順番に適用されます。ユーザーの環境によって使えるフォントが違うため、優先順位をつけて複数書くのがベストプラクティスです。

  • "Noto Sans JP" を第一候補に
  • 使えなければ次の "Helvetica Neue" を
  • どちらも無ければ sans-serif（システム標準のゴシック体）が使われます

汎用フォントファミリー

汎用フォントファミリーは、具体的なフォント名ではなく、フォントの特徴や形状のグループを表す名前です。

種類 説明 例
serif 明朝体のように、文字の端に装飾がある Times New Roman, Georgia
sans-serif ゴシック体のように、装飾がない Arial, Helvetica, Noto Sans
monospace 幅がすべて同じ（等幅フォント） Courier New, Consolas
cursive 手書き風フォント Comic Sans MS, Pacifico
fantasy 装飾的なユニークフォント Papyrus, Impact
💡 なぜ汎用ファミリーを使うの？
すべての環境で特定フォントがあるとは限らないため、最後に serif や sans-serif を書いておくことで、似た見た目の代替フォントに自動的に切り替わります。

2. フォントのサイズを指定する（font-size）

font-sizeは、テキストの大きさ（フォントサイズ）を指定するCSSプロパティです。見出しや本文など、テキストの読みやすさや強調度合いを調整するために使います。

p {
  font-size: 値;
}

3. 絶対的な単位と相対的な単位

フォントサイズを指定するときは、さまざまな単位を使うことができます。大きく分けて絶対的な単位と相対的な単位があります。

絶対的な単位

単位 説明 例
px ピクセル（画面上のドット単位） font-size: 16px;

相対的な単位

単位 説明 例
% 親要素のフォントサイズに対する割合 font-size: 120%;
em 親要素のフォントサイズに対する倍率 font-size: 1.2em;
rem ルート要素（html）のフォントサイズに対する倍率 font-size: 1.2rem;

相対単位とは？

フォントのサイズを「今のサイズ」や「親要素のサイズ」に対して相対的に指定する方法です。

単位 意味・基準 例
em 親要素のフォントサイズを基準とした倍率 font-size: 1.5em; → 親の1.5倍
rem ルート要素（html）のフォントサイズを基準 font-size: 2rem; → ルートの2倍
% 親要素に対しての割合 font-size: 150%; → 親の1.5倍
💡 ポイント
基本的には rem と em をしっかり使いこなせばOKです！

今日のまとめ

プロパティ 役割 ポイント
font-family フォントの種類を指定 複数指定して優先順位をつける
font-size 文字の大きさを指定 px、em、rem、%など様々な単位がある
汎用フォントファミリー フォントの大まかな分類 serif、sans-serif、monospaceなど
em 親要素のフォントサイズを基準 階層的なサイズ設定に便利
rem ルート要素のフォントサイズを基準 一貫したサイズ設定に便利

📚 リファレンス

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

課題1：フォントの違いを観察しよう

以下のコードをインラインエディタに貼り付けて、フォントの違いを観察してみましょう！

<style>
  .serif {
    font-family: Georgia, serif;
  }

  .sans {
    font-family: Arial, sans-serif;
  }

  .mono {
    font-family: "Courier New", monospace;
  }
</style>

<p class="serif">これは serif 系のフォントです。</p>
<p class="sans">これは sans-serif 系のフォントです。</p>
<p class="mono">これは monospace 系のフォントです。</p>
チェックポイント
それぞれのフォントの特徴を観察してみましょう。serif（明朝体）は文字の端に装飾があり、sans-serif（ゴシック体）はシンプル、monospace（等幅フォント）は文字の幅が揃っていることを確認してください。

課題2：フォントサイズを変えてみよう

以下の指示を参考にフォントサイズを変更してください。

  1. .title に font-size: 24px; を指定する
  2. .small-text に font-size: 0.8em; を指定する
  3. .large-text に font-size: 2rem; を指定する
  4. .percent-text に font-size: 120%; を指定する
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォントサイズ演習</title>
  <style>
    .title {
      /* ここにCSSを追加してください */
    }
    .small-text {
      /* ここにCSSを追加してください */
    }
    .large-text {
      /* ここにCSSを追加してください */
    }
    .percent-text {
      /* ここにCSSを追加してください */
    }
  </style>
</head>
<body>
  <h1 class="title">これはタイトルです</h1>
  <p>この段落は標準のサイズです。</p>
  <p class="small-text">この段落は少し小さめのフォントサイズです。</p>
  <p class="large-text">この段落は大きめのフォントサイズです。</p>
  <p class="percent-text">この段落は割合でフォントサイズを指定しています。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォントサイズ演習</title>
  <style>
    .title {
      font-size: 24px;
    }
    .small-text {
      font-size: 0.8em;
    }
    .large-text {
      font-size: 2rem;
    }
    .percent-text {
      font-size: 120%;
    }
  </style>
</head>
<body>
  <h1 class="title">これはタイトルです</h1>
  <p>この段落は標準のサイズです。</p>
  <p class="small-text">この段落は少し小さめのフォントサイズです。</p>
  <p class="large-text">この段落は大きめのフォントサイズです。</p>
  <p class="percent-text">この段落は割合でフォントサイズを指定しています。</p>
</body>
</html>

課題3：emを使ってみよう

emは親要素のフォントサイズに対する倍率です。次の観察ポイントを参考に理解を深めましょう！

<style>
  .parent {
    font-size: 20px;
  }
  .child {
    font-size: 1.5em; /* 20px × 1.5 = 30px */
  }
</style>

<div class="parent">
  親要素（20px）
  <div class="child">子要素（30px）</div>
</div>
🔍 観察ポイント
  • HTMLの親要素と子要素を把握しましょう
  • emが親要素のfont-size: 20pxを基準にサイズが計算されることを理解しましょう

課題4：remを使ってみよう

remは常にルート（html）サイズに依存します。どこに書いても同じサイズになるため、一貫性が高く使いやすいのが特徴！

<style>
  html {
    font-size: 16px;
  }
  .title {
    font-size: 2rem; /* 16px × 2 = 32px */
  }
</style>

<h1 class="title">これは32pxの見出し</h1>
🔍 観察ポイント
remはhtmlのフォントサイズを基準に計算されます

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. font-familyでフォントを複数指定する理由は何ですか？

2. 以下のCSSで、子要素の実際のフォントサイズは何pxになりますか？

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em;
}

3. remとemの違いについて正しい説明はどれですか？

📘 次回予告

次回（レッスン4）は文字の色と行間について学びます。文字の色と行間をマスターして見やすさをデザインできるようになりましょう！

« 前のレッスンへ戻る レッスン4へ進む »

インラインエディタ