column-ruleプロパティの意味と使い方

column-ruleプロパティは、段組みの各段の間に表示する罫線のプロパティをまとめて指定するショートハンドです。CSS3におけるcolumn-rule-colorプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。

段組みの罫線の幅とスタイル、色をまとめて指定する

column-rule

{ column-rule 【カラム・ルール】 : -width -style -color; }

column-ruleプロパティは、段組みの各段の間に表示する罫線のプロパティをまとめて指定するショートハンドです。

初期値	各プロパティに準じる
継承	なし
適用される要素	段組みされた要素
モジュール	CSS Multi-column Layout Module

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できます。省略した場合は、各プロパティの初期値が適用されます。また、transparentのみを指定すると、罫線は完全な透明になります。

2015年1月時点では、Firefoxでこのプロパティを適用するには接頭辞に-moz-を、Google Chrome、Safariなどでは接頭辞に-webkit-を記述します。

.section .item {
  column-count: 3;
  column-rule: 2px dotted #ccc;
}

上の例で指定したcolumn-ruleプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.section .item {
  column-count: 3;
  column-rule-width: 2px;
  column-rule-style: dotted;
  column-rule-color: #ccc;
}