The Gap Strikes Back: スタイリング可能になったCSS Gap

 (css-tricks.com)
8 ポイント 投稿者 GN⁺ 2025-07-04 | まだコメントはありません。 | WhatsAppで共有
  • これまでは 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

関連記事

まだコメントはありません。

まだコメントはありません。