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

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」
となりました。

remは基準となるフォントサイズをhtmlに設置する事で管理もしやすくなる

サンプルで見た通り、remは親の影響を受けないので管理がしやすいと思います。
基本となるフォントサイズをhtmlに設定しておけば、バラつきも少なく設定し易くなるのではないかと思います。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2016.01.13