Mar. 13th,2021
プロパティについて
概要
| 初期値 |
“column-rule-width: medium;” “column-rule-style: none;” “column-rule-color: currentcolor;” |
| 適用対象 | マルチカラム・コンテナ |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 一括指定が対象とする各プロパティの定義に依る |
| アニメーション | 一括指定が対象とする各プロパティの定義に依る |
“column-rule”プロパティはマルチカラムレイアウトで段組みの段を仕切る罫線の太さや色、見た目を指定する以下のプロパティの一括指定プロパティです。
罫線は段の間の隙間の中央に描画されますが、空間は占有しません。段の間の隙間は“column-gap”プロパティで指定でき、既定では“1em”です。
罫線はマルチカラム・コンテナとなる要素のボーダーの上に描画されます。要素がスクロール可能である場合、ボーダーと背景はスクロールされませんが、罫線はコンテンツとともにスクロールされます。
罫線は2つの段がどちらもコンテンツを持つ場合にだけその間に表示されます。
サンプルコード
div { column-rule: 5px dotted rgb(204,153,204);}
値
| 値 | 説明 |
|---|---|
| <'column-rule-width'> | “column-rule-width”プロパティの値 |
| <'column-rule-style'> | “column-rule-style”プロパティの値 |
| <'column-rule-color'> | “column-rule-color”プロパティの値 |
| 共通キーワード |
“<'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);
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
