CSSでフォントサイズを指定するemとremの違いを確認します。

「em」は、継承されているフォントサイズを1とする単位です。15pxと継承されていれば、1emは15pxになります。一方、remは、root(html要素)で指定されたフォントサイズを1とする単位です。仮にhtmlで15pxと指定されていた場合、bodyなどで14pxと指定したとしても、1remは15pxになります。

次のサンプルでemとremを比較します。

サンプル(1)と(2)の共通のCSSソース

html {
	font-size:15px;
	}
.text02 div {
	font-size:1.2em;
	}
.text03 div {
	font-size:1.2rem;
	}

サンプル(1)のhtmlソース

  <div><div>(A)サンプルテキスト</div></div>
  <div class="text02"><div>(B)サンプルテキスト</div></div>
  <div class="text03"><div>(C)サンプルテキスト</div></div>

サンプル(1)

(A)サンプルテキスト
(B)サンプルテキスト
(C)サンプルテキスト
(A)のフォントサイズは、htmlで指定され継承された値の15pxになります。
(B)は「font-size:1.2em」を指定しているので、15px*1.2で18pxになります。
(C)は「font-size:1.2rem」を指定しているので、15px*1.2で同じく18pxになります。
このサンプル(1)では、emとremの違いは出ません。

次に入れ子にしてemとremの指定を繰り返します。

サンプル(2)のhtmlソース

/*--em指定の入れ子--*/
<div class="text02">
	<div>(B1)サンプルテキスト
		<div>(B2)サンプルテキスト
			<div>(B3)サンプルテキスト
			</div>
		</div>
	</div>
</div>

/*--rem指定の入れ子--*/
<div class="text03">
	<div>(C1)サンプルテキスト
		<div>(C2)サンプルテキスト
			<div>(C3)サンプルテキスト
			</div>
		</div>
	</div>
</div>

サンプル(2)

(B1)サンプルテキスト
(B2)サンプルテキスト
(B3)サンプルテキスト

(C1)サンプルテキスト
(C2)サンプルテキスト
(C3)サンプルテキスト
em指定、rem指定ともに同じ入れ子にしています。

em指定の(B1)では、15px*1.2で18pxになり、更に(B2)では18px*1.2で21.6pxに、更に(B3)では21.6px*1.2で26.2pxにと、値が大きく継承されながら、1.2倍を繰り返していることが分かります。

一方、rem指定の(C1)、(C2)、(C3)では、入れ子にしても、root(html)で指定した値に対して、1.2倍しているだけなので、すべて18pxになります。

 

戻るボタン