rem
remは「root em」の略で、ルート要素（通常<html>）のフォントサイズを1remとするCSS長さ単位です。多くのブラウザでデフォルトのフォントサイズは16pxなので、1remは16pxに相当します。em単位と異なりネスト時のカスケードの影響を受けないため、一貫性のあるサイズ指定が可能で、モダンCSSにおけるサイズ指定の標準的な単位です。
概要
remは「root em」の略で、ルート要素（通常<html>）のフォントサイズを1remとするCSS長さ単位です。多くのブラウザでデフォルトのフォントサイズは16pxなので、1remは16pxに相当します。em単位と異なりネスト時のカスケードの影響を受けないため、一貫性のあるサイズ指定が可能で、モダンCSSにおけるサイズ指定の標準的な単位です。
対応ブラウザ
デスクトップ
Chrome 4+
Edge 12+
Safari 5+
Firefox 3.6+
モバイル
Chrome Android 18+
Safari iOS 4+
Firefox Android 4+
基本構文
CSS
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 32px */
}
.card {
padding: 1.5rem; /* 24px */
}実務での使いどころ
-
一貫性のあるスケーラブルなサイズ指定
ルートフォントサイズを基準にした統一的なサイズ指定で、ユーザーのフォントサイズ設定を尊重したデザインを構築します。
注意点
- ルート要素のfont-sizeを固定pxで設定すると、ユーザーのブラウザ設定が無視されるため、%指定を検討してください。
アクセシビリティ
- rem単位はユーザーのフォントサイズ設定に追従するため、固定pxよりもアクセシビリティに優れたサイズ指定方法です。