CSS `random()` と `Gap Decorations` が創る新時代の宣言的デザイン：2026年、フロントエンドの非決定性を標準化する

CSSに「非決定性」が標準搭載される意味

2026年5月のWebプラットフォーム更新で、CSSに random() 関数が正式に追加された。これはブラウザ間で乱数を生成可能にする画期的な機能だ。加えて、グリッドやフレックスボックスの子要素間に装飾線（Gap Decorations）を引ける仕様もBaseline入りした。これら2つの機能は一見無関係に見えるが、「CSSが制御できる領域を拡張する」という共通の方向性を持つ。従来はJavaScriptや画像編集ツールに頼らざるを得なかった振る舞いを、スタイルシート内で宣言的に記述できるようになる。これによりフロントエンドの責務が再定義され、保守性と表現力の両立が可能になる。

CSS random() 関数：乱数の宣言的利用

random() 関数は、CSSの値として乱数を生成する。構文は random([start, end]) の形で、例えばアニメーションの遅延時間や色のバリエーションをランダム化できる。

/* 要素ごとに異なる色相でボックスを表示 */
.box {
  background: hsl(random(0, 360), 70%, 50%);
}

この例では、各 .box 要素が異なる色相を持つ。従来ならJavaScriptでループを回してスタイルを設定する必要があったが、CSSだけで完結する。パフォーマンス面でもブラウザがネイティブに乱数を生成するため、JSによるDOM操作より高速だ。
注意点：乱数は要素ごとに一度だけ生成され、再レンダリング時には値を保持するか再計算するかを開発者が指定できる（将来的に random(-reset) のようなキーワードが検討されている）。現在の仕様ではページ読み込みごとに異なる値になるが、同一セッション内では固定される実装が多い。テスト時に結果を再現したい場合は、疑似乱数シードを与える仕組みが実装されるまではJSとの併用が必要になる。

Gap Decorations：グリッドの隙間に線を引く

Gap Decorations（正式名称はまだ議論中だが、Baseline digestではそう呼ばれている）は、gap プロパティが生み出す空白領域に装飾線を描画する機能だ。例えばグリッドレイアウトの行間や列間に区切り線を、余分な要素を追加せずに引ける。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  gap-line-style: solid;
  gap-line-color: #ccc;
  gap-line-width: 1px;
}

これにより、従来は疑似要素や追加のdivを使って実現していた「グリッド内の区切り線」が、単一のスタイル宣言で表現できる。HTMLのマークアップが純粋に意味構造だけを保ち、装飾はCSSに委ねられる。レスポンシブ対応も容易で、@container クエリと組み合わせればグリッドの分割数に応じて線の有無を動的に切り替えられる。

実務でのユースケースと落とし穴

これら2つの機能は、特にデータ可視化やインタラクティブなUIで威力を発揮する。random() を使えば、ダッシュボードのカード背景色を訪問者ごとにランダムに変えられる。Gap Decorationsは、カンバン方式のタスクボードや複数列フォームの視覚的区切りに最適だ。
ただし、random() の挙動はブラウザによって細かい差異が残る可能性がある。本番投入前にCan I Useで対応状況を確認し、フォールバックとしてJSによる乱数生成を用意しておくのが安全。またGap Decorationsは、gap の値が0のときは常に非表示になるという仕様を把握しておく必要がある。

次に起こる変化

この流れは、CSSがさらに「アプリケーションのロジック領域」を侵食する前兆だ。すでに time-based CSS（時間に応じてスタイルを変化させる）の議論が進んでいる。今後数年のうちに、CSSの中で状態管理や簡単な条件分岐が標準化される可能性は高い。フロントエンド開発者は「CSSでどこまで書くべきか」という線引きを常に再考する必要がある。良くも悪くも、スタイルシートが「静的な宣言」から「動的な宣言」へと進化している。

参照

• New to the web platform in May
• April 2026 Baseline monthly digest
• New to the web platform in April
• writing-mode
• pointer-events