ほんっとにはじめての HTML5 と CSS3

マルチカラムの各カラム間の罫線に関するプロパティの続きです。
今回は column-rule-widthプロパティを使ってみよう。

前回の column-rule-styleプロパティは、各カラムの間の罫線の「スタイル」を決めるんでしたね。
これはデフォルト値が「none」や、罫線非表示の「hidden」以外の値を指定すれば罫線が表示されるんでした。

そのときの罫線の「幅」は「medium（中くらいの太さ。3px）」になっています。
「medium」が column-rule-widthプロパティのデフォルト値だから。
罫線の「幅」を変えたいなら column-rule-widthプロパティで「medium」以外の値を指定します。

1. column-rule-widthプロパティの値
2. column-rule-widthプロパティを使ってみる
3. 罫線は column-gap とレイヤーっぽく重なっている

マルチカラム関連のプロパティは、下記のように記事を分けます。

【57-1】マルチカラムのカラム数を決める column-countプロパティ

【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

【57-3】カラム数と幅をまとめて指定する columnsショートハンド

【58】各カラムの間隔を指定する column-gapプロパティ

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

【59-2】カラム間の罫線の幅を指定する column-rule-width　←今日はココ

【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ

【59-4】カラム間の罫線をまとめて指定する column-rule

【60】マルチカラム内で段抜きができる column-spanプロパティ

【61】各カラムの埋め方を決める column-fillプロパティ

（ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか

参考：
・CSS Multi-column Layout Module Level 1 | W3C Working Draft
・CSS 段組みレイアウト | MDN

column-rule-widthプロパティの値

column-rule-widthプロパティの値は以下のものがあります。

column-rule-widthプロパティ
キーワード	medium（ミディアム、中くらいの線。3px）がデフォルト値。 thin（細い線。1px）、 thick（太い線。5px）
<length>	正の数値に単位（px, em, rem など）を付けて指定（マイナスの値不可）
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	マルチカラムのコンテナ （column-count, column-width, columns を指定した要素）

column-rule-widthプロパティを使ってみる

値の thin、medium、thick のキーワードと、px や em の単位を付けた数値で指定してみます。
線のスタイル（column-rule-style）はすべて solid（実線）にしています。

サンプルのHTMLはこちら。

<div class="sample sample1">
<p>
<b>thin</b><br>
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-width
プロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、
thickのキーワードか、単位付きの数値で線幅を指定できます。</p>
</div>
<div class="sample sample2"> <!--クラス名を sample2.3.4..と変えていってます-->
<!--略-->
<div>
<div class="sample sample3">
<!--略-->
<div>
<div class="sample sample4">
<!--略-->
<div>
<div class="sample sample5">
<!--略-->
<div>

サンプルのCSSはこちら。

.sample {
	column-count:2;
	column-gap:2em;
	column-rule-style:solid;
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
    margin:0}
.sample1 {column-rule-width:thin}
.sample2 {column-rule-width:medium}
.sample3 {column-rule-width:thick}
.sample4 {column-rule-width:7px}
.sample5 {column-rule-width:.5em}

罫線は column-gap とレイヤーっぽく重なっている

ここまでのサンプルを見て気がついたかもしれませんが、カラム間に罫線を入れても、罫線を太くしても、カラム同士の空き（column-gap）が広がったりしませんね。

column-rule と column-gap との関係は、「border」と「margin や padding」との関係と違って、レイヤーっぽく重なっているので罫線が太くなっても空きが広がったりしません。

サンプルで試してみます。
column-gapの領域がわかりやすいように <p>要素に背景色をつけています。
（background:#rgba(255,204,204,.5) と指定。ピンクの半透明です）
まだ column-rule-width を指定していないので、幅は「meium」。
column-gap は「2em」にしています。

下のサンプルでは、column-gap: 2em; column-rule-width: 2em; と指定。
カラム間の空きと罫線を同じ幅にしました。
column-gapは広がっていませんね。ギャップのスペースに罫線が収まっています。

column-gapよりも罫線の幅を太くしたらどうなるでしょう？
下のサンプルでは、column-gap:2em; column-rule-width:5em; と指定。

罫線が column-gapより太いと、当然はみ出します。

構造的には下図のように、罫線より上に カラム指定をした要素が乗っかっています。
カラム間の空き（column-gap）は当然、罫線の上になります。
こんな構造なので、罫線の有無や罫線の太さによって column-gap が影響を受けることがないんですね。

上のサンプルは <p>要素に背景色をつけているので文字が読めますが、
背景色がなければ、下のサンプルように文字が読めなくなる場合があるので注意が必要。
（罫線の色はデフォルトで文字色なので）

罫線の色を薄くすれば読めます。
（まあ gapより罫線を太くすることは、めったに無いだろうけどw）

マルチカラムの罫線の「色」を変えるには column-rule-colorプロパティを使います。

次回予告

というわけで次回は、column-rule-colorプロパティを使ってカラムの罫線の「色」を変えてみよう。

関連記事

• （ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
• 【62-1】Grid Layout の grid-template-rows, grid-template-columns
• （ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか
• 【61】各カラムの埋め方を決める column-fillプロパティ
• 【60】マルチカラム内で段抜きができる column-spanプロパティ
• 【59-4】カラム間の罫線をまとめて指定する column-rule
• 【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ
• 【59-2】カラム間の罫線の幅を指定する column-rule-width
• 【59-1】カラム間の罫線のスタイルを指定する column-rule-style
• 【58】各カラムの間隔を指定する column-gapプロパティ
• 【57-3】カラム数と幅をまとめて指定する columnsショートハンド
• 【57-2】マルチカラムのカラム幅を決める column-widthプロパティ
• 【57-1】マルチカラムのカラム数を決める column-countプロパティ
• 【56】ユーザーのテキスト選択などを制御する user-selectプロパティ
• 【55】ボックスのリサイズを可能にする resizeプロパティ