基礎

コラムルールスタイル

column-rule-styleプロパティ

最終更新日：2023-10-29
公開日：2016-09-06

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

初期値

none
継承

不可
適用できる要素

段組の要素

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>

記事一覧