フォントの基本: サイズ、ファミリー、スタイル、ウェイトを理解しよう

フォントの基本: サイズ、ファミリー、スタイル、ウェイトを理解しよう

ウェブデザインにおいて、フォントは非常に重要な役割を果たします。フォントのサイズやスタイルを調整することで、ウェブページの見た目や印象を大きく変えることができます。今回は、フォントの基本について学んでいきましょう。

フォントサイズの指定方法

フォントサイズは、CSSのfont-sizeプロパティを使って指定します。単位はピクセル(px)、パーセント(%)、相対単位(em, rem)などが使えます。例えば、以下のように指定することができます。

<style>
  p {
    font-size: 16px;
  }
</style>

フォントファミリーの選択と指定方法

フォントファミリーは、CSSのfont-familyプロパティを使って指定します。一般的なフォントファミリーには、”Arial”, “Helvetica”, “Times New Roman”などがあります。例えば、以下のように指定できます。

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

フォントファミリーの指定では、複数のフォント名をカンマで区切って記述できます。これは、最初に指定したフォントが利用できない場合、次に指定したフォントが使われるためです。

フォントスタイルの指定方法

フォントスタイルは、CSSのfont-styleプロパティを使って指定します。一般的なフォントスタイルは、”normal”(デフォルトのスタイル)、”italic”(イタリック体)、”oblique”(オブリーク体)です。例えば、以下のように指定できます。

<style>
  p {
    font-style: italic;
  }
</style>

フォントウェイトの指定方法

フォントウェイトは、CSSのfont-weightプロパティを使って指定します。一般的なフォントウェイトは、”normal”(デフォルトの太さ)、”bold”(太字)、”lighter”(より細い)、または数値(100から900までの範囲)で表されます。例えば、以下のように指定できます。

<style>
  p {
    font-weight: bold;
  }
</style>

数値を使って指定することで、より細かい太さの調整が可能になります。例えば、font-weight: 300;font-weight: 700;といった具合です。

これで、フォントの基本について学ぶことができました。サイズ、ファミリー、スタイル、ウェイトを調整することで、ウェブページの見た目や印象を自由に変えることができます。次のページでは、テキスト装飾や文字間隔、行間隔について学んでいきましょう。

練習問題

  1. フォントサイズを変更するCSSプロパティは何ですか?
  2. テキストを太字にする方法を2つ挙げてください。
  3. 文字間隔を広げるCSSプロパティは何ですか?

解答と解説

  1. フォントサイズを変更するCSSプロパティは font-size です。
  2. テキストを太字にする方法は次の2つです。
    1. CSSプロパティ font-weight の値を bold にする。
    2. HTMLの <strong> タグを使用する。
  3. 文字間隔を広げるCSSプロパティは letter-spacing です。