【CSS】rem 単位とは｜仕組みや計算方法【rem（root em）】

remの特徴と仕組み

rem（root em）は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。

html { font-size: 10px; } /* ルート要素にremの基準となるサイズを指定 */
h1 { font-size: 1rem; }   /* 10px 相当 */
h2 { font-size: 2rem; }   /* 20px 相当（２倍） */
h3 { font-size: 0.5rem; } /*  5px 相当（半分） */

このようにremの単位は、ルート要素（html要素）に指定されたフォントサイズに対する倍率として指定します。ルート要素のフォントサイズが10pxの状態で2remが指定された場合には、2倍の20pxが定まる事になります。

目次

remの利点

remは従来の em単位とよく似ていますが、emが親要素のサイズを基準にするのに対し、remはルート要素のサイズを基準にする点が異なります。em の利用には、要素の入れ子関係やサイズの継承関係に起因する複雑さの問題がありましたが、rem ではその複雑さや煩わしさを解消することができます。

emや%と同様にremは相対的なサイズを指定できるため、ルート要素のサイズ変更やブラウザ上のフォントサイズ変更が即座にremを指定した全要素に反映されるという利点が得られます。この特性はレスポンシブデザインやウェブアクセシビリティにも適しているため、近年では rem を用いたWebデザインが注目されています。

remのサポート状況

rem は CSS 3 で新たに追加された単位です。現代の一般的なWebブラウザやスマートフォンでは問題なく利用できることがほとんどですが、一部の古いブラウザ、とりわけ IE 8 以前のバージョンではサポートされておらず、また IE 11 未満のバージョンでは一部不具合があるため、利用には注意が必要です。

rem未サポートブラウザへの対処

rem が使えない環境を考慮する場合には、ピクセル単位（px）の指定を事前に行っておく必要があります。ブラウザ側で rem が使えない場合には、事前に指定された px が優先的に使われるようになります。

html { font-size: 10px; }
p {
  font-size: 12px; /* remが未サポートの場合はこちらが使われる */
  font-size: 1.2rem;
}

この技法はピクセル・フォールバック（pixel fallback）と呼ばれることもあります。今では比較的珍しい IE 8 以前のブラウザや CSS 3 未対応のブラウザをサポートする際に有効なテクニックとなります。

remの基準値について

ルート要素に対する基準値の設定は、スタイルシート上で「html { font-size: 14px; }」といった形で行います。指定を行わなかった場合には、ブラウザ上の一般的なデフォルトのフォントサイズである16pxが基準値となりますが、ユーザがブラウザの設定を変えている場合には不定な値が使われることになります。

なお rem の基準値はパーセンテージ（%）で指定されることが多い傾向にあります（例：html { font-size: 87.5%; }）。これにはブラウザ上で設定されたデフォルトのフォントサイズやユーザ指定のサイズ、モバイル環境等の様々な環境での表示サイズを考慮する意図があります。

remのレイアウトでの利用

rem は相対的なフォントサイズ（font-size）を指定する用途以外にも、要素の行間（line-height）やマージン（margin）、パディング（padding）を相対的に指定する用途にも利用できます。これによってブラウザ側でフォントが拡大された場合には、ヘッダーやサイドバー等のレイアウトも相対的に拡大されるような挙動を実現することができます。

要するに、フォント拡大時にはフォントだけが大きくなるのではなく、レイアウトも比例して大きくなるような動きが実現できるわけです。当ページのレイアウトにもremが使われています。以下のプルダウンメニューで本ページのルート要素のサイズを変更できるようにしてみました。フォントの拡大／縮小に合わせてレイアウトも拡大／縮小されることが確認できるはずです。

また rem が指定されていない画像タグやアマゾン広告については、拡大・縮小されず固定のサイズになっていることも確認できるはずです。

remの計算方法

remによる倍率は対象値 ÷ 基準値の式で求めることができます。例えば、基準値となるルート要素のフォントサイズが10pxの環境で、12pxのピクセル単位を rem単位に変換したい場合には、12 / 10の計算で1.2remを求めることになります。逆にremからpxに変換する場合には対象値 × 基準値の式で乗算します。

html { font-size: 10px; }
h1 { font-size: 1.2rem; } /* 12px相当（12 / 10 == 1.2） */

/* px → rem の変換 */
12px / 10px == 1.2rem

/* rem → px の変換 */
1.2rem * 10px == 12px
基準値対象値（px）換算値（rem）
10px12px1.2rem
10px20px2.0rem
10px5px0.5rem
14px12px0.8571428571rem
16px12px0.75rem
87.5%（14px）12px0.8571428571rem
62.5%（10px）12px1.2rem
広告