CSS Reference

rem()

剰余（余り）を計算する

rem() 関数は CSSで剰余（余り）を計算するための CSS 関数です。

剰余とは、数を割ったときの余りを意味します。例えば、5 を 2 で割ると余り（剰余）が 1 です。つまり、margin: mod(18px, 4px); を計算すると、剰余は 2px となるため、算出される margin の値は 2px となります。

rem() 関数は、JavaScript の剰余演算子（%）と同様の動作を期待する場合に使用することができます。

mod() 関数も同様に剰余を計算しますが、引数の値によって計算値が異なる場合があります。

計算結果は、任意の <number>、<dimension>、または <percentage> 値となりますが、2つの引数は同じデータ型を持たなければならず、そうでない場合、関数は無効となります。また、導き出される値も同じデータ型になります。

mod() 関数と rem() 関数のどちらを選ぶべきか？

通常は mod() 関数を選ぶべきでしょう。多くの場合、B 値は制作者が制御し、A 値が変動するもの思われますが、mod() 関数を使用すれば、A の値が正の値でも負の値でも、結果が 0 と B の間に収まるためです。これは、多くの場合に期待される動作だと思われますし、直感的です。

一方で、JavaScript の剰余演算子（% 演算子）と同様の動作を期待する場合は、rem() 関数を使用することができます。

rem()のサンプルソース

.example01 {
  margin: mod(-18px, 5px); /* 2px と計算される */
}

.example02 {
  margin: rem(-18px, 5px); /* -3px と計算される */
}
.example01 {
  rotate: mod(140deg, -90deg) ; /* -40deg と計算される */
}

.example02 {
  rotate: rem(140deg, -90deg)  ; /* 50deg と計算される */
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome