CSS mod() 関数

定義と使用方法

CSSの mod() 関数は、一つの数（被除数）を別の数（除数）で割ったときの残りを返します。

例：mod(9, 2) = 1。（9 / 2 = 4；4 * 2 = 8、余数 = 1）

例：mod(9, -2) = 1。（9 / -2 = 4; 4 * -2 = -8、余数 = -1）

説明：9 / -2 = -4.5、しかし切り捨てて -4；-4 * -2 = 8、符号方向のため実際の計算では 9 - 8 = 1、または余数の定義に従って直接 -1 の逆数 1 を得ます。結果の符号は除数と同じです。実際の計算では、modの処理は実装によって異なる可能性がありますが、通常数学的な取余のルールに従い、除数の符号を考慮します。

注意：結果は常に除数の符号を取ります。

例

いくつか mod() 例：

line-height: mod(9, 2); /* 1 */
line-height: mod(19, 4); /* 3 */
line-height: mod(3.5, 3); /* 0.5 */
padding: mod(9%, 2%); /* 1% */
padding: mod(19px, 4px); /* 3px */
padding: mod(19rem, 4rem); /* 3rem */
rotate: mod(120deg, 25deg); /* 20deg */
rotate: mod(120deg, -25deg); /* -20deg */
rotate: mod(-90deg, 15deg); /* 5deg */
rotate: mod(-90deg, -15deg); /* -5deg */

CSS 语法

mod(dividend, divisor)

技術的詳細

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参考：CSS acos() 関数

参考：CSS asin() 関数

参考：CSS atan() 関数

参考：CSS atan2() 関数

参考：CSS calc() 関数

参考：CSS cos() 関数

参考：CSS exp() 関数

参考：CSS hypot() 関数

参考：CSS log() 関数

参考：CSS pow() 関数

参考：CSS sin() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数