HTML & CSS

リファレンス

CSS

コラム ルール ウィズ

column-rule-widthプロパティ

段組の間に引く線の太さを指定するプロパティです。

  • 初期値

    medium

  • 継承

    不可

  • 適用できる要素

    段組の要素

次の値を指定することができます。
2016年9月時点では、Firefoxで使用するにはベンダープレフィックス「-moz-」をつける必要があります。

  • thin – 段組の間に細い線を表示。
  • medium – 段組の間に線を表示。初期値。
  • thick – 段組の間に太い線を表示。
  • 数値 + 任意の単位 – 段組の間に指定した値の線を表示.

パターン1

値に「thin」を指定している例です。

CSSコード例

<style>
section p {
	-moz-column-count: 3;
	column-count: 3;
}
.box1 p {
	-moz-column-rule-width: thin;
	-moz-column-rule-style: solid;
	-moz-column-rule-color: #239fff;
	column-rule-width: thin;
	column-rule-style: solid;
	column-rule-color: #239fff;
}
</style>
<section class="box1">
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

表示例:

thinを指定


パターン2

値に「medium」(初期値)を指定している例です。

CSSコード例

<style>
section p {
	-moz-column-count: 3;
	column-count: 3;
}
.box2 p {
	-moz-column-rule-width: medium;
	-moz-column-rule-style: solid;
	-moz-column-rule-color: #239fff;
	column-rule-width: medium;
	column-rule-style: solid;
	column-rule-color: #239fff;
}
</style>
<section class="box2">
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

表示例:

mediumを指定

パターン3

値に「thick」を指定している例です。

CSSコード例

<style>
section p {
	-moz-column-count: 3;
	column-count: 3;
}
.box3 p {
	-moz-column-rule-width: thick;
	-moz-column-rule-style: solid;
	-moz-column-rule-color: #239fff;
	column-rule-width: thick;
	column-rule-style: solid;
	column-rule-color: #239fff;
}
</style>
<section class="box3">
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

表示例:

thickを指定

パターン4

値を「数値 + px」で指定している例です。他にも「em」など任意の単位で指定することが可能です。

CSSコード例

<style>
section p {
	-moz-column-count: 3;
	column-count: 3;
}
.box4 p {
	-moz-column-rule-width: 10px;
	-moz-column-rule-style: solid;
	-moz-column-rule-color: #239fff;
	column-rule-width: 10px;
	column-rule-style: solid;
	column-rule-color: #239fff;
}
</style>
<section class="box4">
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

表示例:

10pxを指定

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。