sign()
Baseline
2025
最近利用可能
June 2025以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
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)));
}
仕様書
| 仕様書 |
|---|
| CSS Values and Units Module Level 4 # sign-funcs |