値
次の形式で値を指定することができます。
- 指定なし - colorプロパティの値を継承。初期値。
- カラーコード - 段組の間に細い線を表示。
- カラー名 - 段組の間に細い線を表示。
パターン1
値を指定しない例です。
CSS コード例
section p {
-moz-column-count: 3;
column-count: 3;
}
.box1 p {
-moz-column-rule-style: solid;
column-rule-style: solid;
}HTML コード例
<section class="box1">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン2
値をカラーコードで指定している例です。
CSS コード例
section p {
-moz-column-count: 3;
column-count: 3;
}
.box2 p {
-moz-column-rule-style: solid;
-moz-column-rule-color: #239fff;
column-rule-style: solid;
column-rule-color: #239fff;
}HTML コード例
<section class="box2">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン3
値をカラー名で指定している例です。
CSS コード例
section p {
-moz-column-count: 3;
column-count: 3;
}
.box3 p {
-moz-column-rule-style: solid;
-moz-column-rule-color: red;
column-rule-style: solid;
column-rule-color: red;
}HTML コード例
<section class="box3">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>