このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

column-rule:段組みの罫線CSS3で追加

記事Mar. 13th,2021
マルチカラムレイアウトで段組みの段を仕切る罫線を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 column-rule-width: medium;
column-rule-style: none;
column-rule-color: currentcolor;
適用対象 マルチカラム・コンテナ
継承 しない
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

column-rule”プロパティはマルチカラムレイアウトで段組みの段を仕切る罫線の太さや色、見た目を指定する以下のプロパティの一括指定プロパティです。

マルチカラム・レイアウト

罫線は段の間の隙間の中央に描画されますが、空間は占有しません。段の間の隙間はcolumn-gap”プロパティで指定でき、既定では1emです。

罫線はマルチカラム・コンテナとなる要素のボーダーの上に描画されます。要素がスクロール可能である場合、ボーダー背景はスクロールされませんが、罫線はコンテンツとともにスクロールされます。

罫線は2つの段がどちらもコンテンツを持つ場合にだけその間に表示されます。

サンプルコード

div { column-rule: 5px dotted rgb(204,153,204);}

<'column-rule-width'>”値<'column-rule-style'>”値<'column-rule-color'>”値を半角スペース(“ ”)で区切って1個ずつ指定できます。値を記述する順番は自由で、初期値のままで良い値は省略できます。ただし、<'column-rule-style'>”値を指定しない場合は既定値が罫線を表示しない“none”のため、罫線が表示されません。

使用例

段組みの罫線を指定する

.multi-column {
column-count: 3; column-rule: 5px dotted rgb(204,153,204);
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク