CSSにおけるem単位の紹介

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

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

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

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

div {
	font-size: 20px;
}

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

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

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

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

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

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

実践問題

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

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

以下のコードを実行した結果、liタグのフォントサイズは何pxになるでしょうか：

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

以下のコードを実行した結果、liタグのフォントサイズは何pxになるでしょうか：

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

以下のコードを実行した結果、liタグのフォントサイズは何pxになるでしょうか：

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