【🔰初心者向け】CSS入門：CSSでフォント種類の指定方法を解説

ウェブページのデザインにおいて、フォントの選択は重要な要素のひとつです。CSSを使って、テキストのフォント種類を簡単に指定することができます。この記事では、初心者向けにCSSでのフォント指定方法を解説します。

1. フォントの基本指定方法

CSSでは、font-familyプロパティを使ってフォントを指定します。このプロパティは、テキストに適用するフォントの種類を決定します。

使用例

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

この例では、Arialフォントが指定され、もし利用できない場合はsans-serifという汎用フォントが適用されます。

2. フォントファミリーの指定

フォントを指定する際には、複数のフォントを指定することが推奨されます。最初に指定されたフォントが利用できない場合、次に指定されたフォントが適用されるためです。

使用例

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

この例では、まずTimes New Romanが指定され、次にTimes、それでも利用できない場合はserifが適用されます。

3. ウェブセーフフォントとは？

ウェブセーフフォントとは、ほとんどのデバイスで標準的にインストールされているフォントのことです。ウェブセーフフォントを使うことで、異なる環境でも一貫したデザインが期待できます。

代表的なウェブセーフフォント

• Arial, sans-serif
• Verdana, sans-serif
• Times New Roman, serif
• Georgia, serif
• Courier New, monospace

4. カスタムフォントの使用

ウェブセーフフォントに加えて、カスタムフォントを使用することも可能です。カスタムフォントを使用するには、@font-faceルールを使用してフォントを指定し、その後font-familyで適用します。

使用例

@font-face {
    font-family: "MyCustomFont";
    src: url("mycustomfont.woff2") format("woff2"),
         url("mycustomfont.woff") format("woff");
}

h1 {
    font-family: "MyCustomFont", sans-serif;
}

この例では、MyCustomFontというカスタムフォントがh1要素に適用されます。

5. フォントの汎用ファミリー

フォント指定の最後には、必ず汎用ファミリーを追加しましょう。汎用ファミリーには以下のようなものがあります。

• serif: セリフ体（例: Times New Roman）
• sans-serif: サンセリフ体（例: Arial）
• monospace: 等幅フォント（例: Courier New）
• cursive: 筆記体（例: Comic Sans MS）
• fantasy: 装飾的なフォント（例: Papyrus）

6. まとめ

CSSでフォントを指定することで、ウェブページのデザインを大きく向上させることができます。font-familyプロパティを適切に使い、複数のフォントを指定することで、異なるデバイスでも一貫した表示が可能になります。ウェブセーフフォントやカスタムフォントを活用して、魅力的なデザインを実現しましょう。