フォントの基本: サイズ、ファミリー、スタイル、ウェイトを理解しよう
ウェブデザインにおいて、フォントは非常に重要な役割を果たします。フォントのサイズやスタイルを調整することで、ウェブページの見た目や印象を大きく変えることができます。今回は、フォントの基本について学んでいきましょう。
フォントサイズの指定方法
フォントサイズは、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;
といった具合です。
これで、フォントの基本について学ぶことができました。サイズ、ファミリー、スタイル、ウェイトを調整することで、ウェブページの見た目や印象を自由に変えることができます。次のページでは、テキスト装飾や文字間隔、行間隔について学んでいきましょう。
練習問題
- フォントサイズを変更するCSSプロパティは何ですか?
- テキストを太字にする方法を2つ挙げてください。
- 文字間隔を広げるCSSプロパティは何ですか?
解答と解説
- フォントサイズを変更するCSSプロパティは
font-size
です。 - テキストを太字にする方法は次の2つです。
1. CSSプロパティfont-weight
の値をbold
にする。
2. HTMLの<strong>
タグを使用する。 - 文字間隔を広げるCSSプロパティは
letter-spacing
です。