用語集を2段組みで見せたくて、区切り線をどう入れるか調べていたらcolumn-ruleというプロパティに行き着いた。
10年以上CSSを書いてきたのに、今回初めて知った。
border-rightとの違い
これまで段の間に線を入れたいとき、要素を1つずつborder-rightで区切るような書き方しか思いつかなかった。
この方式だと、項目数が変わるたびに「最後の要素だけ線を消す」判定が要るし、段組み自体を作っているのが自分ではなくcolumn-countだと、そもそもどこが列の境目かをCSS側で把握しにくい。
column-countで作った段組みに対してcolumn-rule: 1px solid #ddd;と1行足すだけで、この面倒がまるごと要らなくなる。
線は段組みコンテナが作る列に沿って描画され、位置もcolumn-gapの中央に自動配置される。列の境目を自分で数えたり、要素を分割したりする必要が一切ない。
実際に使ってみた場所
試しに、このブログでよく使う専門用語をまとめた用語集ボックスを新しく作り、そこにcolumn-ruleを適用してみた。
下がその実物。
このブログでよく出てくる用語
- FLOCSS
- CSSをFoundation/Layout/Component等に分けて管理する設計手法。
- ACF
- WordPressにカスタムフィールドを追加できるプラグイン。
- WP-CLI
- WordPressをコマンドラインから操作するツール。
- GA4
- Googleアナリティクスの現行バージョン。
- Cocoon
- このブログが親テーマとして使っている無料WordPressテーマ。
- Claude Code
- このブログの実装作業で使っているAIコーディングエージェント。
PC幅では2段組みになり、段の間に細い線が入る。
スマホ幅では1段に切り替わり、線も消える(1段しかないところに区切り線は不要なので)。実際に組んだSCSSはこれだけだ。
.c-glossary-box__item {
break-inside: avoid;
}
.c-glossary-box__list {
column-count: 2;
column-gap: 2em;
column-rule: 1px solid #ddd;
}
@media (max-width: 834px) {
.c-glossary-box__list { column-count: 1; column-rule: none; }
}break-inside: avoidは、1つの用語の途中で列が分かれてしまわないようにするための指定だ。
ブラウザ対応状況
今さら知ったくらいだから対応状況を心配したが、調べてみるとほぼ杞憂だった。
グローバル対応率97.27%(完全対応15.91%+部分対応81.36%)。Safariはバージョン10から完全対応、Chrome・Firefoxは古いバージョンから部分対応という形で使える。
IE9以前やOpera10のような、今は使われていないブラウザ以外は、部分対応も含めればほぼ問題なく使える計算になる。
向いている場面・向いていない場面
向いているのは、今回の用語集のように、短い項目がいくつも並ぶ箇所。
FAQ、用語集、短いニュース見出しの一覧あたりが定番だと思う。
画像やコードブロックを含む場合は、break-inside: avoidを指定すれば途中での分割自体は防げる。
ただ、どの項目がどの列に流れるかまでは細かく制御できないので、配置順を厳密に決めたい場合は素直にGridかFlexで組んだほうがいい。
まとめ
1行追加するだけで区切り線が入り、しかも要素を分割しなくていい。
今まで知らなかったのが単純に損だったと思うくらい、手軽なプロパティだった。
今後は、短い項目を並べる場面が出てきたら、まずcolumn-ruleで済ませられないか考えてみたい。
