公開日: 2026 年 5 月 15 日
CSS のギャップ装飾は、Chrome と Edge のバージョン 149 以降で利用できます。ボーダーや疑似要素を使用せずに、グリッド、Flexbox、マルチカラム レイアウトのギャップをスタイル設定できます。この機能は、Microsoft Edge チームと Google Chrome チームが共同で開発しました。
問題
レイアウト アイテム間のギャップのスタイル設定には、常に回避策が必要でした。個々のアイテムのボーダー、疑似要素、背景のハックなどです。これらのアプローチには次のようなコストがかかります。
- 構造に依存する。視覚的な区切り線を追加するには、マークアップを変更するか、特定のアイテムのセレクタを作成する必要があります。
- アクセシビリティを妨げる。不要な DOM 要素がアクセシビリティ ツリーに表示されます。
- 維持が難しい。レスポンシブ レイアウトでは、ギャップのスタイル設定の前提が崩れます。
- パフォーマンスが低下する。DOM ノードが増え、レイアウト作業が増えます。
- 作成のエルゴノミクスが低い。正しく動作させるには、複雑な幾何学的計算が必要になることがよくありました。
column-rule プロパティは、マルチカラム レイアウトのギャップ装飾を処理しますが、グリッドと Flexbox には同等の機能がありませんでした。
ソリューション
グリッド コンテナと Flexbox コンテナで column-rule を使用できるようになりました。新しい row-rule プロパティは、水平方向のギャップを処理します。これらの装飾は純粋に視覚的なものであり、既存のレイアウトには影響しません。マルチカラム レイアウトで column-rule プロパティを使用する場合、既存の動作は変わりません。
たとえば、次の例は、列ルールと行ルールのスタイルリストを使用する 3 つのパネルを含む Flex コンテナです。
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
この例に示すように、row-rule と column-rule はどちらも、幅、スタイル、色の同じ省略形を受け入れます。rule の省略形を使用すると、両方を一度に設定できます。
新しいプロパティ
ただし、column-rule を他のレイアウト モードに導入し、row の対応する要素を追加しただけではありません。装飾を微調整するためのコントロールも導入しました。交差点での分割方法、ギャップの端からのインセットの距離、アイテムに対する表示タイミング、ギャップ間のスタイルの変更方法などです。ルールの幅、色、インセットもすべてアニメーション化できます。
repeat() 構文
ギャップ装飾では、幅、スタイル、色の値に repeat() がサポートされています。これにより、グリッドのトラック定義に使用される repeat() 構文と同様に、短縮形でのギャップ間の装飾を変更できます。
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
これにより、最初の 2 つの行ギャップに 1 ピクセルのルールが適用され、3 つ目の行ギャップに 4 ピクセルのルールが適用されます。ギャップの数が値の数より多い場合は、ループします。repeat() を使用せずに、複数の値を直接渡すこともできます。たとえば、カレンダーで 1 時間と 30 分の境界の行ルールのスタイルを交互に設定します。
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
装飾の分割を制御する
column-rule-break プロパティと row-rule-break プロパティは、ギャップの交差点での装飾の動作を制御します。
normal（デフォルト）: コンテナの種類によって動作が異なります。詳しくは、仕様をご覧ください。none: 装飾は交差点を連続して実行されます。intersection: 行ギャップと列ギャップが交差する位置で装飾が分割されます。
たとえば、グリッド コンテナで rule-break を intersection に設定すると、ルールはギャップの交差点で分割され、継続されません。
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
rule-break を none に設定すると、ルールは交差点を連続して実行されます。
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
この値は、インタラクティブなプレイグラウンドで試すことができます。
装飾を拡大または縮小する
column-rule-inset プロパティと row-rule-inset プロパティは、ギャップ内で装飾をどの程度拡張するかを制御します。省略形を使用してすべての辺にインセットを一度に設定することも、column-rule-inset-cap（交差するギャップがないエンドポイントの場合）と column-rule-inset-junction（他のギャップと交差するエンドポイントの場合）を使用してインセットを非対称にターゲットにすることもできます。
値には、長さ、パーセント、または overlap-join キーワードを指定できます。このキーワードは、ギャップ装飾を角に結合します。たとえば、rule-inset を 5 ピクセルに設定すると、すべての装飾が内側に 5 ピクセル縮小されます。
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
rule-inset-cap を 0 ピクセル、rule-inset-junction を 10 ピクセルに設定すると、コンテナの端では装飾がフラッシュされ、交差点ではインセットされます。前述のダッシュボード デモではこのアプローチが使用されており、インセットはホバー時にアニメーション化されます。
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
公開設定
column-rule-visibility-items プロパティと row-rule-visibility-items プロパティは、アイテムの隣接性に基づいてルールを表示するタイミングを制御します。
normal（デフォルト）: コンテナの種類によって異なります。all: 空のギャップを含め、すべてのギャップにルールが表示されます。around: 1 つ以上の隣接するアイテムがある場所にルールが表示されます。between: 2 つの隣接するアイテムの間にのみルールが表示されます。
rule-visibility-items の省略形を使用すると、両方を一度に設定できます。rule-visibility-items を between に設定すると、隣接するアイテムの間にのみルールが表示されます。
section {
rule: 2px solid black;
rule-visibility-items: between;
}
一方、rule-visibility-items を all に設定すると、隣接するアイテムがないギャップを含め、すべてのギャップにルールが表示されます。
section {
rule: 2px solid black;
rule-visibility-items: all;
}
ライブデモで値を切り替えて、違いを確認してください。
装飾をアニメーション化する
ルールの幅、色、インセットはアニメーション化できます。ホバー時やその他の状態変化時に切り替えることができます。前述のダッシュボード デモでは、ホバー時にルールの色とインセットが切り替わります。
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
デモ
この投稿で紹介したデモはすべて、 Edge デモサイトでご覧いただけます。
デベロッパー トライアルのブログ投稿には、インタラクティブなプレイグラウンド、ハンバーガー メニュー、ノートブック レイアウト、数独グリッドを含む雑誌スタイルのレイアウトなど、さらに多くのデモが掲載されています。
デベロッパー トライアルからの変更点
デベロッパー トライアル（Chrome 139）でギャップ装飾を試した場合は、次の変更点に注意してください。
- この機能はデフォルトで利用できます。フラグは必要ありません。
- 最新の仕様に合わせて、一部のプロパティ名が更新されました（例:
column-rule-outsetとrow-rule-outsetがcolumn-rule-insetとrow-rule-insetになりました）。 column-rule-visibility-itemsプロパティとrow-rule-visibility-itemsプロパティが追加されました。- アニメーションのサポートが追加されました。
今すぐギャップ装飾を使用する
ギャップ装飾は、Chrome と Edge のバージョン 149 以降で動作します。ギャップ装飾が純粋に装飾的なものである場合、この機能はプログレッシブ エンハンスメントです。サポートされていないブラウザでは、ギャップは装飾なしで正常にレンダリングされます。まだサポートされていないブラウザ向けにポリフィルが開発中です。
バグは Chromium Issue Tracker に報告してください。詳しくは、CSS ギャップ装飾の仕様をご覧ください。
役に立つリンク
- CSS ギャップ装飾の仕様
- デベロッパー トライアルのブログ投稿（Chrome 139）
- Edge のお知らせ
- GitHub の説明