CSSの「あいまいな境界」を操作する：Gap Decorationsとrandom()がもたらす表現の自由

CSSの「隙間」を飾る：Gap Decorationsの衝撃

2026年5月、CSSにGap Decorationsが正式に追加された。FlexboxやGridレイアウトで生まれる「隙間（gap）」に、線やドット、独自パターンを描けるプロパティ群だ。これまで装飾といえばborderやbox-shadow、疑似要素に頼るしかなかった。Gap Decorationsは、レイアウト構造そのものを装飾のキャンバスにする。

具体的には、gap-decoration、gap-decoration-style、gap-decoration-color、gap-decoration-widthといったプロパティが利用できる。仕組みはシンプルで、gap領域にCSSグラデーションや画像を敷き詰めるイメージ。例えばこう書ける。

.grid {
  display: grid;
  gap: 8px;
  gap-decoration: repeating-linear-gradient(45deg, #f00, #00f);
  gap-decoration-width: 4px;
}

グリッドの行間・列間すべてに斜めストライプが走る。これは従来の疑似要素やJavaScriptによる複雑なDOM操作なしでは実現できなかった表現だ。開発者にとってのメリットは明確：レイアウトと装飾の分離が進み、メンテナンス性が向上する。一方で、どのブラウザが対応するかはまだ限定的。Chrome 120以降、Firefox 125以降で先行実装されているが、Safariは技術プレビューの段階。商用サイトに投入するなら、@supportsでフォールバックを用意する必要がある。

CSSで乱数が使える：random()関数の登場

同じく2026年4-5月のアップデートで、CSSにrandom()関数が加わった。これまでCSSでランダムな値を得るには、JavaScriptで動的にスタイルを生成するか、CSS変数を乱数で埋めるハックが必要だった。random()はCSS値の一部として乱数を生成できる。

.card {
  transform: rotate(random(0deg, 360deg));
  opacity: random(0.5, 1);
}

応用範囲は広い。カードを少しずつ傾けて「手書き風」のカオスを演出する。アニメーションの遅延時間をランダムにして、波打つような動きをCSSだけで実現する。ただし、乱数が再評価されるタイミングに注意が必要。random()はスタイルの再計算ごとに新しい値を生成するため、アニメーション中に値が変わると予期しない動きになる。特定のフレームで固定したいなら、@propertyを使ってカスタムプロパティで保持する。

@property --rot {
  syntax: '';
  initial-value: 0deg;
  inherits: false;
}
:root {
  --rot: random(0deg, 360deg);
}

これで値が固定される。乱数の生成タイミングを制御できる点は、JavaScriptのMath.random()と同等の柔軟性を持つ。CSSだけで完結するランダム表現が可能になった。

CSSとJavaScript、その境界線はどこへ？

Gap Decorationsとrandom()の組み合わせは、CSSの領域を大きく拡張する。かつてJavaScriptに頼っていた「動的な装飾」や「ランダム性」が、CSSの宣言的な記述で実現できるようになった。しかし、これは「CSSで全部やるべき」という単純な話ではない。パフォーマンスの観点で言えば、CSSの乱数生成はJavaScriptより軽量なケースが多いが、複雑なロジックや状態管理は依然としてJavaScriptの領域だ。

CSS-Tricksの記事「The Shifting Line Between CSS States and JavaScript Events」が指摘する通り、CSSが状態（ホバー、フォーカス、スクロール位置など）を直接扱えるようになるにつれ、JavaScriptの役割は「イベント駆動の複雑なインタラクション」に収束しつつある。Gap Decorationsはレイアウトの状態（gapの有無）に依存する装飾であり、random()はスタイル計算の状態に依存する値生成だ。双方とも「CSSの状態」をトリガーに動作する。

実務での判断基準は「変更のトリガーが何か」にある。ユーザーのクリックやドラッグなど複雑なイベントが必要ならJavaScript。要素の出現やレイアウトの変化、単純な乱数ならCSSで十分。この線引きを間違えると、CSSの複雑さが増してメンテナンスが難しくなる。Gap Decorationsを使うなら、gapサイズが可変の場合に表示が崩れないか検証が必要。random()を使うなら、乱数の乱れがアクセシビリティやユーザビリティを損なわないか確認する。

次のステップとして、Safariの対応状況をウォッチしつつ、小規模なプロジェクトから導入するのが現実的。Gap Decorationsは「グリッドの区切り線を簡潔に」、random()は「スプラッシュアニメーションのばらつき」など、限定的なユースケースで試す価値がある。CSSの表現力は確実に進化している。その一歩先を行くなら、これらの新機能を理解し、適切な場所で使う判断力が求められる。

参照

• New to the web platform in May (web.dev)
• April 2026 Baseline monthly digest (web.dev)
• New to the web platform in April (web.dev)
• What’s !important #14: Gap Decorations, random(), <select> field sizing, and More (CSS-Tricks)
• The Shifting Line Between CSS States and JavaScript Events (CSS-Tricks)