【CSS Modules】round()関数の使い方
round()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
round()関数は、CSSにおいて、指定された数値を特定の丸め戦略と基準値に基づいて丸めるための関数です。この関数は、主にCSS Grid LayoutやSubgridのような最新のレイアウトシステムにおいて、グリッドアイテムの位置やサイズを正確なグリッド線に揃える際に非常に有用です。ウェブページの複雑なレイアウトを構築する際、要素が期待通りに配置されるように調整し、一貫性のあるデザインを保つのに役立ちます。
round()関数の基本的な引数は、丸め方を指定するオプションの<rounding-strategy>、丸めたい対象の数値である<value>、そして丸める基準となる<step>（ステップ値）です。<rounding-strategy>が省略された場合、デフォルトでnearestが適用されます。<value>には、長さ、角度、時間など様々なCSS値を使用でき、<step>は、数値を丸める際の最小単位を定義します。
具体的な丸め戦略としては、nearestは対象の数値に最も近いステップ値に丸めます。upは数値を正の無限大方向、すなわちより大きい方のステップ値に丸めます。downは数値を負の無限大方向、すなわちより小さい方のステップ値に丸めます。そしてto-zeroは、数値を0に近い方のステップ値に丸めます。これらの戦略により、開発者はレイアウト要件に合わせて数値を柔軟に制御できます。
この関数は、計算された値が常に指定されたステップに沿うように調整することで、特にグリッドベースのレイアウトにおいて、デザインの一貫性を確保し、予期せぬレイアウトのずれを防ぐのに貢献します。最終的に、丸められた数値が返されます。
構文(syntax)
1.element { 2 width: round(nearest, 10.5px); 3}
引数(parameters)
rounding-strategy: nearest | up | down | to-zero = nearest, value: <number> | <dimension>
- rounding-strategy: <keyword>: 丸め戦略を指定します。以下のいずれかのキーワードを指定できます:
nearest: 最も近い整数に丸めます。up: 切り上げます。down: 切り捨てます。to-zero: ゼロに向かって丸めます。 デフォルトはnearestです。
- value: <number> | <dimension>: 丸める数値を指定します。単位付きのディメンション（例:
10px）または単位なしの数値（例:10）を指定できます。
戻り値(return)
<number> または <dimension>
round() 関数は、指定された数値を最も近い整数、または指定された精度で丸めた数値を返します。結果は、単なる数値 (<number>) または単位を持つ寸法 (<dimension>) として返されます。