Newly available 条件付きOK。Chrome 125+・Safari 17.2+・Firefox 118+で利用可能。

round(), mod(), rem() functions

mod() は CSS の関数で、最初の引数を 2 つ目の引数で割ったときのモジュラスを返します。これは、JavaScript の剰余演算子 (%) と似ています。モジュラスは、1 つのオペランド（被除数）を 2 つ目のオペランド（除数）で割ったときに残る値です。常に除数の符号を取ります。

計算は a - (Math.floor(a / b) * b) です。例えば、CSS の関数 mod(21, -4) は、余りの -3 を返します。完全な計算は 21 - (Math.floor(21 / -4) * -4) です。21 を -4 で割ると、結果は -5.25 になります。これは -6 に切り捨てられます。-6 に -4 を掛けると 24 になります。この 24 を元の 21 から引くと、余りは -3 になります。

関数数学

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
mod
125
125
118
15.4
125
15.4
mixed type parameters

`<percentage>` と `<length>` および `<number>` パラメータを組み合わせます
125
125
118
17.2
125
17.2
rem

rem() は CSS の関数で、最初の引数を 2 つ目の引数で割ったときの剰余を返します。これは、JavaScript の剰余演算子 (%) と似ています。剰余は、1 つのオペランド（被除数）を 2 つ目のオペランド（除数）で割ったときに残る値です。常に被除数の符号を取ります。
125
125
118
15.4
125
15.4
mixed type parameters

`<percentage>` と `<length>` および `<number>` パラメータを組み合わせます
125
125
118
17.2
125
17.2
round

round() は CSS の関数で、選択した丸め方法に基づいて、丸めた数値を返します。
125
125
118
15.4
125
15.4
mixed type parameters

`<percentage>` と `<length>` および `<number>` パラメータを組み合わせます
125
125
118
17.2
125
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.grid-snap {
  /* Snap to an 8px grid */
  width: round(var(--dynamic-width), 8px);
}

.alternating {
  /* Check if the element index is even or odd */
  --is-even: mod(var(--index), 2);
}

.cycle {
  /* Loop through 5 colors */
  --color-index: mod(var(--index), 5);
}

ライブデモ

round() グリッドスナップ

round(), mod(), rem() functions の round() グリッドスナップ パターンです。

プレビュー全画面表示

mod() 偶奇判定

round(), mod(), rem() functions の mod() 偶奇判定 パターンです。

プレビュー全画面表示

rem() 余り計算

round(), mod(), rem() functions の rem() 余り計算 パターンです。

プレビュー全画面表示

実務での使いどころ

  • グリッドスナップ

    round() で動的に計算されたサイズを基準グリッドに合わせて整列する。

  • 周期的パターン

    mod() でインデックスの剰余を取り、色やスタイルの周期的な切り替えを行う。

注意点

  • mod() と rem() は符号の扱いが異なる。数学的な mod が必要な場合は mod()、プログラミング言語的な剰余は rem() を使用。

アクセシビリティ

  • round() で丸められた値によりテキストが切れたり、操作領域が小さくなりすぎたりしないよう注意する。

参考リンク