【CSS】フォント関連プロパティについて基本解説_Webの基礎

記事内には広告が含まれます

2026年6月17日

Webページの文字デザインを決める「CSSフォント」の基本を初心者向けに解説します。

はじめに

文字デザインは、Webサイトの印象を大きく左右します。CSSでフォントを正しく指定することは、サイトの見やすさ（視認性）だけでなく、サイトの雰囲気を伝えるためにも非常に重要です。

この記事では、CSSを使ったフォント指定の基礎知識を具体的なコード例を示しながら分かりやすく解説します！

CSSフォントとは？

CSSのフォント関連プロパティは、Webページ上に表示される文字の見た目を制御するための機能です。例えば、次のような設定を指定できます。

フォントの種類
文字サイズ
太字
斜体
行間
フォントの一括指定

HTMLが「文章の内容」を作るのに対し、CSSは「文章の見た目」を整える役割を持っています。

CSSでフォントを設定する方法

CSSでフォント（文字）の見た目や配置、装飾を設定するためのプロパティを一覧表にまとめながら解説していきます。

基本的なフォント設定プロパティ

文字の書体、サイズ、太さなど、フォントそのものの基本属性を指定するプロパティです。

プロパティ名	役割・概要	主な指定値（例）
`font-family`	フォント（書体）の種類を指定する	`"Helvetica Neue"`, `sans-serif`, `serif`
`font-size`	文字の大きさを指定する	`16px`, `1rem`, `120%`, `small`
`font-weight`	文字の太さを指定する	`normal`, `bold`, `400`, `700`
`font-style`	文字を斜体（イタリック体）にする	`normal`, `italic`, `oblique`
`font`	上記や行間を1行でまとめて指定する（ショートハンド）	`bold 16px/1.5 "Noto Sans JP"`

font-family

フォントの種類を指定する

書式：

selector {
    font-family: フォント名;
}

サンプル

body {
    font-family: "Yu Gothic";
}

フォント名に日本語やスペースが含まれる場合は、必ずダブルクォーテーションで囲みます。

フォールバックフォント

指定したフォントが利用できない場合、後ろのフォントが順に使用されます。

body {
    font-family:
        "Yu Gothic",
        "Meiryo",
        sans-serif;
}

動作順 > Yu Gothic → Meiryo → sans-serif

環境によって利用できるフォントが異なるため、複数指定するのが一般的です。

汎用フォントファミリー

値	種類
serif	明朝体
sans-serif	ゴシック体
monospace	等幅
cursive	筆記体
fantasy	装飾文字

ユーザーの使用環境によって、入っているフォントがそれぞれ異なります。そのため、CSSの font-family プロパティでは、以下のように「具体的なフォント名」と上表の「汎用フォントファミリー」をセットで記述するのが鉄則とされています。

サンプル

.sample1 {
    font-family: serif;
}

.sample2 {
    font-family: sans-serif;
}

.sample3 {
    font-family: monospace;
}

font-size（文字サイズ）

文字サイズを指定します。

使用できる単位

単位	説明
px	ピクセル（固定サイズ）
rem	基準 (html) サイズの倍率
em	倍率（親要素基準）
%	割合（親要素基準）
vw	画面幅(Viewport Width)横幅の割合

px 指定

p {
    font-size: 18px;
}

20ピクセルで表示されます。

rem 指定（推奨）

p {
    font-size: 1.2rem;
}

rem はルート要素（html）の文字サイズを基準にします。

例えば

html {
    font-size: 16px;
}

html のフォントサイズが 16px なら rem は

1rem = 16px
1.5rem = 16×1.5 = 24px
2rem = 16×2 = 32px

となります。

現在 rem が推奨される理由
・レスポンシブ対応しやすい
・アクセシビリティが高い
・保守しやすい

font-weight（文字の太さ）

文字の太さを指定する

書式

selector {
    font-weight: 値;
}

よく使う値

値	説明
normal	通常
bold	太字
100～900	数値指定

サンプル

.normal {
    font-weight: normal;
}

.bold {
    font-weight: bold;
}

.heavy {
    font-weight: 900;
}

数値指定のイメージ

値　　太さ
100 　極細
200
300 　細い
400 　normal（標準）
500　やや太い
600
700 　bold（太い）
800
900 　極太

※フォントによって対応範囲は異なります。

font-style（斜体）

文字を斜体にする

p {
    font-style: italic;
}

表示

斜体文字

主な値

値	説明
normal	通常
italic	斜体
oblique	疑似斜体

通常に戻す

p {
    font-style: nomal;
}

line-height（行間）

行間指定は文章の読みやすさに大きく影響します。

行間を指定する

p {
    line-height: 1.8;
}

line-heightはpxでも指定可能ですが、通常は倍率指定がおすすめです。

行間比較

.tight {
    line-height: 1.2;
}

.normal {
    line-height: 1.6;
}

.wide {
    line-height: 2;
}

イメージ

line-height:1.2
—————-
1行目
2行目
—————-

line-height:2
—————-
1行目

2行目
—————-

読みやすい行間の目安

用途	推奨値
本文	1.6〜2
見出し	1.2〜1.4
ボタン	1〜1.2

font-variant

小型大文字に変換

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

表示例

CSS Font Sample
↓
CSS FONT SAMPLE

（大文字を小型化して表示）

fontプロパティをまとめて指定

複数のフォントプロパティを次の書式でまとめて記述できます。

一括指定書式

selector {
    font:
        font-style: italic;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.8;
        font-family: sans-serif;
}

複数の設定を一行で記述

p {
    font: italic 700 20px/1.8 sans-serif;
}

指定内容

italic      → 斜体
bold        → 太字
20px        → サイズ
1.8         → 行間
sans-serif  → フォント

サンプル

ブログ本文デザイン

<article class="post">
    <h2>CSSフォントの設定</h2>
    <p>
        フォント設定は読みやすさに直結します。
    </p>
</article>

HTML

.post {
    font-family: "Yu Gothic", "Meiryo", sans-serif;
}

.post h2 {
    font-size: 2rem;
    font-weight: 700;
}

.post p {
    font-size: 1rem;
    line-height: 1.8;
}