column-rule-styleプロパティに指定できる値
column-rule-styleプロパティは以下の値を指定することができます。
値 | 内容 |
---|---|
none | 初期値。線を表示しない。 |
hidden | 線を表示しない。 |
dashed | 点線を表示。 |
dotted | 細かい点線を表示。 |
solid | 1本の実線を表示。 |
double | 2本の実線を表示。 |
groove | 立体的に凹みのある線を表示。 |
ridge | 立体的な線を表示。「groove」とは反対に凸みが出る。 |
inset | 立体的に凹みのある線を表示。 |
outset | 立体的に凸みのある線を表示。 |
以降はそれぞれの値を指定するコード例とブラウザの表示例を紹介していきます。
パターン1: none
値に「none」(初期値)を指定している例です。
線は表示されません。
CSS コード例
section p {
column-count: 3;
}
.box1 p {
column-rule-style: none;
column-rule-color: #239fff;
}
HTML コード例
<section class="box1">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン2: hidden
値に「hidden」を指定している例です。
線は表示されません。「none」との違いは、テーブル要素における境界衝突の解決方法です。
CSS コード例
section p {
column-count: 3;
}
.box2 p {
column-rule-style: hidden;
column-rule-color: #239fff;
}
HTML コード例
<section class="box2">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン3: dashed
値に「dashed」を指定している例です。
点線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box3 p {
column-rule-style: dashed;
column-rule-color: #239fff;
}
HTML コード例
<section class="box3">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン4: dotted
値に「dotted」を指定している例です。
細かい点線が表示されます。
CSS コード例
<style>
section p {
column-count: 3;
}
.box4 p {
column-rule-style: dotted;
column-rule-color: #239fff;
}
HTML コード例
<section class="box4">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン5: solid
値に「solid」を指定している例です。
実線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box5 p {
column-rule-style: solid;
column-rule-color: #239fff;
}
HTML コード例
<section class="box5">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン6: double
値に「double」を指定している例です。
2本の実線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box6 p {
column-rule-style: double;
column-rule-color: #239fff;
}
HTML コード例
<section class="box6">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン7: groove
値に「groove」を指定している例です。
立体的な線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box7 p {
column-rule-style: groove;
column-rule-color: #239fff;
}
HTML コード例
<section class="box7">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン8: ridge
値に「ridge」を指定している例です。
「groove」とは対照的となる、立体的な線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box8 p {
column-rule-style: ridge;
column-rule-color: #239fff;
}
HTML コード例
<section class="box8">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン9: inset
値に「inset」を指定している例です。
立体的な線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box9 p {
column-rule-style: inset;
column-rule-color: #239fff;
}
HTML コード例
<section class="box9">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>
パターン10: outset
値に「outset」を指定している例です。
「inset」とは対照的となる、立体的な線が表示されます。
CSS コード例
section p {
column-count: 3;
}
.box10 p {
column-rule-style: outset;
column-rule-color: #239fff;
}
HTML コード例
<section class="box10">
<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>