font-size
: 文字の大きさ CSSプロパティ
このページで解説するコードの実行結果。
キーワード
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コードも」適用している。
font-size
の概要
文字の大きさを、下表のキーワードか数値(+ 単位)で指定する。
設定値 | 例 | デフォルト |
---|---|---|
xx-large | xx-large | |
x-large | x-large | |
large | large | |
medium | medium | ○ |
small | small | |
x-small | x-small | |
xx-small | xx-small | |
larger | larger | |
smaller | smaller |
なお、(私は) 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 |
---|---|
fz | font-size: ; |