CSS 速習チュートリアル

CSS フォント

CSSフォントの選択は、ウェブサイトのユーザー体験において非常に重要な役割を果たします。適切なフォントを使用することで、ブランドのアイデンティティを確立し、コンテンツの可読性を高めることができます。

1. CSS フォントファミリ (CSS Font Families)

CSSでは、フォントファミリには「総称ファミリ（Generic Family）」と「特定のフォントファミリ名（Font Family Name）」の2種類があります。

  • Serif（セリフ）: 文字の端に小さな飾り（ヒゲ）があるフォント（例: Times New Roman, Georgia）。
  • Sans-serif（サンセリフ）: 文字の端に飾りがなく、直線的なフォント（例: Arial, Verdana）。「Sans」はフランス語で「〜なし」を意味します。
  • Monospace（等幅フォント）: すべての文字が同じ固定幅を持つフォント（例: Courier New, Lucida Console）。コードの表示によく使われます。
  • Cursive（筆記体）: 手書きのようなスタイルのフォント。
  • Fantasy（ファンタジー）: 装飾的で遊び心のあるフォント。

1.1 font-family プロパティ

font-family プロパティでは、複数のフォント名を「フォールバック（後退）」システムとして指定する必要があります。もしブラウザが最初のフォントをサポートしていない場合、次のフォントを試行します。

.p1 {
  font-family: "Times New Roman", Times, serif; /* 特定のフォント名、次に総称ファミリを指定 */
}

.p2 {
  font-family: Arial, Helvetica, sans-serif; /* サンセリフ系の指定 */
}

       注意: フォント名が2語以上（例: "Times New Roman"）の場合は、必ず引用符で囲んでください。

2. CSS フォントスタイル (CSS Font Style)

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

  • normal: 通常のスタイル。
  • italic: イタリック体（斜体）。
  • oblique: オブリーク体。イタリック体と似ていますが、単に文字を傾けたスタイルです（サポート状況によりイタリックと同じに見えることが多いです）。
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

3. CSS フォントウェイト (CSS Font Weight)

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

p.normal {
  font-weight: normal; /* 標準 */
}

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

p.thicker {
  font-weight: 900; /* 数値による指定 (100-900) */
}

4. CSS フォントバリアント (CSS Font Variant)

font-variant プロパティは、テキストを「スモールキャップス（Small-caps）」にするかどうかを設定します。これは、小文字をすべて大文字に変換しますが、本来の大文字よりも小さいサイズで表示するスタイルです。

p.small-caps {
  font-variant: small-caps;
}

5. CSS フォントサイズ (CSS Font Size)

font-size プロパティは、テキストの大きさを設定します。ウェブデザインにおいて、見出し（Heading）と段落（Paragraph）を区別するために非常に重要です。

5.1 ピクセル (px) による指定

ピクセルでサイズを設定すると、ブラウザに対して特定のサイズを維持するよう指示できます。

h1 {
  font-size: 40px;
}

p {
  font-size: 14px;
}

5.2 em による指定

ユーザーがブラウザメニューでテキストサイズを変更できるように、em を使用することが推奨されます。1em は現在のフォントサイズ（ブラウザのデフォルトは通常 16px）と同じです。

計算式: pixels/16 = em

h1 {
  font-size: 2.5em; /* 40px/16 = 2.5em */
}

p {
  font-size: 0.875em; /* 14px/16 = 0.875em */
}

5.3 レスポンシブなフォントサイズ (vw)

vw（ビューポート幅）を使用すると、ブラウザのウィンドウサイズに合わせてフォントサイズが変化します。

h1 {
  font-size: 10vw; /* ビューポート幅の10% */
}

6. Google Fonts の活用 (Google Fonts)

標準のフォント以外を使用したい場合、Google Fonts サービスを利用するのが一般的です。HTMLの <head> 内でスタイルシートを読み込むだけで簡単に実装できます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>

7. フォントショートハンド (CSS Font Shorthand)

コードを短縮するために、font プロパティで一括指定が可能です。

指定可能な順番は以下の通りです：

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size / line-height（必須）
  5. font-family（必須）
p {
  /* style variant weight size/line-height family */
  font: italic small-caps bold 20px/30px Arial, sans-serif;
}

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

プロパティ説明
fontフォントに関する各種プロパティを1つの宣言で設定するショートハンド
font-familyテキストのフォントファミリ（書体）を指定する
font-sizeテキストのフォントサイズを設定する
font-styleテキストをイタリック体やオブリーク体にする
font-variantスモールキャップス（小さな大文字）を表示するかどうかを設定する
font-weightフォントの太さを設定する