column-ruleプロパティ

段組の間に表示する線のスタイル、太さ、色を一括指定するプロパティです。

column-ruleプロパティに指定する値

column-ruleプロパティでは3種類のプロパティの値を指定することができます。
任意の順序で指定可能です。

以降はそれぞれの値を指定するコード例とブラウザの表示例を紹介していきます。

線のスタイルを「solid」、太さを「5px」で指定している例です。
色は指定していないため、親要素のcolorプロパティの値を継承します。

section p {
  column-count: 3;
}
.box1 p {
  column-rule: solid 5px;
}

<section class="box1">
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

線のスタイルを「dotted」、色を「blue」、そして太さを「thick」で指定している例です。

section p {
  column-count: 3;
}
.box2 p {
  column-rule: blue dotted thick;
}

<section class="box2">
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>