- これまでは CSS
gap プロパティで間隔を作ることはできても、gap 区間そのものをスタイリングすることは不可能だったため、さまざまな回避策（追加要素、border、pseudo-element など）が必要だった
- 新しい CSS gap decorations 機能では、
row-rule, column-rule などのプロパティによって、**レイアウトアイテムの間に直接線（separator）**を描けるようになった
- Grid、Flexbox、Multi-column、そして近いうちに Masonry まで、主要なレイアウトすべてでデコレーションを適用でき、別途マークアップや不要な要素なしに 純粋な CSS だけで構造的・視覚的な改善が可能
- さまざまなスタイル（太さ、色、パターンなど）の繰り返し・組み合わせに対応し、
repeat(), outset, paint-order などで精密に制御できる
- 現時点では Chromium 系（Chrome/Edge 139+）でフラグを有効化した場合のみ利用可能で、標準化と拡張が進行中
従来の gap の限界と変化
- 以前は gap 領域をスタイリングしにくく、separator 用のボーダーや疑似要素を追加する必要があった
- この方式には、レイアウトサイズ、アクセシビリティ、マークアップの複雑さなど、さまざまな欠点があった
- いまや gap decorations 標準の登場により、シンプルな CSS プロパティだけで間隔領域にデコレーション（線など）を適用可能
CSS gap decorations の紹介
- column-rule: 既存の multi-column で縦の区切り線を描く際に使用（例:
column-rule: 1px solid black;）
- これでこのプロパティを flexbox、grid などでも使えるようになった
.my-grid-container {
display: grid;
gap: 2px;
column-rule: 2px solid pink;
}
- row-rule: 行（横方向）間の separator を描ける
.my-flex-container {
display: flex;
gap: 10px;
row-rule: 10px dotted limegreen;
column-rule: 5px dashed coral;
}
- 複数スタイルの繰り返し・組み合わせ:
repeat() やカンマ区切りでさまざまなスタイルを混在できる
.my-container {
display: grid;
gap: 2px;
row-rule:
repeat(2, 1px dashed red),
2px solid black,
repeat(auto, 1px dotted green);
}
- 精密制御用プロパティ:
row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order などにより、位置、交差点、重なり順序などを細かく調整できる
例: gap decorations の実践的な適用
- サンプルページでは body を grid に設定し、header/nav/main/footer を gap で区切っている
row-rule によって、太さ・色・スタイルの異なる区切り線を適用できる- nav メニューでは flexbox と
column-rule を使って項目間に線を引く
- main 領域では flexbox で画像・テキストを masonry 形式に配置し、
row-rule, column-rule でグリッド風の構造を強調する
column-rule-outset: 0; などで線の始点・終点位置を精密に調整できる
ブラウザ対応と有効化
- 現在は Chrome/Edge 139+ などの Chromium ベースのブラウザで、**フラグ（about://flags → Experimental Web Platform Features）**の有効化が必要
- 正式な標準化が進行中であり、さまざまなフィードバックと実験が推奨される
さらに詳しく / Playground
まだコメントはありません。