フォントサイズをremで指定する。（emとの比較）

2014.10.06

こんにちは。mackyです。
CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、スマートフォンやRWDにはとても便利です。

ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。
なるほど、とてもわかりやすいです。そのまえにem（pxも）の継承をおさらい。

px(ピクセル)

ピクセル単位の指定。
環境によって変化しない絶対単位です。

em(エム)

文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。
bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。

まずはpxとemをおさらい pxとemについてのわかりやすい説明はこちら↓ http://www.studiogaki.com/punks/px-and-em/

では、remを使用すると具体的にどんなところが便利なのか実際に比較してみます。

<html>
<body>
<p>台風18号。「Phanfone(ファンフォン)」。</p>
</body>
</html>

/*計算しやすいようhtmlは10pxにしておくと便利です。*/

html{
	font-size: 62.5%;
}
body{
	font-size: 1.5em;
}
p{
	font-size: 1.5em;}

emは親要素のサイズを継承していくのでpは22.5pxになります。10px * 1.5 * 1.5 = 22.5px

html{
	font-size: 62.5%;
}
body{
	font-size: 1.5rem;
}
p{
	font-size: 1.5rem;
}

この場合、ルートからの計算になるのでつまり、10px * 1.5 = 15px

で？という感じですが、例えば下記のような入れ子構造のリストの場合は特に便利ではないかと思います。

<body>

<ul>

<li>横浜台風上陸</li>

<li>

 <ul>

  <li>今日は台風でした。</li>

 </ul>

</li>

</ul>

</body>

body{
	font-size: 62.5%;
}
li{
	font-size: 1.5em;
}

横浜台風上陸は
10px * 1.5 = 15px
今日は台風でしたは
10px * 1.5 * 1.5 = 22.5px
となり上階層のメニューより大きくなります。
こんなときremで指定しておくと、

body{
	font-size: 62.5%;
}
li{
	font-size: 1.5rem;
}

10 * 1.5 = 15pxで、
ともに15pxになり、上階層のメニューのフォントサイズを超えることがなくなりました。

以上です。
これで、あれ？なんでこここんなにフォントが大きくなってるの？？といったミスも冷静に解決できることと思います。
しっかり理解してpx em rem %を使い分けましょう。

この記事を読んだ人にオススメ