このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

round()”関数CSS Values and Units Module Level 4 で追加

記事Jul.5th,2021
引数を指定した倍数の値に丸めるCSSの関数、“round()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

round()”関数

round()”関数は引数を指定された倍数の値に丸めた値を返す関数です。

round()”関数は以下の値が使用できる場所で使用できます。

round()”関数の構文

引数は丸める方法、丸める値、丸め幅の順に3個の数式をコンマ(“,”)で区切って記述します。

round(〚丸める方法〛,〚丸める値〛,〚丸め幅〛)

2個目の引数の値は3個目の引数で指定された丸め幅の整数倍の値に丸められます。

引数には数学関数(clamp()”関数max()”関数など)や数式が使用できます。引数は<number>”値<dimension>”値<percentage>”値のいずれでも良いですが、2個の引数は同じ型でなければなりません。

丸める方法(“<rounding-strategy>”)は以下の4方法です。この引数は省略可能で、省略された場合は“nearest”として扱われます。

引数 説明
nearest 丸め幅の整数倍の値の最も近いものに丸める (値は常に丸め幅の整数倍である2つの値の間にありますが、2つの値のうち小さい方に近ければ切り捨て、大きい方に近ければ切り上げます。2つの値のちょうど中間である場合にも切り上げられます。)
up 丸め幅の整数倍の値に切り上げる
down 丸め幅の整数倍の値に切り捨てる
to-zero 丸め幅の整数倍の値のうち“0”により近いものに丸める (値は常に丸め幅の整数倍である2つの値の間にありますが、2つの値がどちらも正の数であれば切り捨て、どちらも負の数であれば切り上げます。2つの値のうち一方が正の数でもう一方が負の数であればそれらのうち“0”に近い方に丸めます。)

値が“0”に丸められた場合、切り捨てたときは“0+”、切り上げたときは“0-”になります。

丸め幅を“0”にした場合、もしくは丸める値と丸め幅が無限(“∞”もしくは“-∞”)である場合、“round()”関数が返す値は“NaN”です。

丸める値が有限数(無限でない)で丸め幅が無限である場合、丸める方法(“<rounding-strategy>”)によって“round()”関数が返す値は異なります。

nearest”、もしくは“to-zero”である場合
丸める値が正の数か“0+”である場合、返す値は“0+”です。それ以外の場合、返す値は“0-”です。
up”である場合
丸める値が正の数(“0”は含まない)である場合、返す値は“+∞”、丸める値が“0+”である場合、返す値は“0+”です。それ以外の場合、返す値は“0-”です。
down”である場合
丸める値が負の数(“0”は含まない)である場合、返す値は“-∞”、丸める値が“0-”である場合、返す値は“0+”です。それ以外の場合、返す値は“0-”です。

使用例

50%”を四捨五入する
round(50%,1)

50%”の端数を切り捨てる
round(to-zero,50%,1)

50%”を偶数に丸める
round(50%,2)

50%”を奇数に丸める
calc(round(50%,2) - 1)

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
round()
定義なし

定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク