はじめに

リストやナビゲーションの項目のあいだに区切り線を引くために、li + liのような隣接セレクターとborderを組み合わせてきた経験はあるのではないでしょうか。

CSSには、column-ruleという「段組みの段と段のあいだに線を引く」ためのプロパティが古くからあります。区切り線を引くという目的は同じですが、線の描かれ方はborderとまったく違います。なお、段組みそのものについては「CSS Multi-column Layoutを試す」シリーズで解説しているので、併せて参照してください。

そして2026年、このcolumn-ruleが段組み専用のプロパティではなくなりました。CSS Gaps Module Level 1という仕様でGap Decorationsと呼ばれる仕組みが定義され、CSS GridやFlexboxでgapが空ける隙間にも線を引けるようになったのです。

• CSS Gaps Module Level 1（仕様ドラフト）
• column-rule | MDN

本シリーズでは、この「隙間に線を引く」仕組みを3回に分けて解説します。第1回は、従来のcolumn-ruleを題材に、その考え方とborderとの違いを押さえていきましょう。

column-ruleの基本

まずは、column-ruleを使って段間に線を引いたデモを見てみましょう。

3段組みにして、段と段のあいだに太さ2px・色#c00の線を引いています。コードは次のとおりです。

.article {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 2px solid #c00;
}

column-countで段数を、column-gapで段と段のあいだの隙間を決めます。そして、その隙間に線を引くのがcolumn-ruleです。

column-ruleは、次の3つのプロパティをまとめて指定するショートハンドです。

• column-rule-width：線の太さ。初期値はmedium
• column-rule-style：線の種類。初期値はnone
• column-rule-color：線の色。初期値はcurrentcolorで、指定しなければ文字色と同じ色になる

border-width / border-style / border-colorと同じように、solidやdashedといった線の種類の値もborderと共通です。

.article {
  column-rule-width: 2px;
  column-rule-color: #c00;
  /* column-rule-styleがnoneのままなので線は描かれない */
}

borderとの違い

ここまで見るとborderと似ていますが、「線がどこに描かれるか」という点が違います。デモで確認してみましょう。

column-gapを32pxに固定して、column-rule-widthだけをスライダーで変えられるデモです。段の幅と、テキストが折り返す位置に注目しながら動かしてみてください。

線をどれだけ太くしても、段の幅も位置も、テキストの折り返しもまったく動きません。borderなら、線の太さのぶんだけレイアウト上の場所を取るので、要素や中身の幅・位置に影響します。対してcolumn-ruleの線は、隙間の中央に描かれ、レイアウト上の幅を一切取りません。段の幅も位置も、線がないときと変わらないのです。

段間に線を引く際の注意点

borderと違って線を太くしてもレイアウトを押し広げない点は扱いやすい性質ですが、裏を返せば注意点にもなります。線が隙間より太いと、レイアウトが押し広げられない代わりに、はみ出した部分がそのままコンテンツに重なるのです。次のデモで確認してみましょう。

今度はcolumn-rule: 16px solid #c00と太い線を指定して、column-gapだけをスライダーで変えられるようにしています。column-gapを狭くしていくと、線の太さである16pxを下回ったあたりから、線がテキストに食い込んでいきます。

線とテキストのあいだの間隔は、実質(column-gap - column-rule-width) / 2になります。column-gapから線の太さを引いた残りが、線の左右に均等に分かれると考えればよいでしょう。column-gapが32px、線が2pxなら、片側15pxずつの間隔が空きます。

ですので、column-gapとcolumn-rule-widthはセットで管理するとわかりやすいかもしれません。筆者としては、次のようにカスタムプロパティで一元化しておくとよいと考えています。

.article {
  --rule-width: 2px;
  --rule-space: 16px; /* 線とテキストのあいだの間隔 */
  column-count: 3;
  column-gap: calc(var(--rule-width) + var(--rule-space) * 2);
  column-rule: var(--rule-width) solid #c00;
}

線の太さと間隔を先に決めて、そこから必要なcolumn-gapをcalc()で計算しています。間隔は線の左右に1つずつ必要なので、線の太さに間隔の2つぶんを足した値がcolumn-gapになるわけです。デモで動かしてみましょう。

--rule-widthを大きくしても、線とテキストのあいだの間隔は--rule-spaceのまま保たれます。対してcolumn-gapを固定値にしていると、レイアウトこそ動かないものの、線を太くしたぶんだけ間隔が狭くなってしまうのです。

2026年の変化：CSS Gap Decorations

ここまでは段組みの話でしたが、「隙間の中央に、レイアウトに影響を与えずに線を引く」という仕組みは、段組みだけのものである必要はありません。CSS GridやFlexboxのgapが空けるのも、同じくアイテムのあいだの隙間です。

そう考えて仕様が拡張されたのがCSS Gap Decorationsです。変わったのは大きく次の3つです。

• column-ruleが、段組みだけでなくCSS Grid / Flexboxのコンテナーの隙間にも適用されるようになった
• 横方向の隙間に線を引くrow-ruleが加わった
• 縦横両方の線をまとめて指定するruleショートハンドが加わった

row-ruleもrow-rule-width / row-rule-style / row-rule-colorという構成で、初期値もcolumn-ruleと同じです。

これらのプロパティは特定のレイアウト専用のものではなく、段組み・CSS Grid・Flexboxのいずれにも共通して適用されます。ただし段組みには横方向の隙間が基本的にないため、row-ruleが活躍するのはCSS GridとFlexboxということになります。

サポート状況は次のとおりです（2026年8月現在）。

この表はあくまで、CSS GridやFlexboxの隙間に線を引くという新しい部分についてのものです。段組みでのcolumn-ruleは全ブラウザで長年サポートされていて、CSS Gap Decorationsで挙動が変わることもありません。今回学んだ内容は、そのまますべてのブラウザで使えます。

なお、新機能に対応しているかを@supportsで判定する場合には落とし穴があります。これは次回、フォールバックの書き方と併せて解説します。

ここまでのまとめ

今回は、段組みのcolumn-ruleを題材に、CSS Gap Decorationsの土台となる考え方を解説しました。要点は次のとおりです。

• column-ruleはwidth / style / colorをまとめたショートハンドで、値の書き方はborderと共通
• 個別のプロパティで書くときはcolumn-rule-styleの指定を忘れない（初期値はnone）
• borderが要素に付く線なのに対して、column-ruleの線は隙間の中央に描かれ、レイアウト上の幅を取らない
• そのため、線が隙間より太いとコンテンツに重なる。column-gapとcolumn-rule-widthはセットで管理する

borderは要素に付ける線、column-ruleは隙間に引く線です。書き方が似ているぶん混同しやすいのですが、「要素に線をつける」のではなく「隙間に線を引く」という発想がわかっていれば、次回以降の話も理解しやすくなるはずです。

冒頭に挙げた「li + liにborderで区切り線」も、要素に線を付ける発想でした。次回は、CSS GridやFlexboxでcolumn-ruleとrow-ruleを使っていきます。折り返すリストの区切り線をborderで作ると行頭に線が残ってしまう問題が、CSS Gap Decorationsではどう解決されるのかを見ていきましょう。