CSSで使う単位

html
quarto
Author

Ryo Nakagami

Published

2025-04-30

CSSで使用する単位一覧

▶  相対単位

px モニターの画素(ピクセル)を1とする単位
% %で割合を指定
em 親要素の大文字Mのフォントサイズを1とする単位
ex 親要素の小文字xフォントサイズを1とする単位
rem ルート要素の大文字のフォントサイズを1とする単位

▶  絶対単位

pt 1/72インチを1とする単位
pc 12ptを1とする単位
mm ミリメートル基準
cm センチメートル基準
in インチを1とする単位

▶  emの使いどころ

ユーザー環境によってフォントのサイズが変わってしまうWebデザインにおいて，

といったその時々のフォントサイズに応じたサイズ指定を試みたい場合に，親要素の文字の大きさを単位とするemが役に立ちます．

Meiryo↕inline-height 1em


emとremの違い

emもremも相対単位となりますが，remは常に最上位のルート要素のフォントサイズを規準に計算されるという特徴があります．活用例として，remは要素が入れ子になるような場合に，意図せずサイズが変更されるようなリスクを低減することができます．

<style>
  html {
    font-size: 16px; /* 1rem = 16px */
  }

  li.em-example {
    font-size: 1.5em; /* 1.5 × 20px = 30px */
    color: steelblue;
  }

  li.rem-example {
    font-size: 1.5rem; /* 1.5 × 16px = 24px */
    color: darkorange;
  }
</style>

<ul>
    <li class="em-example">This text uses <code>1.5em</code> font size</li>
    <li class="em-example">This text uses <code>1.5em</code> font size
        <ul>
            <li class="em-example">This text uses <code>1.5em</code> (relative to <code>&lt;ul&gt;</code> font size)</li>
    </li>
</ul>


<ul>
    <li class="rem-example">This text uses <code>1.5rem</code> font size</li>
    <li class="rem-example">This text uses <code>1.5rem</code> font size
        <ul>
            <li class="rem-example">This text uses <code>1.5rem</code> (relative to <code>&lt;ul&gt;</code> font size)</li>
        </ul>
    </li>
</ul>

▶  emの挙動

  • This text uses 1.5em font size
  • This text uses 1.5em font size
    • This text uses 1.5em (relative to <ul> font size)

▶  remの挙動

  • This text uses 1.5rem font size
  • This text uses 1.5rem font size
    • This text uses 1.5rem (relative to <ul> font size)
key takeaways
  • emでは入れ子構造となってる<li>セクションについて，直前のフォントサイズ 1.5emにたいして更に 1.5em でフォントサイズを計算している
  • remでは入れ子構造となってる<li>セクションでも，ルート要素フォントサイズ16pxを参照して, 1.5remを計算している