random()
Experimental: これは実験的な技術です
本番環境で使用する前に、ブラウザーの互換性一覧を注意深く確認してください。
`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のみのサポートであるため、プロダクション環境での使用は慎重に検討してください。
アクセシビリティ
- ランダムな色やコントラストの使用は避け、アクセシビリティ基準を満たす範囲でのランダム化に留めてください。