2026年7月9日

CSSが「条件分岐」を持つ日：2026年、random()とGap Decorationsが変えるスタイルの常識

2026年春、CSSに相次いで加わったrandom()関数とGap Decorations（gap装飾）は、単なる機能追加ではない。宣言的スタイルシートに「条件分岐」と「装飾の自動配置」という概念を持ち込み、フロントエンド開発のパラダイムを静かに揺さぶっている。

具体的に何が変わるのか。random()はCSSで擬似乱数生成を可能にし、Gap Decorationsはflex/gridの隙間（gap）に線や画像を自動配置する。これらが組み合わさると、JavaScriptを書かずとも動的でバリエーション豊かなUIが実現できる——つまり、ランタイムのロジックがスタイル側へ移行し始めたということだ。

random()：スタイルシートに「偶然」を組み込む

CSSのrandom()は、カスタムプロパティ（CSS変数）と組み合わせて使う。例えば--offset: random(0px, 100px);と宣言すれば、要素ごとに異なる値が割り当てられる。この時点で「ユニークなスタイル」がHTMLやJSを汚さずに書ける。

従来の方法（JSで要素ごとにスタイルを生成→インラインまたはclass付与）に比べ、random()の利点は明らかだ：

レンダリング時にブラウザが値を決定するため、JSのオーバーヘッドがゼロ
レスポンシブや@containerクエリと併用しても再計算が高速
疑似要素やアニメーションのkeyframes内部でも使える

ただし落とし穴もある。random()は再評価されるタイミングがブラウザ依存で、アクセシビリティやテスト容易性を考慮する必要がある。乱数が変わるとスクリーンリーダーの読み上げ順が安定しない、テストスナップショットが一致しないといった問題が発生し得る。利用はあくまで視覚的ノイズや装飾範囲に留めるのが無難だ。

Gap Decorations：空白をデザインで埋める

Gap Decorationsは、gridやflexboxのgap領域にborderやbackgroundを描画する仕組み。gap-borderやgap-backgroundプロパティで制御する。

この機能が重要なのは、これまで空気のように扱われてきた隙間をデザイン資産に変える点にある。例えばカードリストの間に点線セパレーターを自動挿入したい場合、従来は各アイテムにborder-bottomを付け、最後の子だけ消す……といったhackが必要だった。Gap Decorationsならgap-border: 1px dashed gray;だけで済む。

さらにrandom()と組み合わせると、各gapに異なる太さ・色・破線パターンを自動生成できる。UIが「単調なリピート」から「規則性のあるバリエーション」へ進化する。

注意点として、現時点ではブラウザ実装がChrome CanaryおよびFirefox Nightlyに限られる。本番投入は2027年半ば以降と見込む。

なぜ今、これらの機能が相次いで登場したのか

背景にはCSS HoudiniやContainer Queriesの普及がある。CSSが「描画の後処理」から「レイアウトの能動的制御」へ役割を拡大している。random()やGap Decorationsはその流れの延長線上にある。

もう一つ、デザインシステムの標準化が進んだことも大きい。多くのチームが「バリエーションはトークン化し、CSS変数で管理する」手法を採用した結果、CSS側で値のバリエーションを生成する需要が高まった。random()はまさにそれに応える。

さらにWebプラットフォーム全体のトレンドとして「宣言的APIへの回帰」が起きている。scroll-driven animationsや@starting-styleなど、かつてJSで書いていた処理がCSSに取り込まれている。random()とGap Decorationsもその一環だ。

開発者が今すべきこと

まずはブラウザの開発版（Chrome Canary, Firefox Nightly）で実際に動かしてみる。思ったより直感的に使える反面、予期せぬ振る舞い（特にrandom()の値の持続性）に遭遇する可能性がある。Issueを上げて仕様策定に参加するのも手だ。

次に、チーム内で「CSSでどこまでロジックを書くか」のガイドラインを議論しておく。random()で生成した値をJSから参照できない（現在の仕様では取得不可）ため、計算結果をJSで使いたいユースケースは引き続きJS側に任せるべき。

最後に、既存のJavaScriptライブラリ（例：ランダム配置のアニメーションライブラリやgap装飾を施すツール）のコードベースを見直す。それらの仕事の一部がCSSで代替できるようになった。

2026年後半に向けた展望

次に来るのはCSS @functionとrandom()の組み合わせだろう。@function内で乱数を使えば、さらに複雑なバリエーション関数を定義できる。またGap Decorationsがmulticolやmasonryレイアウトに拡張される可能性も高い。

CSSが「見た目を記述する言語」から「レイアウトと振る舞いを宣言する言語」へと変わりつつある。random()とGap Decorationsは、その変革の最初の分岐点に過ぎない。

参照

この記事を書いた人

理人と理子

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