概要へ移動

このページで解説するコードの実行結果。

キーワード
xx-large
x-large
large
medium
small
x-small
xx-small
数値
10px
20px
30px
1em
1.5em
2em
larger / smaller
10px
smaller
larger
30px
smaller
larger

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {

    color:              navy;           /*  文字の色 */

    border:             2px solid blue; /*  境界線 */

    margin:             5px;            /*  外側の余白 */

    padding:            5px 10px;       /*  内側の余白 */

}

font-sizeの概要

文字の大きさを、下表のキーワードか数値（＋ 単位）で指定する。

（表） font-sizeの設定値
設定値例デフォルト
xx-largexx-large
x-largex-large
largelarge
mediummedium○
smallsmall
x-smallx-small
xx-smallxx-small
largerlarger
smallersmaller

なお、（私は） medium を middleとよく間違えるので指摘しておく。

プロパティ設定する内容真ん中の設定値
font-size文字の大きさmedium
普通
vertical-align縦方向に整列middle
中央
text-align横方向に整列center
中央
CSS : font-size
.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;   }
HTML : 適用するHTML
<div class="xx-large">  xx-large</div>

<div class="x-large">   x-large </div>

<div class="large">     large   </div>

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

<div class="small">     small   </div>

<div class="x-small">   x-small </div>

<div class="xx-small">  xx-small</div>
実行結果
xx-large
x-large
large
medium
small
x-small
xx-small

数値で指定することもできる。

CSS : font-size
.px10      {      font-size:   10px;      }

.px20      {      font-size:   20px;      }

.px30      {      font-size:   30px;      }



.em10      {      font-size:   1em;      }

.em15      {      font-size:   1.5em;      }

.em20      {      font-size:   2em;      }
HTML : 適用するHTML
<div class="px10">    10px  </div>

<div class="px20">    20px  </div>

<div class="px30">    30px  </div>



<div class="em10">    1em  </div>

<div class="em15">    1.5em  </div>

<div class="em20">    2em  </div>
実行結果
10px
20px
30px
1em
1.5em
2em

largerとsmaller

largerとsmallerは元のフォントサイズに対して、「より大きく」「より小さく」表示する。

CSS : font-size
.px10    { font-size:   10px;    }

.px30    { font-size:   30px;    }



.smaller { font-size:   smaller; }

.larger  { font-size:   larger;  }
HTML : 適用するHTML
<div class="px10">

    10px



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

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

</div>



<div class="px30">

    30px



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

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

</div>
実行結果
10px
smaller
larger
30px
smaller
larger

Emmet : fz

記述Visual Studio Code
fzfont-size: ;