remの特徴と仕組み
rem(root em)は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。
html { font-size: 10px; } /* ルート要素にremの基準となるサイズを指定 */
h1 { font-size: 1rem; } /* 10px 相当 */
h2 { font-size: 2rem; } /* 20px 相当(2倍) */
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による倍率は対象値 ÷ 基準値
の式で求めることができます。例えば、基準値となるルート要素のフォントサイズが10
pxの環境で、12
pxのピクセル単位を rem単位に変換したい場合には、12 / 10
の計算で1.2
remを求めることになります。逆に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) |
---|---|---|
10px | 12px | 1.2rem |
10px | 20px | 2.0rem |
10px | 5px | 0.5rem |
14px | 12px | 0.8571428571rem |
16px | 12px | 0.75rem |
87.5%(14px) | 12px | 0.8571428571rem |
62.5%(10px) | 12px | 1.2rem |