CSS | font-size | 文字の大きさ

font-sizeは文字の大きさを指定するためのCSSプロパティです。

.sampleクラスを持つ<div>要素を準備します。mediumは普通の文字の大きさです。

HTML


<div class="medium_">medium</div>
<div class="sample">sample</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

実行結果初期状態

medium

sample

`rem`で指定した場合

.sampleクラスにfont-sizeを2remに指定してみます。文字の大きさが2倍になります。

HTML


<div class="medium_">medium</div>
<div class="sample">sample</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

CSS


.sample {
    font-size: 2rem;
}

実行結果2rem

medium

sample

以下、remで指定した値の実行結果を示します。

HTML


<div>medium</div>

<div class="r0_5">0.5rem</div>
<div class="r1">1rem</div>
<div class="r1_5">1.5rem</div>
<div class="r2">2rem</div>
<div class="r2_5">2.5rem</div>
<div class="r3">3rem</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

CSS


.r0_5   { font-size: 0.5rem; }
.r1     { font-size: 1rem; }
.r1_5   { font-size: 1.5rem; }
.r2     { font-size: 2rem; }
.r2_5   { font-size: 2.5rem; }
.r3     { font-size: 3rem; }

実行結果rem

medium

0.5rem

1rem

1.5rem

2rem

2.5rem

3rem

`px`で指定した場合

.sampleクラスにfont-sizeを30pxに指定してみます。

HTML


<div class="medium_">medium</div>
<div class="sample">sample</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

CSS


.sample {
    font-size: 30px;
}

実行結果30px

medium

sample

以下、pxで指定した値の実行結果を示します。

HTML


<div class="medium_">medium</div>

<div class="px5">5px</div>
<div class="px10">10px</div>
<div class="px15">15px</div>
<div class="px20">20px</div>
<div class="px25">25px</div>
<div class="px30">30px</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

CSS


.px5  { font-size: 5px;  }
.px10 { font-size: 10px; }
.px15 { font-size: 15px; }
.px20 { font-size: 20px; }
.px25 { font-size: 25px; }
.px30 { font-size: 30px; }

実行結果px

medium

5px

10px

15px

20px

25px

30px

キーワードで指定した場合

.sampleクラスにfont-sizeをxx-largeに指定してみます。

HTML


<div class="medium_">medium</div>
<div class="sample">sample</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

CSS


.sample {
    font-size: xx-large;
}

実行結果xx-large

medium

sample

font-sizeは以下のキーワードを使うことができます。

`font-size`の設定値
設定値	意味	デフォルト
`larger`	相対的に大きい文字
`smaller`	相対的に小さい文字
`xx-large`	さらに大きい文字
`x-large`	より大きい文字
`large`	大きい文字
`medium`	標準
`small`	小さい文字
`x-small`	より小さい文字
`xx-small`	さらに小さい文字

HTML


<div class="medium_">medium</div>

<div class="larger">larger</div>
<div class="smaller">smaller</div><br>

<div class="xx-large">xx-large</div>
<div class="x-large">x-large</div>
<div class="large">large</div><br>
<div class="medium">medium</div>
<div class="small">small</div>
<div class="x-small">x-small</div>
<div class="xx-small">xx-small</div>

CSS


.medium_ { color: blue; }

div {
    display: inline-block;   /* インライン・ブロック要素 */
    border:  3px solid blue; /* 境界線 */
    padding: 3px 5px;        /* 内側の余白 */
    margin:  3px;            /* 外側の余白 */
}

CSS


.larger     { font-size: larger; }
.smaller    { font-size: smaller; }

.xx-large   { font-size: xx-large; }
.x-large    { font-size: x-large; }
.large      { font-size: large; }
.medium     { font-size: medium; }
.small      { font-size: small; }
.x-small    { font-size: x-small; }
.xx-small   { font-size: xx-small; }

実行結果キーワード

medium

larger

smaller

xx-large

x-large

large

medium

small

x-small

xx-small

remで指定した場合

pxで指定した場合

キーワードで指定した場合

`rem`で指定した場合

`px`で指定した場合