random()
random()関数は、CSSだけでランダムな数値を生成できる画期的な関数です。最小値と最大値を指定すると、その範囲内のランダムな値が返されます。JavaScriptなしでランダムな位置、サイズ、色、アニメーション遅延などを実現でき、自然で有機的なデザイン表現に革命をもたらします。ページ読み込みごとに異なるビジュアルを簡単に作成できます。
概要
random()関数は、CSSだけでランダムな数値を生成できる画期的な関数です。最小値と最大値を指定すると、その範囲内のランダムな値が返されます。JavaScriptなしでランダムな位置、サイズ、色、アニメーション遅延などを実現でき、自然で有機的なデザイン表現に革命をもたらします。ページ読み込みごとに異なるビジュアルを簡単に作成できます。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 26.2+
Firefox 未対応
モバイル
Chrome Android 未対応
Safari iOS 26.2+
Firefox Android 未対応
基本構文
CSS
.particle {
left: random(0%, 100%);
top: random(0%, 100%);
animation-delay: random(0s, 2s);
}実務での使いどころ
-
ランダムなレイアウト生成
パーティクルアニメーションや装飾要素の位置・サイズをランダムに設定し、自然で動的なビジュアルを作成します。
注意点
- 現時点ではSafari 26.2のみのサポートであるため、プロダクション環境での使用は慎重に検討してください。
アクセシビリティ
- ランダムな色やコントラストの使用は避け、アクセシビリティ基準を満たす範囲でのランダム化に留めてください。