CSS - round()
概要
| 形式 | round(<rounding-strategy>, value, interval?) |
|---|---|
| 値の詳細 | <rounding-strategy> = nearest | up | down | to-zero |
| サポート | https://caniuse.com/mdn-css_types_round |
説明
value の interval の整数倍に四捨五入、切り上げ、切り捨てします。
- <rounding-strategy>
- 下記のいずれかを指定します。
- nearest (デフォルト)
- 四捨五入します。JavaScript の Math.round() と同じ計算を行います。
- up
- 切り上げます。負数の場合はより正の方向に切り上げます。JavaScript の Math.ceil() と同じ計算を行います。
- down
- 切り捨てます。負数の場合はより負の方向に切り捨てます。JavaScript の Math.floor() と同じ計算を行います。
- to-zero
- 0 に近い方向に丸めます。正数の場合は負の方向に切り捨て、負数の場合は正の方向に切り上げます。JavaScript の Math.trunc() と同じ計算を行います。
- value
- 四捨五入、切り上げ、切り捨て対象を指定します。数値、長さ(pxなど)、時間(msなど)、周波数(Hzなど)、解像度(dpiなど)、角度(degなど)、パーセンテージ(%) を指定できます。
- interval
- 丸め単位を指定します。丸め単位の整数倍の値となるように四捨五入、切り上げ、切り捨てされます。省略時は 1 とみなされます。value が数値以外の場合に省略すると、単位付きの値と単位無しの 1 の演算となってしまいエラーとなるようです。
使用例
下記の例では画面の横幅を 100px の倍数になるように切り捨てます。
CSS
.box {
width: round(down, 100vw, 100px);
}
関連項目
mod(), rem()リンク
- https://developer.mozilla.org/en-US/docs/Web/CSS/round
- https://drafts.csswg.org/css-values/#funcdef-round
Copyright (C) 2024 杜甫々
初版：2024年12月29日、最終更新：2024年12月29日
http://www.tohoho-web.com/css/func/round.htm