CSS - mod(), rem()

• トップ
• CSSリファレンス
• mod(), rem()

概要

説明

dividend を divisor で割った余りを返します。数値、長さ(pxなど)、時間(msなど)、周波数(Hzなど)、解像度(dpiなど)、角度(degなど)、パーセンテージ(%) を指定できます。

mod() も rem() も除算の余りを返しますが、dividend や divisor に負数を指定した時の動作が異なります。mod() の結果は必ず divisor と同じ符号になります。rem() の結果は必ず dividend と同じ符号になります。

使用例

z-index の値は赤い太字部分の値になります。

.box1 { z-index: mod(22, 3) } /* 22 = 3 * 7 + 1 */
.box2 { z-index: mod(22, -3) } /* 22 = -3 * -8 - 2 */
.box3 { z-index: mod(-22, 3) } /* -22 = 3 * -8 + 2 */
.box4 { z-index: mod(-22, -3) } /* -22 = -3 * 7 - 1 */
.box5 { z-index: rem(22, 3) } /* 22 = 3 * 7 + 1 */
.box6 { z-index: rem(22, -3) } /* 22 = -3 * -7 + 1 */
.box7 { z-index: rem(-22, 3) } /* -22 = 3 * -7 - 1 */
.box8 { z-index: rem(-22, -3) } /* -22 = -3 * 7 - 1 */

関連項目

リンク

• https://developer.mozilla.org/en-US/docs/Web/CSS/mod
• https://drafts.csswg.org/css-values/#funcdef-mod