random()
random() は CSS の関数で、指定された範囲内でランダムな値を生成します。また、必要に応じて、その範囲内の値を指定された増分の間隔の値に制限することもできます。これは、<length>、<frequency>、<angle>、<time>、 <resolution>、<percentage>、<number>、<integer> をプロパティ値内で指定する際に使用できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
random 実験的 | | | | 26.2 | | 26.2 |
基本構文
CSS
.particle {
left: random(0%, 100%);
top: random(0%, 100%);
animation-delay: random(0s, 2s);
}ライブデモ
実務での使いどころ
-
ランダムなレイアウト生成
パーティクルアニメーションや装飾要素の位置・サイズをランダムに設定し、自然で動的なビジュアルを作成します。
注意点
- 現時点ではSafari 26.2のみのサポートであるため、プロダクション環境での使用は慎重に検討してください。
アクセシビリティ
- ランダムな色やコントラストの使用は避け、アクセシビリティ基準を満たす範囲でのランダム化に留めてください。