CSS3のremについてのまとめ

CSS3のremについてまとめてみる。

remとは？

font-sizeプロパティの値の単位に使用されるのが多いのはpxやemですが、CSS3から新しくremという単位が新しく追加された。「root + em」の略。

emとの違いは？

emは親要素を1とした倍率を指定するが、remはルート要素（HTML文書ならhtml要素）のfont-sizeを1とした倍率を指定する。

index.html

<div class="parent">
    親要素の文
  <div class="child">
　　子要素の文
  </div>
</div>

上記のhtmlのfont-sizeをemで指定した場合。

style.css

html {
  font-size: 10px;
}
.parent {
  font-size: 1.2em;  /*10px(html)*1.2 = 12px*/
}
.child {
  font-size: 1.2em;  /*12px(.parent)*1.2 = 14.4px*/
}

emで指定した場合、それぞれの親要素を基準とするため、指定の仕方がやや複雑になる。

一方remで指定した場合は下記

style.css

html {
  font-size: 10px;
}
.parent {
  font-size: 1.2rem;  /*10px(html)*1.2 = 12px*/
}
.child {
  font-size: 1.2rem;  /*10px(html)*1.2 = 12px*/
}

となる。
親要素のfont-sizeプロパティの値を意識せず、常にhtml要素を基準に倍率を指定すればいいため管理がemに比べて楽。

remを使用する場合のポイント

remを使用する際、html要素のfont-sizeは%指定されることが一般的らしい。なぜかと言うと、px指定ではなく％指定にしておくことで、ユーザーがブラウザの設定でデフォルトの文字サイズを変更していた場合にもある程度その設定を反映することができる。
主要なブラウザのデフォルトフォントサイズは16pxなので、62.5%を指定して10px相当にします。そうするとremで指定するときに楽になる。

style.css

html {
  font-size: 62.5%;  /*デフォルトが16pxなので　16px × 62.5% = 10px*/
}
.parent {
  font-size: 12rem;  /*htmlが62.5%の10pxなので　10px × 1.2 = 12pxとなる*/
 }