sign()
Baseline
2025
Newly available
Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
sign() は CSS の関数で、 1 つの計算式を指定し、引数の数値が負の場合は -1、 引数の数値が正の値の場合は +1、引数の数値が 0⁺ の場合は 0⁺、引数の数値が 0⁻ の場合は 0⁻ を返します。
メモ:
abs() は引数の絶対値を返しますが、 sign() は引数の符号を返します。
構文
css
/* プロパティ: sign( 式 ) */
top: sign(20vh - 100px);
引数
sign(x) 関数は、引数として 1 つの値のみを取ります。
x-
数値に解決される計算式。
返値
A の符号を表す数値です。
xが正の数であれば、1を返します。xが負の数であれば、-1を返します。xが正のゼロであれば、0を返します。xが負のゼロであれば、-0を返します。- それ以外の場合は
NaNを返します。
形式文法
<sign()> =
sign( <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
例
背景画像の位置
例えば、 background-position では、背景画像が背景領域よりも大きい場合、正のパーセント値は負の長さに、負のパーセント値は正の長さに変換されます。したがって、 sign(10%) は、パーセント値の変換方法に応じて 1 または -1 を返すことになります。（長さが 0 の場合、0 を返すこともあります。）
css
div {
background-position: sign(10%);
}
位置指定方向
もう 1 つの用途は、要素の position を制御することです。値は正または負のいずれかです。
css
div {
position: absolute;
top: calc(100px * sign(var(--value)));
}
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # sign-funcs |
ブラウザーの互換性
Loading…