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で設定したサンプルが以下よりご覧いただけます。
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」
となりました。
remは基準となるフォントサイズをhtmlに設置する事で管理もしやすくなる
サンプルで見た通り、remは親の影響を受けないので管理がしやすいと思います。
基本となるフォントサイズをhtmlに設定しておけば、バラつきも少なく設定し易くなるのではないかと思います。