2026年7月11日

2026年のCSSは「状態」を内蔵する：Gap Decorationsとrandom()が示す新しいスタイルのレイヤー

CSSが「インテリジェントなレイアウトエンジン」に変わる

2026年5月、CSSに導入されたGap Decorationsとrandom()関数は、これまでJavaScriptに依存してきた「動的な見た目の制御」をCSSだけで実現する可能性を拓く。加えて<select>要素のfield-sizingプロパティや、Baselineに追加されたWebプラットフォーム新機能の数々は、Web開発者の作業領域を根本から再定義し始めている。

なぜこの変化が重要か。理由は3つある。第一に、状態に応じた装飾をCSSが自前で判断できるようになる点。第二に、random()関数がスタイルの揺らぎを宣言的に記述可能にする点。第三に、フォームやUIコンポーネントのサイジングがブラウザ標準で最適化される点。これらはすべて「CSSが振る舞いを持ち始めた」という大きな潮流の一部だ。

Gap Decorations：グリッドとフレックスの「隙間」がキャンバスに

Gap Decorationsは、CSS GridやFlexboxのgap領域に背景色やグラデーション、ボーダーなどを適用できる仕様。従来、隙間は単なる余白でしかなかった。だが今、開発者はgapそのものを装飾の対象にできる。

例えば、カードグリッドにおいて行間と列間に異なる色のラインを引く場合、これまでは疑似要素や追加のマークアップが必要だった。Gap Decorationsを使えば、CSSだけで完結する。

.grid {
  display: grid;
  gap: 16px;
  gap-color: hsl(200 50% 70%);
  gap-style: dashed;
}

実装上の注意点として、現時点ではブラウザの対応状況にばらつきがある。Chrome CanaryとFirefox Nightlyで試験的に実装が進んでいるが、プロダクション利用には@supportsによるフォールバックが必須だ。将来の安定版リリースを見据え、今から実験的に試しておく価値は大きい。

`random()`関数：CSSが「偶然」を扱う日

random()関数は、スタイルシート内で疑似的な乱数を生成する。これにより、同じHTML構造でもロードのたびに異なる配色やサイズを表示できる。アニメーションの遅延時間にrandom(0s, 2s)と指定すれば、要素ごとに異なるタイミングで動き出す。

この関数は特に、デザインシステムにおけるバリエーション生成に強力だ。例えば、ボタンのホバー色をあえてランダムにすることで、予測不能な視覚的体験を提供できる。ただし乱数である以上、アクセシビリティや一貫性を損なわない設計が求められる。重要なのは「どこにランダム性を許容するか」を明確に決めること。フォームやナビゲーションのような機能要素には使わない、というルールをチームで共有すべきだ。

`<select>`のfield-sizing：標準UIのサイズ問題が解決

<select>要素のfield-sizingプロパティは、プルダウンメニューの幅を選択肢のテキストに合わせて自動調整する。従来、<select>はコンテンツに応じたサイズ変更が難しく、開発者はJavaScriptで幅を動的に変更するか、固定幅を強制していた。この新機能により、ブラウザが自動的に最適な幅を計算する。

この変更は一見小さく映る。しかし、フォームのユーザビリティは大幅に向上する。特にモバイル環境では、選択肢のテキストが長い場合でもコンテンツが切れずに表示される。移行コストはほとんどゼロで、既存の<select>に対してCSSでfield-sizing: contentを追加するだけだ。

Baseline Digestに見る2026年のWeb標準化の方向性

2026年4月のBaseline Digestには、上記の機能に加えてscroll-timelineやview-timelineといったスクロール連動アニメーションの強化も含まれている。これらの機能群はすべて「CSSがより宣言的に、より動的に」という明確な方向性を示している。

興味深いのは、JavaScriptで制御していた領域が徐々にCSSの管轄に戻ってきている点だ。10年前、アニメーションはJavaScriptの仕事だった。5年前、レイアウトはCSS Gridの仕事になった。そして2026年、状態に応じた装飾や乱数生成もCSSの仕事になりつつある。この流れは、Webプラットフォームが「ブラウザがやるべきことをブラウザに任せる」という原点回帰を目指している証とも言える。

開発者が今から準備すべきこと

実務における最大の落とし穴は、過度な依存だ。Gap Decorationsやrandom()は強力だが、すべてのブラウザで同時に使えるわけではない。プロダクションコードに導入する前に、@supportsとポリフィル対応計画を立てる必要がある。

具体的なアクションプランを3つ挙げる。

Chrome CanaryとFirefox Nightlyで試験実装を有効にし、自身のプロジェクトでGap Decorationsとrandom()の動作を確認する。
既存のフォームにfield-sizing: contentを試験導入し、レイアウトの崩れがないか検証する。
チーム内で「CSSが制御すべき範囲」について議論し、ランダム性を許容するデザインルールを策定する。

これらの準備を怠ると、2027年には「CSSだけでできたのに、JavaScriptで無理やりやってしまった」という技術的負債を抱えることになる。変化のスピードは速い。今のうちに実験し、知見を蓄えておくべきだ。