隙間に線を引くcolumn-rule/row-rule

全3回

これまで「段組みの段と段のあいだに線を引くためのプロパティ」とされてきたcolumn-ruleが、CSS GridやFlexboxで`gap`が空ける隙間にも線を引けるようになりました。borderとの違いも含め、この「隙間に線を引く」仕組みを解説します。

最終回 線の見え方を作り込むrule-visibility-itemsとrule-inset

最終回は、空いている領域に線を出さない指定、線の端の調整、隙間ごとに違う線を引く方法を解説します。

第2回 CSS GridとFlexboxで区切り線を引くcolumn-ruleとrow-rule

第2回は折り返すリストの区切り線を題材に、機能検出の落とし穴と交点の制御を解説します。

第1回 column-ruleの基本とborderとの違い

段組みの段間に線を引くcolumn-ruleが、CSS GridやFlexboxでも使えるようになりました。第1回は従来のcolumn-ruleを題材に、「隙間に線を引く」考え方とborderとの違いを押さえます。