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

こんにちは（・∀・）

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

概要

column-ruleプロパティはcolumn-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの値を一括で指定できるプロパティです。半角スペースで区切って順不同で指定する事ができます。省略された値はそのプロパティの初期値に設定されます。

.sample {
  column-rule: 2px solid blue;
}

適用要素

段組されている要素

指定できる値

column-rule-widthプロパティで指定できる値
column-rule-styleプロパティで指定できる値
column-rule-colorプロパティで指定できる値

初期値

個別プロパティの初期値

サンプル

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, nisi eu semper congue, dui ante varius nunc, in tempus ex lorem sed urna. Sed placerat pretium nibh, ac vulputate risus posuere eget. Donec felis lacus, elementum non augue ac, tincidunt placerat erat. Aenean posuere arcu nec est sodales convallis. Aliquam in purus vel metus tincidunt euismod sed eu quam. Etiam quis elit vel sapien varius tincidunt. Morbi accumsan posuere purus ultricies euismod. Nulla dictum eget enim luctus dictum. Praesent porta tellus erat, vitae tincidunt orci ornare a. Donec semper blandit turpis sed gravida. Pellentesque dapibus luctus dolor, sit amet tempor mauris condimentum quis. Suspendisse ac condimentum ipsum. Vivamus vitae magna tortor. Mauris nec lobortis dui.
</p>

CSS

.demo {
  column-count: 2;
  column-rule: 2px solid #d49fc2;
}

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

Result