HTML & CSS

column-rule-styleプロパティ

  1. 最終更新日:
  2. 公開日:

段組の間に表示する線のスタイルを指定するプロパティです。

  • 初期値

    none

  • 継承

    不可

  • 適用できる要素

    段組の要素

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

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

内容
none初期値。線を表示しない。
hidden線を表示しない。
dashed点線を表示。
dotted細かい点線を表示。
solid1本の実線を表示。
double2本の実線を表示。
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>
noneを指定
表示例

パターン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>
hiddenを指定
表示例

パターン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>
dashedを指定
表示例

パターン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>
dottedを指定
表示例

パターン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>
solidを指定
表示例

パターン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>
doubleを指定
表示例

パターン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>
grooveを指定
表示例

パターン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>
ridgeを指定
表示例

パターン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>
insetを指定
表示例

パターン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>
outsetを指定
表示例

記事一覧