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で確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  イラレ(Illustrator)の遠近グリッドの使い方を簡単に解説
• 
  HTMLで&quotが文字化けする原因と解決方法を解説
• 
  Vimのコマンドの使い方や基本的な操作方法を解説
• 
  PHPのceil関数やfloor関数で小数点を切り上げ・切り捨てする方法
• 
  Pythonのコードはどこに書く？初心者におすすめの場所と実行する手順を解説
• 
  Photoshop(フォトショップ)のクリッピングパスとは？切り抜き方法などを詳しく解説
• 
  PHPのmb_convert_kanaで全角・半角の変換をする方法
• 
  カラーチャートの組み合わせ配色やおすすめツールを解説
• 
  【AWS】認定資格12種類の一覧や難易度、費用などを解説
• 
  Canvaとは？使い方やアカウント登録などを初心者向けに解説

ITやプログラミングに関するニュース

• 
  株式会社スーツが経営者向けウェビナー開催、プロジェクト管理術で生産性向上を解説
• 
  株式会社スタディストがBPO活用ウェビナーを開催、人手不足時代の組織変革を支援
• 
  DLA PiperとAI Samuraiが共催セミナー開催、AI活用時代の知財戦略を解説
• 
  BEENOS HR LinkとJAPAN行政書士法人が共催セミナー開催、改正行政書士法に対応する実務を解説
• 
  クラブツーリズムとスタートライズが共催ウェビナー開催、シニアの消費行動と広告を解説
• 
  日本経営協会が減損会計セミナーを開催、実務判断力と監査対応力の向上を解説
• 
  船井総研ロジが物流不動産ウェビナーを開催、2026年の賃料や建築費の時流を予測
• 
  千葉県広報研究会が広報戦略セミナーを開催、AI活用で広報をコストから未来の売上へ
• 
  LRM株式会社と株式会社kickflowがウェビナー共催、内部統制強化と情報漏えい対策を解説
• 
  NTTコムオンラインがウェビナー開催、MDMと高精度データクレンジングの実践法を解説