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