CARVIEW |
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
mod()
Baseline
2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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 になります。
構文
/* 単位なしの <number> */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */
/* <percentage> や <dimension> に基づく単位 */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - ルートの font-size が 16px の場合 */
/* 負の値・正の値 */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */
/* 計算 */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */
引数
関数 mod(dividend, divisor)
は、カンマで区切られた 2 つの値を引数として受け入れます。関数が有効であるためには、両方の引数は同じ型、数値、サイズ、<percentage>
のいずれかである必要があります。2 つの引数の単位は同じである必要はありませんが、<length>
、<angle>
、<time>
、<frequency>
などの同じサイズの型である必要があります。
dividend
-
被除数を表す
<number>
、<dimension>
、<percentage>
に解決される計算式。 divisor
-
除数として表される
<number>
、<dimension>
、<percentage>
に解決される計算式。
返値
モジュラス、つまり余りの演算を、<number>
、<dimension>
、<percentage>
(引数の型に応じて)で表して返します。
divisor
が0
の場合、結果はNaN
です。dividend
がinfinite
の場合、結果はNaN
です。divisor
が正の値の場合、結果は正の値 (0⁺
) となり、divisor
が負の値の場合、結果は負の値 (0⁻
) となります。
形式文法
<mod()> =
mod( <calc-sum> , <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
仕様書
Specification |
---|
CSS Values and Units Module Level 4> # funcdef-mod> |
ブラウザーの互換性
Loading…