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
その他
css.types.rem

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

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

round() は CSS の関数で、選択した丸め方法に基づいて、丸めた数値を返します。
125
125
118
15.4
125
15.4
CSS タイプ
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() gridsnap

round(), mod(), rem() functions Round() gridsnap demo.

プレビュー全画面表示

Mod check

round, mod, rem functions Mod check demo.

プレビュー全画面表示

Rem calculation

round, mod, rem functions Rem calculation demo.

プレビュー全画面表示

実務での使いどころ

  • グリッドスナップ

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

  • 周期的パターン

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

注意点

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

アクセシビリティ

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

参考リンク