タイポグラフィのテーマ設定

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 15/35。

タイポグラフィは、テーマ設定とデザインの重要な要素です。フォントスタイルをいたるところに記述する代わりに、それらをCSS変数として定義し、サイト全体で再利用することができます。これにより、スタイルの一貫性が保たれ、後で変更するのが簡単になります。

次のような変数を定義できます：

フォントファミリー（例：--font-family-base、--font-family-heading）

フォントサイズ (例: --font-size-base, --font-size-h1)
行の高さ
文字間隔

まず、:root要素でタイポグラフィ変数を定義しましょう：

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

それでは、これらの変数をテキスト要素に適用しましょう：

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

このセットアップにより、1か所で変数の値を変更するだけで簡単に修正できる、統一されたタイポグラフィシステムが構築されます。

チャレンジ

簡単

見出しと段落テキストに別々の変数を使用した、ブログウェブサイト用のタイポグラフィテーマを作成してください。あなたのタスクは以下の通りです：

以下のCSS変数を定義してください：
- 見出しのフォントサイズ (--h1-size および --h2-size)
- 段落のテキストカラー (--text-color) — 読みやすさを向上させるため、純粋な黒以外の色を選択してください
- 見出しのテキストカラー ( --heading-color ) — 本文のテキストから際立つ色を選択してください
これらの変数を適用して、以下のスタイルを設定してください：
- 本文のテキスト
- h1 および h2 見出し

CSSによって、見出しと段落テキストの間に明確な視覚的階層を作成する必要があります。

チートシート

CSS変数を使用して、フォントスタイルを一度定義し、サイト全体で再利用することで、一貫性のあるタイポグラフィシステムを作成します。

:root要素でタイポグラフィ変数を定義します：

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

var()を使用して、テキスト要素に変数を適用します：

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

一般的なタイポグラフィ変数には以下が含まれます：

フォントファミリー（ベースおよび見出しフォント）
フォントサイズ（ベースサイズおよび見出しサイズ）
行の高さ（Line height）
文字間隔（Letter spacing）
色（テキストおよび見出しの色）

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Typography Theming</title>
  <style>
    :root {
      /* Typography variables */
      --primary-font: "Georgia", serif;       /* for paragraphs */
      --secondary-font: "Arial", sans-serif; /* for headings */

    }

    body {
      font-family: var(--primary-font);
      color: #000000;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1, h2 {
      font-family: var(--secondary-font);
      color: #000000;
      margin-bottom: 0.5em;
    }

    h1 {
      font-size: 16px;
    }

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 1.2em;
    }

    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="blog-post">
    <h1>The Beauty of Typography in Web Design</h1>
    <p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>

    <h2>Why Typography Matters</h2>
    <p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>

    <h2>Mobile-First Typography</h2>
    <p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
  </div>
</body>
</html>