【CSS3リファレンス】column-rule-width

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-rule-widthです。

概要

column-rule-widthプロパティを使用して段組の境界線幅を指定する事ができます。

.sample {
  column-rule-width: 2px;
}

適用要素

段組されている要素

指定できる値

数値+単位

数値に単位を付けて境界線の幅を指定

thin、medium、thick

細い・中位・太い

初期値

medium

サンプル

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec sem at neque condimentum malesuada non ut nunc. Ut mauris urna, finibus a mauris pulvinar, ornare efficitur elit. Donec in magna sit amet lectus lacinia rhoncus a non quam. Duis ligula velit, vulputate non nisi nec, tempus ornare mi. Aliquam vitae sem sodales, semper diam et, fringilla diam. Vivamus lacinia finibus metus, et euismod leo. Fusce ut leo mollis, egestas augue vel, maximus massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Duis in tellus orci. Cras quis leo eu magna interdum cursus vitae et erat. Phasellus aliquet hendrerit accumsan.
</p>

CSS

.demo {
  -webkit-column-count: 2;
  -webkit-column-rule-color: #d49fc2;
  -webkit-column-rule-style: solid;
  -webkit-column-rule-width: 2px;
  column-count: 2;
  column-rule-color: #d49fc2;
  column-rule-style: solid;
  column-rule-width: 2px;
}

サンプルのCSSはVendor-Prefixを使用した例も載せてあります。

Result