CSS(スタイルシート)で字体や書体などのフォントを指定する方法

Webサイトの文字をゴシック体や明朝体に変更したい場合、CSSのfont-familyプロパティを使用します。font-familyは要素に対してフォントの種類を指定するCSSプロパティで、サイト全体の印象を大きく左右する重要な設定です。

font-familyプロパティの基本的な書き方は、セレクタに対して「font-family: フォント名;」という形式で記述します。フォント名は引用符で囲むことが推奨されており、ダブルクォーテーション（"）またはシングルクォーテーション（'）のどちらでも使用できます。

body {
  font-family: "メイリオ";
}

上記のコードでは、body要素全体に対してメイリオフォントを適用しています。サイト全体のフォントを統一したい場合は、このようにbodyセレクタに指定すると効率的です。

フォントの種類を指定する方法として、以下の3つがあります。

• 複数のフォントを指定する
• 総称フォントファミリーを使う

それぞれのフォントには異なる特徴があり、閲覧環境に応じて適切に使い分けることで、より多くのユーザーに意図したデザインを届けることができます。以下では各方法について詳しく解説していきます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

• 「Pythonマスター講座」

  

• 「ChatGPT基礎講座」

  

複数のフォントを指定する

font-familyには、複数のフォント名をカンマ区切りで指定できます。これにより、ユーザーの環境に最初のフォントがインストールされていない場合でも、次のフォントが自動的に適用されるため、表示の安定性が向上します。

body {
  font-family: "ヒラギノ角ゴ ProN", "Yu Gothic", "メイリオ", sans-serif;
}

この指定では、最初にヒラギノ角ゴ ProNが使用され、次にYu Gothic、メイリオの順で優先されます。WindowsとmacOSの両方に対応したフォント指定を行うことで、OS間でのデザインの統一性を保つことができます。

総称フォントファミリーを使う

総称フォントファミリーは特定のフォント名ではなく、ゴシック体や明朝体といったフォントの系統を示すものです。指定したすべてのフォントが見つからなかった場合のフォールバックとして機能します。

主な総称フォントファミリーとして、以下の5つがあります。

一般的なWebサイトでは、sans-serif（ゴシック体）またはserif（明朝体）のどちらかを最後に指定しておくことが推奨されます。これにより、どのような環境でもフォントが確実に表示されるようになります。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

• 「Python基礎・実践研修」

  

• 「オーダーメイドコース」

  

CSSではfont-familyによるフォントの種類指定だけではなく、文字の大きさや太さ、スタイルなども細かく調整できます。これらのプロパティを組み合わせることによって、見出しと本文のメリハリをつけたり、重要な箇所を強調したりすることが可能になります。

フォントのサイズやスタイルを指定する方法として、以下の3つがあります。

• font-sizeでサイズを指定する
• font-weightで太さを指定する
• font-styleでスタイルを指定する

それぞれのプロパティは独立して使用できますが、複数を組み合わせることで表現の幅が大きく広がります。以下では各プロパティの使い方について、詳しく解説していきます。

font-sizeでサイズを指定する

font-sizeプロパティは、文字の大きさを指定するCSSプロパティです。プロパティとは要素のスタイルを定義するための設定項目のことで、見出しや本文のサイズを自由に調整できます。

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

上記のコードでは、h1見出しに32px、p段落に16pxのフォントサイズを設定しています。単位にはpx（ピクセル）の他にも、em、rem、%などが使用でき、レスポンシブデザインに対応する場合はemやremを使用することが推奨されます。

font-weightで太さを指定する

font-weightプロパティは、文字の太さを指定するCSSプロパティです。キーワードまたは数値で太さを指定でき、強調したいテキストを視覚的に際立たせることができます。

h2 {
  font-weight: bold;
}

.emphasis {
  font-weight: 600;
}

キーワードではnormal（標準）、bold（太字）、lighter（細字）、bolder（より太字）が使用でき、数値では100から900までの範囲で指定します。一般的には400がnormal、700がboldに相当し、数値が大きくなるほど文字が太くなります。

font-styleでスタイルを指定する

font-styleプロパティは、文字を斜体や筆記体で表示するためのCSSプロパティです。引用文や外国語表記など、通常のテキストと差別化したい場合に使用されます。

em {
  font-style: italic;
}

.quote {
  font-style: oblique;
}

主な値としてnormal（通常体）、italic（イタリック体）、oblique（斜体）が指定できます。italicは本来の筆記体フォントを使用し、obliqueは通常のフォントを傾けて表示するため、表示される見た目が異なる場合があります。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。