CSS のフォントプロパティを使ってテキストを装飾する

はじめに

この実験では、学生たちは CSS のフォントプロパティを使ってテキストをスタイリッシュにする方法を学び、ウェブデザインにおける基本的な文字装飾技術を探求します。包括的なチュートリアルでは、HTML ドキュメントの作成と、フォントファミリー、サイズ、行間、スタイル、太さなどのさまざまなフォント装飾方法の適用を通じて学習者を案内します。

参加者はまず基本的な HTML 構造を設定し、次にテキストの外見を制御する CSS プロパティを実装することで徐々に文字装飾技術を向上させます。実践的な練習を通じて、学生たちはさまざまなフォント技術を使って視覚的に魅力的で読みやすいウェブコンテンツを作成する方法を見つけ出し、ウェブ文字装飾デザインの実践的な経験を得ることができます。

HTML ファイルを作成して基本構造を設定する

このステップでは、HTML ファイルを作成し、CSS を使ってテキストをスタイリッシュにするための基本構造を設定する方法を学びます。WebIDE を使って、文字装飾の練習の基礎となる新しい HTML ドキュメントを作成します。

まず、WebIDE の~/projectディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、typography.htmlという新しいファイルを作成します。

作成する基本的な HTML 構造は次の通りです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* 後のステップで CSS スタイルをここに追加します */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Typography</h1>
    <p>This paragraph will demonstrate various text styling techniques.</p>
  </body>
</html>

この HTML 構造の主要なコンポーネントを分解してみましょう。

<!DOCTYPE html>はこれを HTML5 ドキュメントとして宣言します
<html lang="en">はドキュメントの言語を設定します
<head>はドキュメントに関するメタデータを含みます
<meta charset="UTF-8">は適切な文字エンコーディングを確保します
<meta name="viewport">はレスポンシブデザインに役立ちます
<title>はページのタイトルを設定します
<style>タグは CSS を追加する場所です（後のステップで拡張します）
<body>はページの表示内容を含みます

このファイルをブラウザで開いたときの例の出力は次の通りです。

["見出し「Welcome to CSS Typography」とその下の段落があるシンプルなページ"]

見出しにフォントファミリーを適用する

このステップでは、CSS を使って見出しに異なるフォントファミリーを適用する方法を学びます。フォントファミリーは、テキストの文字種を決定する重要なプロパティであり、視覚的に魅力的で読みやすい文字装飾を作成することができます。

WebIDE でtypography.htmlファイルを開き、<style>セクションを変更してフォントファミリーのプロパティを追加します。

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

フォントファミリーのキーコンセプトを見てみましょう。

ウェブセーフフォント：これは、さまざまなデバイスやブラウザで一般的に利用可能なフォントです。
- サンセリフフォント（Arial のような）：クリーンで現代的な外観
- セリフフォント（Times New Roman のような）：伝統的で正式な外観
フォールバックフォント：常にバックアップとして汎用的なフォントファミリーを指定します。
- sans-serif
- serif
- monospace
複数のフォントオプション：好みの順にフォントをリストします。
- 最初のフォントが主な選択肢
- 前のフォントが利用できない場合、その後のフォントがフォールバックになります。

異なる見出しを示すように HTML を拡張します。

<body>
  <h1>Main Heading (Arial)</h1>
  <h2>Subheading (Times New Roman)</h2>
  <p>Paragraph text in Verdana</p>
</body>

ブラウザでの例の出力は次の通りです。

[見出しが以下のように表示されるページ：
- Arialのメイン見出し
- Times New Romanのサブ見出し
- Verdanaの段落]

フォントサイズと行間を設定する

このステップでは、CSS を使ってフォントサイズと行間を設定することで、テキストの読みやすさと外観を制御する方法を学びます。これらのプロパティは、視覚的に魅力的で読みやすい文字装飾を作成するために重要です。

typography.htmlファイルを開き、次の CSS で<style>セクションを更新します。

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

キーコンセプトを分解してみましょう。

フォントサイズ：
- ピクセル（px）、em、または rem で測定されます
- テキストの高さを制御します
- 一般的なサイズ：
  - 見出し：24 - 36px
  - 本文：14 - 16px
行間：
- テキストの行間の垂直方向のスペースを制御します
- 読みやすさを向上させます
- 通常は 1.4 から 1.6 の間で設定されます
- 単位なし（推奨）またはピクセルで指定できます

異なるテキストサイズを示すように HTML を拡張します。

<body>
  <h1>Main Heading (36px)</h1>
  <h2>Subheading (24px)</h2>
  <p>Paragraph text with increased line height for better readability.</p>
</body>

ブラウザでの例の出力は次の通りです。

[見出しが以下のように表示されるページ：
- 大きなメイン見出し
- 小さなサブ見出し
- 読みやすさを向上させるために行間が広がった段落]

フォントスタイルと太さを追加する

このステップでは、CSS を使ってフォントスタイルと太さを使ってテキストに強調やバラエティを追加する方法を学びます。これらのプロパティは、視覚的な階層構造を作成し、文字装飾の全体的なデザインを改善するのに役立ちます。

typography.htmlファイルを開き、次の CSS で<style>セクションを更新します。

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

キーコンセプトを見てみましょう。

フォントスタイル：
- normal：標準的なテキストの外観
- italic：斜体のテキスト
- oblique：italic に似ていますが、よりまれ
フォント太さ：
- normal：通常のテキスト（400）
- bold：太く、目立つテキスト（700）
- 数値：100 - 900（100 刻み）
  - 400：通常
  - 600：セミボールド
  - 700：太字

これらのプロパティを示すように HTML を変更します。

<body>
  <h1>Main Heading (Italic and Bold)</h1>
  <h2>Subheading (Semi-Bold)</h2>
  <p>
    Regular paragraph text.
    <span class="highlight">This text is highlighted</span>.
  </p>
</body>

ブラウザでの例の出力は次の通りです。

[見出しが以下のように表示されるページ：
- 斜体で太字のメイン見出し
- セミボールドのサブ見出し
- 強調されたspanが含まれる段落]

ショートハンドを使ってフォントプロパティを結合する

このステップでは、CSS のfontショートハンドプロパティを使って、複数のフォント関連のプロパティを 1 つの簡潔な宣言にまとめる方法を学びます。この方法により、CSS をより読みやすく効率的にすることができます。

typography.htmlファイルを開き、次の CSS で<style>セクションを更新します。

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

ショートハンドのfontプロパティの構文を分解してみましょう。

基本構文：font: [font-style] [font-weight] [font-size] [line-height] [font-family]
- 順序が重要です！
- すべての値が必要なわけではありません
一般的なショートハンドパターン：
- font: style weight size family
- font: size/line-height family
- font: weight size family

ショートハンドのプロパティを示すように HTML を変更します。

<body>
  <h1>Main Heading (Shorthand)</h1>
  <h2>Subheading (Compact Syntax)</h2>
  <p>
    Paragraph with line height. <span class="highlight">Highlighted text</span>.
  </p>
</body>

ブラウザでの例の出力は次の通りです。

[見出しが以下のように表示されるページ：
- 太字と斜体のメイン見出し
- コンパクトなフォント宣言のサブ見出し
- 行間が統合された段落]

まとめ

この実験では、参加者は CSS のフォントプロパティを使ったテキスト装飾の基本を段階的に学びます。最初の段階では、基本構造を持つ HTML ファイルを作成し、必須のメタデータを設定し、文字装飾の実験用のキャンバスを用意します。学習者は、DOCTYPE 宣言、言語設定、ビューポート設定などの重要な HTML 要素と属性を学びます。

この実験は、フォント操作に焦点を当てた実際の CSS 装飾技術に進みます。参加者は、見出しにフォントファミリーを適用する方法、フォントサイズと行間を調整する方法、およびフォントスタイルと太さを変更する方法を探求します。WebIDE で直接作業し、徐々に HTML と CSS コードを構築することで、学生たちはテキストの外観を変える実践的な経験を得るとともに、異なるフォントプロパティが効果的なウェブの文字装飾にどのように貢献するかを理解することができます。