remを使ってフォントサイズを指定してみる

フォントサイズの指定は個人的にはpxか%を使うことが多いのですが、少し前に数人でコーディング作業を行ったときに、初めてremを使いました。
使ってみてちょっと便利そうだったので、使い方などを簡単にメモしておきます。

各フォントサイズ指定の違い

フォントサイズの指定には今回紹介するrem以外にも、pxや%、emなどがあります。

pxはピクセル単位の絶対指定で、親要素の影響を受けません。
%やemは親要素の相対指定で、親要素のサイズによって表示されるサイズが変わります。

以下はpxと%とemそれぞれの指定のサンプルです。
サンプルテキストは上から順に16px、12px、9pxになるようにしています。

HTML

<div id="px">
	<p>px指定</p>
	サンプルテキスト<br />
	<div class="px-inner">
		サンプルテキスト<br />
		<div class="px-text">サンプルテキスト</div>
	</div>
</div>

<div id="persent">
	<p>%指定</p>
	サンプルテキスト<br />
	<div class="persent-inner">
		サンプルテキスト<br />
		<div class="persent-text">サンプルテキスト</div>
	</div>
</div>

<div id="em">
	<p>%指定</p>
	サンプルテキスト<br />
	<div class="em-inner">
		サンプルテキスト<br />
		<div class="em-text">サンプルテキスト</div>
	</div>
</div>

CSS

body {
	font-size: 100%;
}
#px {
	font-size: 16px;
}
.px-inner {
	font-size:12px;
}
.px-text {
	font-size: 9px;
}

#persent {
	font-size: 100%;
}
.persent-inner {
	font-size: 75%;
}
.persent-text {
	font-size: 75%;
}

#em {
	font-size: 1em;
}
.em-inner {
	font-size: 0.75em;
}
.em-text {
	font-size: 0.75em;
}

px・%・emでのフォント指定のデモページ

px指定はサイズをそのまま指定すればよいので楽ですが、IEで文字の拡大ができない問題があります。
逆に%やemの相対指定はIEでも文字の拡大ができますが、親要素の値を継承するので計算が少し大変です。
(ちなみに、相対指定の値の計算はPXtoEM.comというサイトが便利です。)

remはroot + emという意味で、親要素ではなくroot(html)のフォントサイズを継承します。
相対指定なのでIEでの文字が拡大ができて、htmlを起点としたサイズ指定なので%やemよりも計算が行いやすいメリットがあります。
　

対応ブラウザ

remが対応しているブラウザはこちら。
IE9からの対応になるので、IE8以下での対応が別途必要になります。

remの使い方

HTML

<div id="rem">
	<p>rem指定</p>
	サンプルテキスト<br />
	<div class="rem-inner">
		サンプルテキスト<br />
		<div class="rem-text">サンプルテキスト</div>
	</div>
</div>

CSS

html {
	font-size: 62.5%;
}
#rem {
	font-size: 16px;
	font-size: 1.6rem;
}
.rem-inner {
	font-size: 12px;
	font-size: 1.2rem;
}
.rem-text {
	font-size: 9px;
	font-size: 0.9rem;
}

remでのフォント指定のデモページ

計算がしやすいように、基準となるhtmlのフォントサイズは62.5%(10px)にしています。
その上で、bodyにデフォルトとなるフォントサイズをremで指定すると設定がしやすいです。

IE8以下への対応として、remでの指定の前にpxで指定しています。
　

【参考サイト】

• フォントサイズの指定はCSS3の「rem」が便利そう ｜ HTML5 – CSS3 mag