font-sizeプロパティ

font-sizeプロパティは、フォントのサイズを様々な指定方法で変更できます。

font-sizeに関しての図
指定方法簡易説明
単位付き数値指定した数値でフォントサイズが変わる
%指定した要素親に対しての割合で変わる
smaller要素親に対して1段階サイズが小さくなる
larger要素親に対して1段階サイズが大きくなる
xx-smallx-smallの1/1.2倍サイズ
x-smallsmallの1/1.2倍サイズ
smallmediumの1/1.2倍サイズ
medium標準サイズ
largemediumの1.2倍サイズ
x-largelargeの1.2倍サイズ
xx-largex-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%のフォントサイズです