CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック
Post on:2025年6月19日
sponsorsr
CSS GridやFlexboxは非常に便利ですが、アイテム間のスペース（ギャップ）をスタイルするときにはボーダーや疑似要素や背景画像を使ったハックでしか実装できませんでした。
アイテム間にボーダーを設置したり、交差するボーダー、交差しないボーダー、さらにはノートの罫線のように太いボーダーと細いボーダーの混在も実装できるCSSのcolumn-ruleプロパティを拡張するテクニックを紹介します。
A new way to style gaps in CSS
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
はじめに
ボーダーや疑似要素を使ったハックはもう必要ありません、これからはカラム間のスペース（ギャップ）を直接スタイルできます。
Microsoft Edgeチームは、CSS GridやFlexbox、さらにマルチカラムレイアウトでカラム間のスペース（ギャップ）をスタイルする新しい方法がChrome 139およびEdge 139でデベロッパー向けトライアルとして提供が開始されました。
参考: A new way to draw separators in CSS -Windows Blog
カラム間のスペースを設定するときの問題点
カードやデータグリッドなどのUIコンポーネントのカラム間のスペース（ギャップ）にスタイルを設定すると、可読性が大幅に向上し、全体的な美しさも向上します。しかし、CSS GridやFlexboxのレイアウトでこの効果を実現するには、これまではボーダーや疑似要素や背景を使った厄介な回避策が必要でした。このような回避策はさまざまな理由で問題を引き起こす可能性があります。
-
- 直感的でない
- 視覚的なスタイルは構造的な依存関係が生じ、セマンティックHTMLの原則に反します。
-
- アクセシビリティに悪影響
- 余分なDOM要素が必要になるため、スクリーンリーダーなどの支援ツールに干渉する可能性があります。
-
- メンテナンスが大変
- 複雑なレイアウトロジックが必要となるため、コンポーネント間で一冠したスタイルを保つことが難しくなります。
-
- パフォーマンスにも悪影響
- これらの回避策は不必要なDOM要素を追加するため、パフォーマンスにも悪影響を与えます。
カラム間のスペース（ギャップ）は、Webのテクノロジーとしてはcolumn-ruleプロパティによるgapがすでにサポートされていますが、現在のところマルチカラムレイアウトのみに限定されています。デベロッパーからはCSS GridやFlexboxで一貫したgapのスタイル設定方法を求める声が長い間要望されていました。
解決方法: CSSの新しいプロパティが便利すぎる
カラム間のスペース（ギャップ）をスタイルするには、column-ruleプロパティを拡張してCSS GridやFlexboxなどの他のレイアウトでも機能するようにし、さらにそれを補完するrow-ruleという新しいプロパティを導入します。これにより、異なるレイアウトのタイプ間でスペースがスタイル設定できるようになり、一貫性と新たなカスタマイズ性がもたらされます。
参考: CSS Gap Decorations Module Level 1
ちなみに、column-ruleは昔からあるプロパティです。
カラム間のスペース（ギャップ）をスタイルする利点は、下記の通りです。
-
- レイアウトには影響を与えません
- 装飾とは、純粋に視覚的なものです。レイアウトやスペーシングに影響を与えないため、既存のデザインを崩す心配なく導入できます。
-
- repeat構文
- CSS Gridと同様に
repeat()構文を使用してコンテナの異なる部分にスタイルを設定できます。これにより最小限のCSSで一貫性のあるデザインを実現できます。
-
- よりクリーンなマークアップ
- 余分なDOM要素や疑似要素は不要です。カラム間のスペース（ギャップ）を直接スタイルするだけです。
-
- カスタマイズも簡単
*rule-break,*rule-outset,gap-rule-paint-orderなどの新しいプロパティにより、witdh,colorといった従来のスタイルより多くのカスタマイズが可能です。
カラム間のスペース（ギャップ）をスタイルすると、視覚的に判別しやすくなり、保守しやすいレイアウトをこれまで以上に簡単に実装できます。
カラム間のスペース（ギャップ）をスタイルするこれからの方法
カラム間のスペース（ギャップ）のスタイルを今すぐに試すには、Chrome 139, Edge 139を使用し、chrome://flagsまたはedge://flagsをアドレスバーに入力して、Experimental Web Platform Featuresのフラグを有効化します。
以下のキャプチャは、Canary 139で表示したものです。
デベロッパー向けのデモページ
新しいプロパティを含め、カラム間のスペース: ギャップのスタイルをさまざまなレイアウトで試すには、デベロッパー向けのデモページがお勧めです。
CSS Gap Decorations playground
CSS Gridだけでなく、Flexboxやマルチカラムレイアウトのデモもあります。
バーガーメニューのデモ
ハンバーガーメニューのデモでは、column-rule-break: intersection;を使用して、行スペースとの交差部分で列スペースのスタイルを分割する方法が分かります。デモでは column-rule-offset: -15px;でスタイルの長さを調整し、各交差部分の端から装飾を離しています。
ノートのデモ
ノートのデモでは、row-rule-break: none;を使用して、行のスタイルが交差する箇所で途切れないようにしています。つまり、行の装飾はコンテナの左から右へと連続しています。また、column-rule-break: spanning-item;を使用して、行の装飾が連結アイテムの背後に描画されないようにしています。つまり、連結アイテムで開始と終了がおこなわれており、目に見えるT字型の交差点が描画されています。
row-ruleプロパティはrepeat()関数を使用して、レイアウトの異なるセクション間でギャップ装飾がどのように適用されるかを詳細に設定しています。これにより行のスタイルはヘッダとフッタでは非表示にし、メインコンテンツでは太くし、その他の場所では目立たないようにするといったスタイルも可能になります。
デイリーニュースのデモ
デイリーニュースのデモではマガジンスタイルのレイアウトを採用し、CSS GridとFlexboxの複数のコンテナにまたがるギャップ装飾がCSSで設定されています。
右側の数独パズルに注目してください。9x9のグリッドと繰り返しパターンを使用して、行と列の間に細い線と太い線をCSSで描画しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.sudoku { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 6px; column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); column-rule-style: solid; column-rule-color: var(--secondary); row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); row-rule-style: solid; row-rule-color: var(--secondary); } |
終わりに
カラム間のスペース（ギャップ）のスタイルをぜひお試しください。この機能はよくある問題を解決できると考えており、皆さまからのフィードバックをお待ちしております。皆さまからのニーズに合わせて機能を改良していくためにもぜひお聞かせください。
ギャップのスタイルは現在、Chromiumに実装されています。お試しいただく際には開発が進行中のため、期待どおりに動作しないケースがあることをご了承ください。現在の制限事項は、ギャップ装飾のアニメーションや多数のグリッドトラックでの使用があります。
バグがあった場合や機能についてご意見がある場合は、https://issues.chromium.org/にお願いいたします。
sponsors
