2026年7月21日

CSS `random()` と `Gap Decorations` が変える「宣言的UI」の本質 — 2026年、より自由で保守性の高いCSSへ

CSSが「動作」を持ち始めた — random() と Gap Decorations の衝撃

2026年、CSSはデザインの「宣言」を超えて、振る舞いの一部を内包し始めた。random() 関数と Gap Decorations 機能がその象徴だ。これらの機能は従来JavaScriptに委ねられていた「ランダム性」や「繰り返しの装飾」をCSSだけで実現させる。これは単なる構文の追加ではない。「CSSに状態を持たせる」という根本的な発想の転換を伴う。

公式情報（web.dev, CSS-Tricks）によれば、random() は --r: random(0, 1); のようにカスタムプロパティに直接乱数を割り当てられる。一方、Gap Decorations はFlexboxやGridの gap 領域に装飾を施すCSSネイティブの機能。これにより、ギャップに線や点、グラデーションを自動で描ける。

開発者にとって重要なのは「宣言的UI」の範囲が拡大した点だ。従来、ランダムな色の割り当てやリスト間の装飾はJSのループや疑似要素の手動配置が必要だった。今後はHTML構造に手を加えず、CSSだけで完結する。結果、コードの保守性が上がり、パフォーマンスも向上する。

random() の実力 ─ 乱数をCSSで扱う現実的な方法

random() 関数は、指定された範囲内で浮動小数点数または整数を返す。random(10, 20) と書けば10〜20の任意の数値を得られる。この値はカスタムプロパティを介して opacity や color-mix の係数、animation-delay などに流し込める。

実装例：

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

これだけで、各カードは異なる色相とアニメーション開始時間を持つ。JSなしで動的なバリエーションが生まれる。

ポイントは「評価タイミング」だ。random() は要素ごとに再評価されるわけではない。ページロード時またはリフロー時に固定値に解決される。よってアクセシビリティ上の問題（視覚的なチラつき）は起こりにくい。一方、content プロパティでは使えない制限がある。乱数でテキスト内容を変えたい場合は従来通りJSが必要。

Gap Decorations：空いたスペースにもスタイルを

Gap Decorations は、FlexコンテナやGridコンテナの gap 領域に直接CSSを適用できる仕組みだ。疑似要素では不可能だった「行間や列間への装飾」を標準化する。

使い方：

.grid {
  display: grid;
  gap: 1rem;
  gap-background: linear-gradient(45deg, #f00, #00f);
  gap-border: 2px dashed #333;
}

これで各アイテムの隙間にグラデーション背景と破線の枠が描画される。従来は空の div を並べるか、border と margin を駆使したハックが必要だった。保守性が格段に向上する。

ただし注意点もある。gap が 0 の場合は効果がない。また、gap-background と gap-border は同時に使うとレイヤー順が固定（背景→ボーダー）であり、重なり制御には対応していない。複雑な装飾には今後追加されるであろう gap-mask などを待つ必要がある。

開発現場への影響 ─ 学習コストと移行戦略

これらの機能は2026年5月のWebプラットフォーム新機能で紹介された。まだChrome CanaryとSafari Technology Previewでしか試験的実装が進んでいない。そのためプロダクション投入は早くとも2027年以降と見られる。

とはいえ、学んでおく価値は大きい。理由は二つある。

JSからの依存を減らせる：乱数やギャップ装飾のためにライブラリ（Lodash, anime.jsなど）を導入する必要がなくなる。バンドルサイズ削減につながる。
デザインシステムの表現力向上：CSSだけでバリエーション豊かなUIを生成できる。デザイントークンに random() を組み込むことで、「意図的なランダム性」をシステムに組み込める。

移行時は、以下の落とし穴がある。

random() の再現性問題：乱数は再現性がない。スクリーンショットテストやスナップショットテストで失敗する可能性が高い。テスト環境では固定シードを提供する random(1, 10, seed: 42) のような構文が今後追加されるかどうかは未確定。
Gap Decorations のパフォーマンス：巨大なグリッドで gap-background に複雑なグラデーションを指定すると、リフロー負荷が高まる。ユーザーの端末性能を考慮した設計が必要。

「状態を持たないCSS」からの卒業

random() は要素ごとに異なる初期状態を生成する。これはCSSが「静的な見た目」だけでなく「動的に変化する状態」を扱い始めた証拠だ。今後、if() や when() のような条件分岐構文が加われば、CSSはさらに強力になる。

ただし、複雑なロジックをCSSに詰め込みすぎるのは逆効果だ。あくまで「装飾的なランダム性」や「レイアウト上の繰り返し装飾」に留めるのが賢明。ビジネスロジックやユーザー操作に応じた動的制御は引き続きJSの領域とすべき。

2026年、CSSは「見た目を整える言語」から「振る舞いを宣言する言語」へ進化している。この変化を正しく理解し、適切な役割分担を見極めるのが、次の時代のWeb開発者に求められるスキルだ。

参照

この記事を書いた人

理人と理子

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