font-sizeプロパティは、フォントのサイズを様々な指定方法で変更できます。
| 指定方法 | 簡易説明 |
|---|---|
| 単位付き数値 | 指定した数値でフォントサイズが変わる |
| % | 指定した要素親に対しての割合で変わる |
| smaller | 要素親に対して1段階サイズが小さくなる |
| larger | 要素親に対して1段階サイズが大きくなる |
| xx-small | x-smallの1/1.2倍サイズ |
| x-small | smallの1/1.2倍サイズ |
| small | mediumの1/1.2倍サイズ |
| medium | 標準サイズ |
| large | mediumの1.2倍サイズ |
| x-large | largeの1.2倍サイズ |
| xx-large | x-largeの1.2倍サイズ |
font-sizeプロパティ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>フォントサイズについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<ul>
<li class="font-xxs">xx-smallのフォントサイズです</li>
<li class="font-xs">x-smallのフォントサイズです</li>
<li class="font-s">smallのフォントサイズです</li>
<li class="font-m">medium(標準)のフォントサイズです</li>
<li class="font-l">largeのフォントサイズです</li>
<li class="font-xl">x-largeのフォントサイズです</li>
<li class="font-xxl">xx-largeのフォントサイズです</li>
</ul>
<hr>
<ul>
<li class="font-smaller">smallerのフォントサイズです</li>
<li class="font-m">mediumのフォントサイズです</li>
<li class="font-larger">largerのフォントサイズです</li>
</ul>
<hr>
<ul>
<li class="font-50">50%のフォントサイズです</li>
<li class="font-80">80%のフォントサイズです</li>
<li class="font-100">100%のフォントサイズです</li>
<li class="font-150">150%のフォントサイズです</li>
</ul>
</body>
</html>.xxs{font-size: xx-small;}
.xs{font-size: x-small;}
.s{font-size: small;}
.m{font-size: medium;}
.l{font-size: large;}
.xl{font-size: x-large;}
.xxl{font-size: xx-large;}
.smaller{font-size: smaller;}
.larger{font-size: larger;}
.p50{font-size: 50%;}
.p80{font-size: 80%;}
.p100{font-size: 100%;}
.p150{font-size: 150%;}出力結果
- xx-smallのフォントサイズです
- x-smallのフォントサイズです
- smallのフォントサイズです
- medium(標準)のフォントサイズです
- l argeのフォントサイズです
- x-largeのフォントサイズです
- xx-largeのフォントサイズです
- smallerのフォントサイズです
- mediumのフォントサイズです
- largerのフォントサイズです
- 50%のフォントサイズです
- 80%のフォントサイズです
- 100%のフォントサイズです
- 150%のフォントサイズです