More than 5 years have passed since last update.

CSSの基本単位としてremを使うと超絶便利

Last updated at 2018-08-01Posted at 2016-02-19

皆さんはremという単位を聞いたことがあるでしょうか？
知っている方は「フォントサイズ指定が%とかemとかよりすっきりしたやつ」という印象を持たれているのではないでしょうか。
「remはフォントサイズだけのものではない」という事実を知ると、実はかなり便利な単位だったりします。

詳細についてはこちらのページにも解説・デモがあります。

remとは

rem
ルート要素の font-size (例えば、html 要素の font-size) です。ルート要素で使うと初期値を表します。

とあります。

html {
  font-size: 15px;
}

p {
  font-size: 1.2rem;
}

strong {
  font-size: 1.4rem;
}

p要素には18px、strong要素には21pxのフォントサイズが適用されます。
emや%だと<p>の中に<strong>があったときのように2重掛けが起こってしまうので、そのような煩雑なサイズの継承から逃れられます。

なお、上述の記事には

この単位は完全に拡縮可能なレイアウトを作るのに役立ちます。対象ブラウザのサポートがない場合には em 単位を使って同様のレイアウトを実現可能ですが、やや複雑になります。

とも書かれているので、本稿で述べている使用方法も想定内なのかもしれません。

まずは、ズームコントロールの簡単な比較デモを用意しました。
http://jsdo.it/butchi/remhack

CSSを利用した既存の手法としてzoomとtransformと比較しましたが、それぞれ

という大きな弱点があるので、remを使うことによりこれらの問題は解消されます。

ただし、後述のChromeの制約により、文字を含むコンテンツの縮小には限界があるという欠点があります。

なお、emとの併用でローカルなズームコントロールも可能となるハックが公開されていますので、このような使い方をすればより柔軟なレイアウトを作れると思われます。
Font Size Idea: px at the Root, rem for Components, em for Text Elements | CSS-Tricks（英語）

transformでまるごと半分にする強引な方法もありますが、
SNSボタン、ウィジェット、その他iframeまで縮小されてしまう問題があります。
本ハックでは可変のものはrem、不変のものはpxと使い分けることができるのも強力なポイントです。

Google Chromeでは「最小フォントサイズ」というものが存在するので、中途半端なサイズまでしか縮小できません。なので、

html {
  font-size: 1px;
}
p {
  margin-top: 30rem;
}

のようにするとレイアウト崩れするので

html {
  font-size: 10px;
}
p {
  margin-top: 3rem;
}

のように、10px〜20pxぐらいの値を入れるのが丁度よいかと思われます。
（逆に、筆者がこの手法を発見したのも、Apple公式サイトがremのせいでレイアウト崩れが起こってたからでした。）

remは比較的最近導入されたCSS3の単位で、IE9から対応しています。
ただし、IE10以下では一部バグあり（恐らく擬似要素のみ）とのことなので、あまりに気軽に使うと泥沼にハマる可能性があります。ご注意ください。

312