CSSにおけるem単位の紹介

単位emを使用すると、親要素のサイズに対するパーセンテージでフォントサイズを指定できます。例を見てみましょう。

以下のようなネストされたタグがあるとします：

html<div>
  <p>
    text
  </p>
</div>

div要素にフォントサイズを設定してみましょう：

cssdiv {
  font-size: 20px;
}

次に、p要素に2emのサイズを設定します。この値は、親要素のフォントサイズの2倍に対応します：

cssp {
  font-size: 2em; /* 40pxに対応 */
}

今度は、p要素に0.5emのサイズを設定してみます。この値は、親要素のフォントサイズの半分に対応します：

cssp {
  font-size: 0.5em; /* 10pxに対応 */
}

1emという値は、p要素のフォントを親のdiv要素と同じサイズにします：

cssp {
  font-size: 1em; /* 20pxに対応 */
}

実践問題

以下のHTMLコードに対して問題を解いてみましょう：

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  font-size: 10px;
}
li {
  font-size: 2em;
}

cssul {
  font-size: 20px;
}
li {
  font-size: 1.5em;
}

cssul {
  font-size: 30px;
}
li {
  font-size: 0.5em;
}