font-size: フォントサイズを指定する

スポンサーリンク

Webページのフォントサイズを指定するには、font-size を使用します。

font-size に指定する値は次の4通りあります。

実数値+単位
数値に単位を付けて指定します。(例: 14px, 12pt、1em)
パーセント値+%
親要素のフォントサイズに対するパーセンテージを指定します。(例: 100%、120%)
相対サイズキーワード
larger、smallerの2つがあります。親要素のフォントサイズに対する相対サイズです。 larger の場合は1周り大きいサイズ、smaller の場合は1回り小さいサイズになります。 1周りとはどれくらいかは、次で説明する絶対サイズキーワードを参考にしてください。
絶対サイズキーワード
xx-small、x-small、small、medium、large、x-large、xx-large の7つのキーワードがあります。 medium を基準とし、最も小さいサイズがxx-small で、 最も大きいサイズが xx-large です。

キーワードと表示比率の関係は次の通りです。

キーワード比率
xx-small0.6倍
x-small0.75倍
small0.89倍
medium1倍
large1.2倍
x-large1.5倍
xx-large2倍

使用例


body {
    font-size: 15px;
}

p {
    font-size: 100%;
}

h1 {
    font-size: x-large;
}

サンプル

複数のフォントサイズを指定してみました。表示の違いは下の通りです。

このフォントサイズは「100%」です。

このフォントサイズは「1em」です。

このフォントサイズは「15pt」です。

このフォントサイズは「15px」です。

このフォントサイズは「xx-small」です。

このフォントサイズは「x-small」です。

このフォントサイズは「small」です。

このフォントサイズは「medium」です。

このフォントサイズは「large」です。

このフォントサイズは「x-large」です。

このフォントサイズは「xx-large」です。

このフォントサイズは「larger」です。

このフォントサイズは「smaller」です。

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト