[HTML & CSS General] いま rem (root em) units を使うべきその理由と使い方

公開日: 2016/04/26
更新日: 2018/10/15

ちょっと調べたのでまとめておく。

[markdown]
## 現在の状況

[Internet Explorer のサポートポリシー](https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/)にあわせてもらえる案件では、IE9+ 以上対応となったので [rem (root em) units](http://caniuse.com/#feat=rem) が利用できる。
なお、このサイトのアクセスログでは IE11 未満は 1% を切っている。
2016 年に制作するサイトは IE11+ にしていただきたいところ。

### rem (root em) units

IE9+ で利用できる。
ただし IE9/10 では [font shorthand property](https://css-tricks.com/almanac/properties/f/font/) 内、および擬似要素内で利用できないとのこと。

> * [font-size – CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=rem)

`rem` は、<html> の `font-size` を基準とする値。

## rem に至るまでの歴史的経緯

– px … IE8 以下で文字サイズを変更できない問題。
– em … 入れ子で複利計算問題。
– rem … IE8 以下にも px の fall-back で対応。

“`css
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
“`

> * [[CSS]フォントのサイズ指定はpx？ em？既存の再検討とこれからのテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/font-size-with-rem-by-snook-ca.html)
> * [あなたはどれにする？CSSの文字サイズ指定「px、em、%」 | デザインメモ](http://blog.karasuneko.com/html-css/font-size-px-em-percent/)

## レスポンシブにも対応したフォントサイズの指定方法

IE8 以下の対応が外れたので、rem のみでさらに扱いやすくなった。

“`css
html { font-size: 62.5%; }
body { font-size: 1.6rem; }
“`

### 文字サイズのディフォルト値

`html { font-size: 62.5%; }` で 10px 相当として扱えるようになるのは、ブラウザのディフォルト文字サイズが以下となっているため。

“`css
100% = 1em = 1rem = 16px = 12pt
“`

root である html の値を変更することによって、すべてのサイズを変更できる。

“`css
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
“`

> * [[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説 | コリス](http://coliss.com/articles/build-websites/operation/css/css-font-sizing-by-ire.html)

例えば `body { font-size: 16rem; }` で `16px` とした文字サイズを、別のブレークポイントで `20px` にしたい場合、`html { font-size: 78.125%; }` を指定する。

“`prettyprinted
20 / 1.6 * 6.25 = 78.125%
“`

### <html> に font-size を px 指定しない

pixel 値は、ユーザーのブラウザ設定で上書きされてしまうから。

> * [REM vs EM – The Great Debate | Zell Liew’s blog about web design and development](http://zellwk.com/blog/rem-vs-em/?utm_source=Frontend+Weekly&utm_campaign=6de0b1561c-Frontend_Weekly_Vol_603_9_2016&utm_medium=email&utm_term=0_9af01549dd-6de0b1561c-376751669)

## font-size 以外を rem 指定すべきか

`rem` と `em` で長所・短所がそれぞれあるとのこと。

> * [REM vs EM – The Great Debate | Zell Liew’s blog about web design and development](http://zellwk.com/blog/rem-vs-em/)
> * [Everything I know about Responsive Web Typography | Zell Liew’s blog about web design and development](http://zellwk.com/blog/responsive-typography/)

個人的には `rem` 指定で統一すると、ソースの見通しと設定が分かりやすく管理しやすいと感じている。
要研究。

## 補遺

> * [CSS: Responsive Typesetting | deadwood](https://www.d-wood.com/blog/2016/01/13_7749.html)

文字サイズの指定にビューポートの単位を使う例。

> * [[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/font-size-used-responsive-scales.html)

rem の基準となる値を font-size ではなく line-height とした例。

> * [remの基準となる値を行の高さにする | yoshihiko com-blog](http://yoshihiko.com/Blog/20160318-5055.html)
[/markdown]