Back

CSSにおける絶対値の取得 - abs()関数

OpenReplay Team OpenReplay Team

Feb 27, 2026 · 3 min read

CSSにおける絶対値の取得 - abs()関数

CSSカスタムプロパティがコンテキストに応じて正または負の値を取る場合があり、それをpaddingやanimation-delayのように正の値のみを受け付けるプロパティで使用する必要がある場合を考えてみましょう。abs()が登場する前は、JavaScriptに頼るか、冗長なmax()による回避策を記述する必要がありました。今では、CSS内で直接処理できるようになりました。

重要なポイント

  • abs()は、数値式の絶対値(非負の値)を返すCSSの数学関数で、元の単位を保持します。
  • 数値、長さ、パーセンテージ、角度、およびcalc()内で有効な任意の式を受け付けます。
  • 一般的な使用例には、負の値を拒否するプロパティ向けのカスタムプロパティのサニタイズ、対称的なアニメーションタイミング、レスポンシブな間隔設定などがあります。
  • 古いブラウザ向けには、max(var(--x), calc(-1 * var(--x)))をフォールバックとして使用します。

CSS abs()関数とは?

abs()は、CSS Values and Units Module Level 4仕様に含まれるCSSの数学関数です。単一の数値式を受け取り、その絶対値を返します。常に非負で、入力と同じ単位を保持します。

width: abs(-200px);         /* → 200px */
padding: abs(20px - 30px);  /* → 10px */
font-size: abs(-1.5rem);    /* → 1.5rem */

数値、長さ、パーセンテージ、角度、およびcalc()内に記述できる任意の式で動作します。単位は正確に保持されます。

構文とサポートされる値の型

abs( <calc-sum> )

引数は数値に解決される任意の値を指定できます:

abs(-4)                /* プレーンな数値 → 4 */
abs(-8vh)              /* 長さ → 8vh */
abs(-60%)              /* パーセンテージ → 60% */
abs(20% - 60%)         /* 式 → 40% */
abs(min(-20px, 10px))  /* ネストされた関数 → 20px */

重要な注意点として、abs()は提供された数学式に対して演算を行いますが、パーセンテージなどの値は、プロパティの通常のルールに従って後で解決されます。例えば、background-position内のabs(25%)は、そのプロパティのサイジング式を通じて後で解決されます。

実用的な使用例

カスタムプロパティからの無効な負の値の防止

カスタムプロパティは符号付きの値を保持でき、負の値になると特定のCSSプロパティを破壊する可能性があります。

:root {
  --offset: -30px; /* 正または負の値になる可能性がある */
}

/* ❌ 以前: padding-top: -30pxは無効 */
.card { padding-top: var(--offset); }

/* ✅ 改善後: 常に30pxに解決される */
.card { padding-top: abs(var(--offset)); }

このパターンは、トークンがプログラム的に設定される可能性があるデザインシステムで特に有用です。

対称的なアニメーションにおけるanimation-delayの安定化

中心インデックスからの距離を計算する際、中心より前の要素では減算が負の値になる可能性があります。負のanimation-delayは開始を遅延させるのではなく、アニメーションがサイクルの途中から始まるため、対称的な波状タイミングが崩れます:

.bar {
  --distance: abs(var(--my-idx) - var(--center-idx));
  animation-delay: calc(var(--distance) * 0.1s);
}

abs()がない場合、中心より左側のバーは負の遅延を取得し、順番を待つ代わりにアニメーション内でスキップしてしまいます。

レスポンシブな間隔の計算

.section {
  gap: abs(10vw - 4rem); /* ビューポートに関係なく常に正の間隔 */
}

abs()と他のCSS数学関数の比較

関数機能例
abs()非負の値を返すabs(-10px) → 10px
max()N個の値のうち最大値を返すmax(0px, var(--val))
clamp()範囲内に制約するclamp(1rem, 2vw, 3rem)
calc()任意の算術演算calc(100% - 2rem)

絶対値を得るためのmax()による回避策 — max(var(--x), calc(-1 * var(--x))) — は機能しますが冗長です。abs()をサポートしていない古いブラウザをターゲットにする場合にのみ使用してください。

ブラウザサポートとフォールバック

abs()は、Chrome、Edge、Firefox、Safariの最新バージョンを含む最新のブラウザでサポートされています。現在のブラウザリリースでは安定したサポートがありますが、古いバージョンではサポートされていない可能性があります。現在の互換性データについてはCan I Use — abs()を確認してください。

プログレッシブエンハンスメントの例:

@supports not (width: abs(-10px)) {
  .element {
    padding: max(var(--val), calc(-1 * var(--val)));
  }
}

よくある落とし穴

abs()はCSSキーワードでは動作しません:

width: abs(auto);     /* ❌ 無効 — autoは数値式ではない */

abs()内でcalc()をラップするのは冗長です:

width: abs(calc(50% - 100px)); /* ⚠️ 動作するが不要 */
width: abs(50% - 100px);       /* ✅ よりクリーン */

abs()はSassの組み込みabs()とは異なります — Sassは単位なしの数値でコンパイル時に解決しますが、CSSのabs()はレイアウト時にブラウザで実行され、寸法を適切に処理します。両方を使用する場合、Sassが呼び出しをインターセプトする可能性があることに注意してください。CSSに渡すには、abs(#{...})と記述するか、Sass版を明示的に使用するために名前空間付きのmath.abs()形式を使用できます。

まとめ

abs()はCSSの数学における実際のギャップを埋めます。JavaScriptや複雑な回避策なしに、符号付きの値を安全に扱えるようになります。間隔、タイミング、レイアウト計算にカスタムプロパティを使用するコンポーネントを構築している場合、最新のエンジン全体でブラウザサポートが安定している今、ツールキットに追加する価値があります。

よくある質問

はい。カスタムプロパティが単位なしの数値を保持している場合、abs()は単位なしの数値として非負の等価値を返します。その後、calc()内で結果に単位を掛けることができます。例えば、calc(abs(var(--value)) * 1px)のようにして長さを生成できます。

abs(0)は0を返します。これは完全に有効で、問題を引き起こしません。この関数は単に値が非負であることを確認するだけで、ゼロはすでにその条件を満たしています。

はい。abs()を含むCSS数学関数は、式が有効な値に解決される限り、最新のメディアクエリやコンテナクエリで使用できます。例えば、@media (min-width: abs(600px))は現在のブラウザで有効なCSSです。

Sassには独自のabs()関数があり、コンパイル時に単位なしの数値に対して動作します。呼び出しがネイティブCSSに確実に渡されるようにするには、abs(#{50% - 100px})のように補間構文で引数をラップするか、Sass固有の呼び出しには名前空間付きのmath.abs()を使用して、プレーンなabs()をブラウザ用に残すようにします。

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog