column-rule-widthプロパティ

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

column-rule-widthプロパティに指定できる値

column-rule-widthプロパティは以下の値を指定することができます。

以降はそれぞれの値を指定するコード例とブラウザの表示例を紹介していきます。

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

section p {
  column-count: 3;
}
.box1 p {
  column-rule-width: thin;
  column-rule-style: solid;
  column-rule-color: #239fff;
}

<section class="box1">
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

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

section p {
  column-count: 3;
}
.box2 p {
  column-rule-width: medium;
  column-rule-style: solid;
  column-rule-color: #239fff;
}

<section class="box2">
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

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

section p {
  column-count: 3;
}
.box3 p {
  column-rule-width: thick;
  column-rule-style: solid;
  column-rule-color: #239fff;
}

<section class="box3">
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>

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

section p {
  column-count: 3;
}
.box4 p {
  column-rule-width: 10px;
  column-rule-style: solid;
  column-rule-color: #239fff;
}

<section class="box4">
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。</p>
</section>