column-rule:段組み要素の段と段の間に引かれる罫線のスタイルを一括で指定する

初期値 各プロパティの初期値
適用対象 段組み要素
継承 しない
アニメーション <color>値、離散値、<length>値
対応ブラウザ caniuseで確認

column-ruleプロパティの説明

column-ruleは、段組み要素の段と段の間に引かれる罫線の太さ、形状、色を一括で指定します。基本的な仕様はborderと同じです。初期値では表示されない設定であるため、装飾する場合には省略できない値があります。

column-ruleで操作できるのは、以下のプロパティです。記述する順序は任意ですが、太さ、形状、色であることが多いようです。

column-ruleに指定できる値

<'column-rule-color'>
段組み要素の罫線の色を表します。指定できる値は<color>値です。初期値はcurrentcolorとなっており、border-colorと同じ仕様です。
<'column-rule-style'>
段組み要素の罫線の形状を表します。指定できる値はあらかじめ用意されているキーワードです。初期値はnoneとなっており、border-styleと同じ仕様です。
<'column-rule-width'>
段組み要素の罫線の太さを表します。指定できる値は<length>値または、あらかじめ用意されているキーワードです。初期値はmediumとなっており、border-widthと同じ仕様です。

column-ruleの使い方とサンプル

column-ruleプロパティの構文は以下の通りです。

CSS
/* 形状のみ指定 */
column-rule: solid;

/* 太さ | 形状 */
column-rule: 1px solid;
column-rule: medium dotted;

/* 形状 | 色 */
column-rule: solid #f00;
column-rule: dashed blue;

/* 太さ | 形状 | 色 */
column-rule: 1px dotted #999;
column-rule: thick double black;

/* グローバル値 */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: unset;

column-ruleの実例

それでは実際にcolumn-ruleプロパティの書き方を見ていきましょう。column-countで要素を段組みにして罫線を加えてみます。この時、要素の外周に引かれる境界線とは別の部分に装飾が加えられることに注目して下さい。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box > p {
	margin-top: 1rem;
	padding: .3rem;
	background: #fff;
	column-count: 3;
}
#cr_1 {
	column-rule: none;
}
#cr_2 {
	column-rule: thin solid black;
}
#cr_3 {
	column-rule: 9px double #09f;
}
HTML
<section class="samp_box">
	<h2>column-rule: none;</h2>
	<p id="cr_1">
		あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
		あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
	</p>
	<h2>column-rule: thin solid black;</h2>
	<p id="cr_2">
		あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
		あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
	</p>
	<h2>column-rule: 9px double #09f;</h2>
	<p id="cr_3">
		あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
		あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
	</p>
</section>

column-ruleに関連するCSSプロパティ

段組み・カラムレイアウト
align-content flexコンテナ内の縦に余白がある場合にflexアイテムの並べ方を指定する
align-items flexコンテナ内に含まれる全てのflexアイテムに対して揃える位置を指定する
align-self flexコンテナ内にあるflexアイテムの位置揃えを個別に指定する
columns 段組み要素に関するプロパティを一括で指定する
column-count 段組み要素の内容を分割する数を指定する
column-fill 段組み要素の高さに対して内容をどのように分配するかを指定する
column-gap 段組み要素の段と段の隙間を指定する
column-rule 段組み要素の罫線のスタイルを一括で指定する
column-rule-color 段組み要素の段と段の間に引かれる罫線の色を指定する
column-rule-style 段組み要素の段と段の間に引かれる罫線の形状を指定する
column-rule-width 段組み要素の段と段の間に引かれる罫線の太さを指定する
column-span 段組み要素の中で全ての段にまたがるレイアウトを指定する
column-width 段組み要素の段に対して目安の幅を指定する
flex フレックス・アイテムの伸縮率や基準となる寸法を一括で指定する
flex-basis フレックス・アイテムの基準となる寸法を指定する
flex-direction フレックス・コンテナの主軸方向やアイテムの並び順を指定する
flex-flow フレックス・コンテナがアイテムをレイアウトするフローをまとめて指定する
flex-grow フレックス・アイテムが伸長する倍率を指定する
flex-shrink フレックス・アイテムが伸縮する倍率を指定する
flex-wrap フレックス・コンテナに入り切らないアイテムの折り返し方法を指定する
gap コンテナに含まれるアイテムの行や列の隙間を指定する
grid-area グリッドアイテムの配置に関する基準を一括で指定する
grid-auto-columns 暗黙的に作成されたグリッド列のサイズを制御する
grid-auto-flow グリッドアイテムの配置方法を指定する
grid-auto-rows 暗黙的に作成されたグリッド行のサイズを制御する
grid-column-end グリッドアイテムを配置する祭に列方向の終了位置を指定する
grid-column-start グリッドアイテムを配置する祭に列方向の開始位置を指定する
grid-column グリッドレイアウトのカラムに関する指定を行う
grid-row-end グリッドアイテムを配置する祭に行方向の終了位置を指定する
grid-row-start グリッドアイテムを配置する祭に行方向の開始位置を指定する
grid-row グリッドレイアウトの行に関する指定を行う
grid-template-areas グリッドレイアウトのテンプレートに関する指定を行う
grid-template-columns グリッドレイアウトのテンプレートに関する指定を行う
grid-template-rows グリッドレイアウトのテンプレートに関する指定を行う
grid-template グリッドレイアウトのテンプレートに関する指定を行う
grid グリッド関連の値を一括で指定する
justify-content flexboxコンテナ内でのボックスの詰め方を指定する
order flexbox内のボックスの配置順序を指定する