CSSフォント徹底ガイド！美しいWebデザインに欠かせないフォント設定をマスターしよう

CSSフォントプロパティは、Webページのテキストの表示方法を制御します。フォントファミリー、サイズ、スタイル、太さなどを設定することで、テキストの見た目を自由自在に変えられます。この記事では、CSSフォントプロパティの基本を理解し、美しいWebページを作成するためのヒントを紹介します。

1. Serif体とSans-serif体の違い

フォントは大きく分けて、Serif体（明朝体）とSans-serif体（ゴシック体）の2種類があります。

Serif体: 文字の端に飾り（セリフ）が付いている書体。伝統的で格式高い印象を与えます。
Sans-serif体: セリフのない書体。モダンでシンプルな印象を与えます。

一般的に、コンピュータ画面上では、Sans-serif体の方がSerif体よりも読みやすいと言われています。

2. CSSフォントファミリー

CSSでは、フォントファミリーを指定する際に、以下の2種類の名称を使用できます。

汎用フォントファミリー: 類似した外観を持つフォントのグループを表す名称 (例: serif, sans-serif)。
特定フォントファミリー: 特定のフォントの名称 (例: Times New Roman, Arial)。

汎用フォントファミリー	特定フォントファミリーの例	説明
serif	Times New Roman, Georgia, Garamond	文字の端にセリフが付いている書体。
sans-serif	Arial, Verdana, Helvetica	セリフのない書体。
monospace	Courier New, Lucida Console, Monaco	全ての文字が同じ幅を持つ書体。
cursive	Brush Script MT, Lucida Handwriting	筆記体を模した書体。
fantasy	Copperplate, Papyrus	装飾的な書体。

3. font-familyプロパティ

font-family プロパティは、テキストに使用するフォントファミリーを指定します。

ブラウザによって、利用可能なフォントは異なります。そのため、font-family プロパティには、複数のフォント名をカンマ区切りで指定することをお勧めします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>フォント例</title>
  <style>
    p {
      font-family: "Helvetica", "Arial", sans-serif;
    }
  </style>
</head>
<body>

  <h1>これは見出しです</h1>

  <p>これは段落です。このテキストはHelveticaフォントで表示されます。Helveticaが使用できない場合はArialフォント、Arialも使用できない場合はデフォルトのサンセリフフォントが使用されます。</p>

  <p>これは別の段落です。比較のために、異なるデバイスやブラウザでこのテキストを表示してみてください。</p>

</body>
</html>

CSSフォント

上記の例では、ブラウザはまず Helvetica フォントを探します。見つからない場合は、 Arial フォントを探し、それも見つからない場合は、汎用フォントファミリーである sans-serif フォントを使用します。

注意: フォントファミリー名に複数の単語が含まれている場合は、引用符で囲む必要があります (例: "Times New Roman")。

4. font-styleプロパティ

font-style プロパティは、テキストのスタイルを指定します。主に斜体を指定するために使用されます。

normal: 通常のスタイル
italic: 斜体
oblique: イタリック体の代替 (あまりサポートされていません)

例:

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

5. font-sizeプロパティ

font-size プロパティは、テキストのサイズを指定します。

HTMLでは、見出しには<h1> から <h6> タグを、段落には<p> タグを使用します。 font-size プロパティを使用して、これらの要素のテキストサイズを調整することができます。

フォントサイズは、絶対サイズまたは相対サイズで指定できます。

絶対サイズ: ピクセル (px)、センチメートル (cm)、ポイント (pt) など、固定の単位でサイズを指定します。
相対サイズ: 親要素のフォントサイズに対する割合 (%) や、em (em)、rem (rem) などの相対的な単位でサイズを指定します。

単位	説明
px	ピクセル。画面上の点の数を表す単位。
cm	センチメートル。
pt	ポイント。印刷で使用される単位。
%	親要素のフォントサイズに対する割合。
em	親要素のフォントサイズに対する倍率。
rem	ルート要素 (<html>) のフォントサイズに対する倍率。

注意: em と rem は、相対的な単位であるため、Webサイト全体のフォントサイズを簡単に調整できます。

例:

h1 { font-size: 24px; } /* 絶対サイズ */
p { font-size: 1.2em; } /* 相対サイズ */

6. font-weightプロパティ

font-weight プロパティは、テキストの太さを指定します。

normal: 通常の太さ
bold: 太字
bolder: 親要素よりも太い太字
lighter: 親要素よりも細い太字
100, 200, 300, ..., 900: 数値で太さを指定 (400 は normal、700 は bold に相当)
inherit: 親要素から太さを継承

例:

p { font-weight: bold; } /* 太字 */

7. フォント複合プロパティ (font)

複数のフォントプロパティをまとめて指定する場合は、font プロパティを使用できます。

font プロパティの構文は以下のとおりです。

font: font-style font-variant font-weight font-stretch font-size/line-height font-family;

注意:

font-size と font-family は必ず指定する必要があります。
font-size と line-height の間にはスラッシュ (/) を入れます。
その他のプロパティは省略可能です。省略した場合は、デフォルト値が使用されます。
プロパティの順番は上記の通りで、変更できません。

例:

body {
  font: italic bold 16px/1.5 "Helvetica", "Arial", sans-serif;
}

8. CSSフォントプロパティ一覧

プロパティ	説明
font	複数のフォントプロパティをまとめて指定
font-family	フォントファミリーを指定
font-size	フォントサイズを指定
font-style	フォントスタイルを指定 (例: 斜体)
font-variant	小型大文字などを指定
font-weight	フォントの太さを指定

9. 参考: 美しいCSSフォント20選

様々なフォントを組み合わせることで、Webサイトのデザインはより魅力的になります。以下に、美しいCSSフォントの例を20個紹介します。これらのフォントは、Google FontsなどのWebフォントサービスから無料で利用できます。

Roboto
Open Sans
Lato
Montserrat
Raleway
Poppins
Oswald
Playfair Display
Merriweather
Source Sans Pro
PT Sans
Noto Sans
Ubuntu
Droid Sans
Josefin Sans
Quicksand
Work Sans
Nunito
Rubik
Fira Sans

これらのフォントを試して、Webサイトのデザインに最適なフォントを見つけてください。

CSSフォントに関するQ&A

Q1: 特定のフォントがユーザーの環境にインストールされていない場合、どうなりますか？

A1: font-family プロパティで複数のフォントを指定することで、代替フォントを使用するようにブラウザに指示できます。最後のフォントとして、汎用フォントファミリー (例: sans-serif) を指定しておくと、どの環境でも適切なフォントが表示されます。

Q2: Webフォントとは何ですか？

A2: Webフォントは、Webサイトで使用するフォントをサーバーからダウンロードして表示する仕組みです。これにより、ユーザーの環境にインストールされていないフォントを使用することができます。

Q3: フォントサイズをレスポンシブ対応するにはどうすれば良いですか？

A3: メディアクエリを使用して、画面サイズに合わせてフォントサイズを変更することができます。例えば、スマートフォンなどの小さな画面ではフォントサイズを小さく、デスクトップなどの大きな画面ではフォントサイズを大きくすることができます。