3カラムに並んだカードの間に、縦の区切り線を1本入れたい。デザインとしてはそれだけの指示なのに、実装を始めると急に面倒になります。カードに border-right を付けて、最後の1枚だけ :last-child で消して、折り返したときに末尾が変わるので :nth-child を足して、レスポンシブでカラム数が変わるたびに条件を書き直す。
線を引きたいのはカードではなく、カードとカードの「間」なのに、CSS には隙間を直接装飾する手段が長いあいだありませんでした。だから隣の要素を借りて、そこに線を描いていた。区切り線のためだけに空の div を挟むという回避策も、実務では珍しくありません。
ここに正面から答える仕様が、Chrome と Edge の 149 で安定版に入りました。CSS Gap Decorations です（Gap decorations: Now available in Chromium — Chrome for Developers）。
Gap Decorations は、隙間そのものに線を引く
やることは単純で、grid や flex コンテナの gap に対して線を指定するというものです。
もともと column-rule というプロパティは存在していましたが、使えるのはマルチカラムレイアウト（columns）に限られていました。今回、これが grid と flex のコンテナでも効くようになり、あわせて横方向の隙間に線を引く row-rule が新設されました。
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
/* 縦の隙間に線を引く */
column-rule: 1px solid #d8d8d8;
/* 横の隙間にも引く */
row-rule: 1px solid #d8d8d8;
}これだけです。カード側には何も足しません。:last-child の打ち消しも、折り返しを考慮した :nth-child も要らない。カラム数が変わっても、要素が増減しても、線は隙間があるところにだけ現れます。
線の見た目を細かく調整するためのプロパティも一式そろっています。線を隙間の交点で途切れさせるかどうかを決める row-rule-break / column-rule-break、線を隙間の端からどれだけはみ出させるかの row-rule-outset / column-rule-outset、縦横の線が交わるときにどちらを上に描くかの gap-rule-paint-order などです。従来の実装で最も手間だった「交点をどう見せるか」が、宣言で片づくようになりました。
いま本番で使えるのか
ここは正直に見ておく必要があります。現時点で対応しているのは Chromium 系のみです。Chrome と Edge の 149 以降、およびそれに追随する Chromium ベースのブラウザで動きます。Safari と Firefox は未対応で、したがって Baseline には達していません。
つまり「そのまま書けば全ユーザーに同じ見た目が届く」段階ではありません。とはいえ、この仕様は使い方次第で扱いやすい部類に入ります。理由は、区切り線がたいてい装飾であって、情報の伝達に必須ではないからです。
| 用途 | 未対応ブラウザでの影響 | 判断 |
|---|---|---|
| カード間の視覚的な区切り | 線が出ないだけで、レイアウトは崩れない | そのまま使ってよい |
| 表組みの罫線に相当する区切り | 行と列の対応が読み取りにくくなる | 従来手法かフォールバックが必要 |
| デザインの主役になっている装飾線 | 意図した印象が伝わらない | 従来手法を使う |
1行目のケース、つまりあってもなくても内容は読める線であれば、Gap Decorations をそのまま書いて、未対応ブラウザでは線が出ないという割り切りが成立します。プログレッシブエンハンスメントとして素直な形です。@supports で分岐させれば、未対応環境にだけ従来の実装を当てることもできます。
@supports not (row-rule: 1px solid black) {
.cards > * + * {
border-top: 1px solid #d8d8d8;
}
}なお、未対応ブラウザ向けのポリフィルも開発が進んでいます。他のブラウザエンジンもこの仕様に前向きな姿勢を示しているため、対応範囲は今後広がっていく見込みです。
発注する側が決めておくと早いこと
サイト制作を外部に頼む立場だと、この手の話は「制作会社が判断すること」に見えます。ただ、1点だけ発注側が決めておくと進行が速くなります。対応ブラウザの範囲です。
「主要ブラウザ最新版」という書き方の要件定義をよく見かけますが、これは今回のような仕様が出てきたときに何も決めていないのと同じ状態になります。Chrome では線が出て Safari では出ない、という結果を見て「バグではないか」という指摘が出る。制作側は仕様どおりだと説明する。この往復に時間が溶けます。
決めておくとよいのは次の2点です。
- どのブラウザを「同じ見た目が必要」とするか（多くの場合、実際のアクセス解析を見れば数分で決まります）
- 見た目の差が許容される範囲はどこまでか（装飾は許容、レイアウト崩れは不可、など）
これが決まっていれば、新しい CSS 機能を使うかどうかは制作側が判断できます。標準機能に寄せるかツールに頼るかという同種の判断軸は2026年、Tailwindか標準CSSか、JavaScript に頼っていた表現を CSS に戻す例はCSSネイティブカルーセルで扱っています。箱の形そのものを CSS で定義する border-shape については斜めに切れたセクションが画像になっているを参照してください。
手を付けるなら
既存サイトを一斉に書き換える種類の変更ではありません。効くのは、これから作る画面と、区切り線まわりで実装が入り組んでいる箇所です。
:last-child や :nth-child で線を打ち消している CSS が残っているなら、そこは改修のたびに壊れる場所です。カラム数を変えた、要素を1つ足した、という程度の変更で崩れる。次にその画面を触るとき、区切り線の実装だけ Gap Decorations に寄せておくと、以降の改修が軽くなります。
自社サイトのどこが改修のたびに崩れる作りになっているのか、リニューアルの前に整理したいという場合は、グリームハブのHP制作・リニューアル相談で承っています。要件によって最適な構成は変わるため、個別にお見積りします。お問い合わせからご相談ください。
