CSSのこのプロパティを待っていた！疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります

サイト構築 -CSS

Post on:2026年6月25日

sponsorsr

この機能を待ち望んでいた人は、多いと思います！
6月にアップデートされたChrome 149で、CSS GridやFlexboxのギャップをCSSで装飾できるようになりました。言い換えると、コンテナ間に区切り線をスタイルできます。

これまでは罫線を描いた背景画像を使用したり、ボーダー用のdivを加えたり、疑似要素を使用したりと工夫が必要でしたが、これからはcolumn-ruleプロパティで簡単に実装できます。

疑似要素やボーダーを使用せずに、コンテナ間に区切り線をCSSで装飾できるようになります

Gap decorations: Now available in Chromium

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
これまでの実装方法の問題点
column-ruleの便利な使い方
column-ruleのデモページ
デベロッパー向けトライアル版以降の変更点
サポートされていないブラウザへの対応

はじめに

CSSのcolumn-ruleプロパティは、CSS GridやFlexboxのコンテナ間のギャップ装飾ができるプロパティで、Chrome 149+とEdge 149+でサポートされました。ボーダーや疑似要素を使用せずに、CSS Grid, Flexbox, マルチカラムレイアウトでギャップをCSSで装飾できます。

この機能は、Microsoft EdgeチームとGoogle Chromeチームの共同開発により実現しました。

これまでの実装方法の問題点

コンテナ間のギャップをスタイルするには、これまで何らかの回避策が必要でした。たとえば、個々の要素にボーダーを設定したり、疑似要素を使用したり、背景を工夫したりといった方法です。

しかし、これらの方法にはデメリットがありました。

構造に依存する: 視覚的な区切り線を追加するには、マークアップを変更するか、特定の要素に対してセレクタを記述する必要があります。
アクセシビリティに悪影響を与える: 本来表示されるべきではないDOM要素が、アクセシビリティツリーに表示されてしまいます。
メンテナンスが困難: レスポンシブレイアウトは、ギャップをスタイルする前提条件を崩します。
パフォーマンスの低下: 必要のないDOMノードが増えれば、レイアウト処理の負荷も増えます。
実装の利便性が低い: 正しく機能させるためには、複雑な幾何学的計算が必要なることがよくありました。

column-ruleプロパティは複数列レイアウトのギャップ装飾を処理しますが、CSS Gridとflexboxにはこれまで同等の機能がありませんでした。

column-ruleの便利な使い方

CSS GridとFlexboxのコンテナでcolumn-ruleプロパティが使用できるようになりました。さらに水平方向のギャップを調整するrow-ruleという新しいプロパティも追加されました。これらは純粋に視覚的なものであり、既存のレイアウトには影響を与えません。複数列レイアウトでcolumn-ruleプロパティを使用した場合でも、既存の動作は変わりません。

たとえば、3つのパネルをもつFlexコンテナにスタイルを適用してみます。

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

.flex-split {

column-rule-width: 2px;

column-rule-style: dashed, solid;

column-rule-color: #d4d0c8;

}

このCSSで、1つ目と2つ目のコンテナ間に点線がスタイルできます。

デモページ

上記のCSSのようにrow-ruleとcolumn-ruleはどちらもwidth, style, colorについて同じ省略記法を受け付けます。ルールの省略記法を使用すると、両方を一度に設定できます。

新しいプロパティ

これは単にcolumn-ruleを他のレイアウトモードに導入しただけではありません。装飾を細かく調整するためのコントロールも導入しました。

たとえば、交差部分での折り返し方法、ギャップの端からの内側へのオフセット量、アイテムに対する表示タイミング、ギャップごとにスタイルを変える方法などです。また、ボーダーの幅、カラー、内側の余白はすべてアニメーション化が可能です。

repeat()関数

ギャップの装飾は、幅、スタイル、カラーの値でrepeat()をサポートしています。これにより、グリッドのトラック定義で使用されるrepeat()構文と同様にギャップ全体に渡って装飾を簡単な書式で設定できます。

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}

.settings-panel {

row-rule: 1px solid #243352;

row-rule-width: repeat(2, 1px), 4px;

}

このCSSにより、最初の2つのギャップには1pxのルールが適用され、3つ目のギャップには4pxのスタイルが適用され、ギャップの数が値の数より多い場合はこのルールが繰り返し適用されます。また、repeat()を使用せずに複数の値を直接設定することも可能です。

デモページ

たとえば、カレンダーで時間と30分ごとの区切りで、交互に行ごとのスタイルを設定する場合に便利です。

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

.calendar {

row-rule-width: 2px, 1px;

row-rule-style: solid, dashed;

row-rule-color: #e8e4df, #f0ece7;

}

下記のデモでは、時間のギャップに実線、30分単位のギャップに破線が交互に表示されます。

デモページ

装飾の交差部分を制御する

column-rule-breakとrow-rule-breakプロパティは、ギャップの交差部分における装飾を制御します。

normal: デフォルト。動作はコンテナの種類によって異なります。詳細はCSS Gap Decorations Module Level 1をご覧ください。
none: 装飾は交差部分にも連続して適用されます。
intersection: 装飾は行と列のギャップが交差する箇所で途切れます。

たとえば、グリッドのコンテナでrule-break: intersection;を設定すると、ギャップのある交差点で区切られ、継続されません。

デモページ

rule-break: none;を設定すると、ルールは交差点でも継続的に適用されます。

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  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: 5px;に設定すると、すべての装飾が内側に5px縮小されます。

.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;
}

.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: 0px;、rule-inset-junction: 10px;を設定すると、コンテナの端では端が揃い、交差点では内側に埋め込まれた装飾が実現できます。前述のダッシュボードのデモではこの方法が使用されており、マウスのホバー時には内側の余白がアニメーションで変化します。

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

.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;
}

section {

rule: 2px solid black;

rule-visibility-items: between;

}

実際の動作は、デモページでご覧ください。

デモページ
上部で、normal, all, between, aroundを切り替えることができます。

rule-visibility-itemsでallに設定すると、隣接するアイテムがないギャップを含め、すべてのギャップにルールが表示されます。

section {
  rule: 2px solid black;
  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;
}

.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;

}

実際の動作は、デモページでご覧ください。

デモページ

column-ruleのデモページ

この記事で紹介されているデモはすべて、下記で楽しめます。

デモページ- GitHub
Chrome 149+, Edge 149+でご覧ください。

デベロッパー向けトライアル版以降の変更点

デベロッパー向けトライアル版（Chrome 139）でギャップの装飾を試した人は、以下の変更点にご注意ください。

ここで紹介した機能はデフォルトで有効になっており、フラグを設定する必要はありません。
一部のプロパティ名が最新の仕様に合わせて変更されました（column-rule-outsetはcolumn-rule-insetに、row-rule-outsetはrow-rule-insetに変更）。
column-rule-visibility-itemsプロパティとrow-rule-visibility-itemsプロパティが追加されました。
アニメーションのサポートが追加されました。