テキスト・フォント

「font-size」プロバティ

「font-size」プロバティは、文字のサイズ(フォントの大きさ)を指定するCSSプロバティです。
文字のサイズ(フォントの大きさ)の数値や、ブラウザーの標準サイズや親要素との相対的なサイズなどでの指定が可能です。

「font-size」プロバティの値

文字のサイズの単位は「px」「%」「em」「rem」「vw」「vh」などの値を指定することができます。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。

CSSでサイズ指定する単位「px」「%」「em」「rem」の違いと使い分け

「font-size」プロバティの指定方法

文字のサイズ(フォントの大きさ)を指定する場合は、「font-size」プロバティを使い適応する値を指定することで実装できます。

「font-size」プロバティ
セレクタ{
font-size;文字の大きさ;
}
値例
/* 基本値 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* px値 */
font-size: 10px;
font-size: 11px;
font-size: 12px;
font-size: 13px;
font-size: 14px;
font-size: 15px;
font-size: 16px;

/* %値 */
font-size: 80%;
font-size: 90%;
font-size: 100%;
font-size: 110%;
font-size: 120%;
font-size: 130%;
font-size: 140%;

/* em値 */
font-size: 1.0em;
font-size: 1.2em;
font-size: 1.4em;
font-size: 1.6em;
font-size: 2.0em;
表示例

文字のサイズ(10px)

文字のサイズ(12px)

文字のサイズ(14px)

文字のサイズ(16px)

文字のサイズ(18px)