HOME > Web制作LAB > CSS > pxでもemでもないrem（ルートエム）でフォントサイズを指定する方法

pxでもemでもないrem（ルートエム）でフォントサイズを指定する方法

css3から設定できるrem（ルートエム）とは

css3から設定できる様になった新しいフォントサイズ設定の単位rem（ルートエム）。
rem？emと同じ様な感じなのでしょうか。いいえ、違います。
emやpxで設定した場合は、「親要素」によってフォントサイズが決められてしまいます。
「親」がフォントサイズ」15pxなら、「子」に10pxと設定しても子はその通りにはならないと思います。
remの場合はroot（元）だけのフォントサイズに決められますので、親要素にフォントサイズを設定してもremには何の影響もありません。
それがemやpxとは違う所です。
元々存在していたpxやemのサイズ設定のおさらいも含めて説明を書いていきます。

フォントサイズの基本設定は16px

フォントサイズの指定を何もしていない時のフォントサイズは16pxで表示されます。
1em＝16px
1rem＝16px
何も設定していなければ、1emも1remもみんな16px表示となります。

ただし、htmlやbodyにフォントサイズを設定した場合、pxやemはフォントサイズは変わっていきます。
以下がフォントサイズの計算式になります。

emの計算式

htmlのフォントサイズ × bodyのフォントサイズ × 対象のフォントサイズ＝表示pxサイズ

この場合htmlにもbodyにもフォントサイズが指定されていない場合（※もしくはfont-size:100%;で指定している場合）は対象（※pなど）のフォントサイズだけとなりますので、対象にフォントサイズを指定すると思った通りになります。
しかし、htmlに100%(100%の場合は16px)、bodyに1.6em、対象に1.6emを設定したとすると計算は以下になります。

16px（html） × 1.6em（body） × 1.6em（対象）＝ 40.96px

emは親要素を継承してしまう為、実際のサイズは40.96pxになってしまいます。

remの計算式

htmlのフォントサイズ × 対象のフォントサイズ＝表示pxサイズ

この場合htmlにフォントサイズが指定されていない場合（※もしくはfont-size:100%;で指定している場合）は対象（※pなど）のフォントサイズだけとなりますので、対象にフォントサイズを指定すると思った通りになります。
しかし、htmlに100%(100%の場合は16px)、対象に1.6emを設定したとすると計算は以下になります。

16px（html） × 1.6em（対象）＝ 25.6px

remはrootを継承する為、実際のサイズは25.6pxになります。
親要素を継承するemとは違ってきますね。

でも「結局フォントサイズが大きくなってしまってる」という方もいらっしゃると思います。
下記にhtmlのフォントサイズを計算しやすく「10px（※62.5%は10pxの事）」で設定したサンプルを用意してあります。

remで設定したサンプル

em、px、remで設定したサンプルが以下よりご覧いただけます。

remを設定したサンプルはこちら

html


<div class="box b01">
　<h2>emの場合</h2>
　<div class="inner">
　　<p>こんな感じ<br>
　　pに対しfont-size: 1em;</p>
　</div>
</div>

<div class="box b02">
　<h2>pxの場合</h2>
　<div class="inner">
　　<p>こんな感じ<br>
　　pに対しfont-size: 16px;</p>
　</div>
</div>

<div class="box b03">
　<h2>remの場合</h2>
　<div class="inner">
　　<p>こんな感じ<br>
　　pに対しfont-size: 1rem;</p>
　</div>
</div>

CSS


html{
　font-size: 62.5%;　//10px
}

body{
　font-size: 1.6em;	
}

.b01 p{
　font-size: 1.6em;
}

.b02 p{
　font-size: 16px;
}

.b03 p{
　font-size: 1.6rem;
}

サンプルを見比べてみると、emはかなり大きいですね。
pxに変換すると、
emは「62.5%（html ※10px） × 1.6em(body) × 1.6em(p) ＝ 25.6px」
pxは16pxのまま、
remは「62.5%（html ※10px） × 1.6rem(p) ＝ 16px」
となりました。