CSS random() 関数の探求

CSSは、ランダム性が必要な場合、これまでずっとJavaScriptに依存してきました。要素の散在した配置、多様なアニメーション遅延、予測不可能な色の変化などです。この依存関係は、まもなく縮小するかもしれません。CSS Values and Units Module Level 5仕様の一部であるCSS random() 関数は、スクリプトを必要とせず、スタイルシート内で直接ランダムな数値を生成できます。

これは実験的な機能です。ブラウザのサポートは限定的です。しかし、今理解しておく価値があります。

CSS random() 関数が実際に行うこと

核となるアイデアは単純明快です。最小値、最大値、そしてオプションでステップ増分を定義します。CSSはその範囲から数値を選択して適用します。

.card {
  top: random(5rem, 20rem);        /* 5remから20remの間の任意の値 */
  rotate: random(0deg, 360deg);    /* ランダムな回転 */
  animation-delay: random(0s, 3s); /* 段階的なアニメーションタイミング */
}

これだけです。Math.random() も、インラインスタイルも、何百もの :nth-child() ルールを生成するJavaScriptループも必要ありません。

重要な制約が1つあります。すべての引数は同じ単位タイプを共有する必要があります。 rem と px、または % と em を混在させることはできません。単位を選択し、一貫性を保ってください。

構文

random(<caching-options>?, <min>, <max>, [by <step>]?)

現在のドラフト仕様では、この関数をより正式に定義していますが、この簡略化された形式が実際に理解する最も簡単な方法です。

by パラメータはステップを制御します。これがない場合、13.47px のような小数値が得られる可能性があります。これを使用すると、出力を予測可能なシーケンスに制約できます。

/* 可能な値: 10px, 20px, 30px, 40px, 50px */
padding: random(10px, 50px, by 10px);

注意: ステップを使用する場合、最大値に常に到達できるとは限りません。random(100px, 200px, by 30px) は 100px、130px、160px、または 190px のみを生成でき、200px にはなりません。

ランダム性の共有方法の制御

ここが、CSS random() 関数が本当に興味深くなる部分です。デフォルトでは、スタイルシート内の各 random() インスタンスは、そのスタイルを使用するすべての要素で共有される単一のキャッシュ値に解決されます。

各要素に独自の一意の値を与えるには、per-element キーワードまたはダッシュ識別子を使用します。

/* 各要素が独自のランダム値を取得 */
.item {
  top: random(per-element, 2rem, 15rem);
}

/* 両方のプロパティが1つの要素内で同じ値を共有 */
.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px); /* widthと一致 */
}

/* マッチしたすべての要素がグローバルに同じ名前付き値を共有 */
.badge {
  width: random(--element-shared, 50px, 150px);
}

per-element キーワードは、セレクタにマッチする各要素に対して個別のランダム値を解決するようブラウザに指示する組み込みのキャッシングオプションです。--size のようなダッシュ識別子は、複数の random() 呼び出しを結び付けて、特定の要素内で同じ値に解決されるようにします。これは、ランダム化されているが一貫した幅と高さを持つ正方形が必要な場合に便利です。--element-shared のようなダッシュ識別子は、マッチする要素間で名前付きキャッシュキーとしても機能します。

このキャッシングシステムは意図的で、よく設計されていますが、混乱が生じやすい部分でもあります。早期に理解することで、後のデバッグ時間を節約できます。

CSS random() vs. SCSS random()

Sassで random() を使用したことがある場合、動作はいくつかの重要な点で異なります。

CSS random() はページ読み込みごとに新しい値を生成します。SCSSはビルド時に値を固定します。それぞれ異なる目的に対応しています。

ブラウザサポート

2026年初頭の時点で、CSSの random() はSafari 26.2で実装されています。より広範なクロスブラウザサポートはまだ保証されていないため、実験的な機能として扱い、適切なフォールバックを使用して @supports でプログレッシブエンハンスメントを行う必要があります。

.element {
  top: 10rem; /* フォールバック */
}

@supports (top: random(1rem, 5rem)) {
  .element {
    top: random(5rem, 20rem);
  }
}

CSSワーキンググループは2022年にこの関数を採用し、仕様は進化を続けています。未解決の問題が残っており、広範な実装前に最終的な構文が変更される可能性があります。

まとめ

CSS random() 関数は、ロジック駆動のランダム性や暗号学的な予測不可能性を必要とするものに対してJavaScriptを置き換えることはありません。しかし、純粋に視覚的なバリエーション(散在したレイアウト、有機的なアニメーションタイミング、生成的な背景など)については、スタイルシートに属するクリーンで宣言的なソリューションです。

Safari 26.2で試し、フォールバックを配置し、仕様の進展を見守ってください。実験的なものと広く利用可能なものとのギャップは縮まりつつあります。

よくある質問

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.