12 de julio de 2026

CSSがランダムを手に入れた日：random()関数が変えるデザインの現実

2026年5月、CSS仕様にrandom()関数が正式に追加された。この関数は、開発者がスタイルシート内で直接乱数を生成し、要素の見た目を確率的に変化させる手段を提供する。これにより、従来JavaScriptに依存していたランダムなレイアウトや色のバリエーションが、CSSだけで完結できる時代が到来した。

なぜこの変化が重要か。一言で言えば、CSSが「宣言的なランダム性」を獲得したからだ。これまでもCSSの疑似乱数はサードパーティライブラリやサーバーサイドで生成されてきたが、クライアントサイドで完結し、かつ動的に変化するランダム表現は事実上不可能だった。random()はこの壁を打ち破る。デザインの多様性を保ちながら、コードの複雑さを劇的に削減できる。

random()の基本とユースケース

random()関数は、指定した範囲内で浮動小数点の乱数を返す。random(1, 100)と書けば1から100の間の数値が得られ、それをwidthやfont-size、opacityといったプロパティに直接代入できる。

具体的な活用例として、カードUIの背景色にランダムな色相を割り振るケースを考えよう。

.card {
  --hue: random(0, 360);
  background: hsl(var(--hue), 70%, 60%);
}

これだけで、カードごとに異なる色が自動生成される。JavaScriptは一切不要。ギャラリーサイトやダッシュボードのウィジェットで、静的なページに「生きている感」を与えられる。

もう一つの使い道は、トランジションやアニメーションの遅延時間をランダム化すること。要素が一斉に動くのではなく、自然なばらつきを持たせられる。

.item {
  animation: fadeIn 1s ease-out;
  animation-delay: random(0, 500)ms;
}

すべてのアイテムが異なるタイミングで出現するため、ユーザーには「有機的な」印象を与えられる。特に大量の要素を一覧表示するリストやグリッドで効果を発揮する。

落とし穴と実装上の注意点

ただし、random()にはいくつかの制約がある。最大の注意点は「毎回異なる値を返す」という特性だ。再描画やリフローのたびに値が変わるため、ユーザーが意外な見た目に遭遇する可能性がある。これを防ぐには、@propertyでカスタムプロパティを定義し、initial-valueで乱数を保持する方法が推奨される。

@property --base-hue {
  syntax: "<integer>";
  inherits: false;
  initial-value: random(0, 360);
}

こうすることで、一度生成された値が要素のライフサイクル中は固定され、予測可能なランダム性を実現できる。

もう一つの落とし穴はアクセシビリティだ。ランダムな色やサイズは視認性を損なうリスクがある。コントラスト比がWCAG基準を満たしているかどうかをCSSだけでは検証できないため、ランダム値を適用する際は最低限のガード条件（例：明度の下限設定）をCSSのcalc()と組み合わせて実装する必要がある。

Gap Decorationsとのシナジー

同じく2026年に登場したGap Decorations（gap-decorationプロパティ）と組み合わせると、さらに表現の幅が広がるグリッドやフレックスボックスの隙間を装飾する際、random()を使って各ギャップの色や形状を独立して変化させられる。整然としたレイアウトの中に意図的な「乱れ」を仕込むことで、デザインに個性が生まれる。

.gallery {
  display: grid;
  gap: 12px;
  gap-decoration: line;
  gap-color: hsl(random(0, 360), 80%, 60%);
}

このコードは、グリッドの各セル間の仕切り線を異なる色で描画する。均質になりがちなグリッドレイアウトに、計算された混沌をもたらす具体例だ。

CSSの「計算領域」が拡大している

random()の登場は、CSSが「定数」の世界から「変数＋確率」の世界へと舵を切ったことを示す。従来、CSSはスタイルを静的に記述する言語だった。しかしcalc()やclamp()、そして今回のrandom()により、スタイルシートは「計算」を内包するメタ言語に進化しつつある。

この流れは、JavaScriptの領域であった動的表現を徐々にCSSが引き継ぐ未来を予感させる。特にUIのマイクロインタラクションやデータ可視化の分野では、CSSだけである程度の動的表現が完結できるようになるだろう。

ただし、random()は純粋な乱数生成関数であり、再利用可能な「シード値」の概念はまだない。そのため、同じセッション内で一貫したランダムパターンを複数ページにわたって維持したい場合は、やはりJavaScriptでシードを管理し、CSSカスタムプロパティ経由で注入する必要がある。つまり、完全な置き換えではなく、適材適所の棲み分けが当面は続く。

参照

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！