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

マルチカラムの続きです。
column-rule-styleプロパティは、各カラムの間に罫線を入れることができます。

「rule（ルール）」はもとは「定規じょうぎ（=ものさし）」のことで、そこから「規則」「ルール」という意味で使われますが、印刷用語では「罫線」を指します。

カラムの罫線のために4つのプロパティが用意されています。
・column-rule-styleプロパティ（罫線の「スタイル」を指定）
・column-rule-widthプロパティ（罫線の「幅」を指定）
・column-rule-colorプロパティ（罫線の「色」を指定）
・column-ruleショートハンドプロパティ（上記3つの値をまとめて指定）

マルチカラムの罫線を表示したければ、罫線の「スタイル」を指定する column-rule-styleプロパティの値を none と hidden 以外にすればOK。
というわけで今回はまず、column-rule-styleプロパティを使ってみよう。

1. column-rule-styleプロパティの値
2. column-rule-styleプロパティを使ってみる

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

【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-styleプロパティの値

column-rule-styleプロパティの値は全部キーワードです。
borderプロパティと同じキーワードなので覚えやすいですね。

column-rule-styleプロパティ
キーワード	none がデフォルト値。罫線は非表示（幅（column-rule-width）が0なんだそうです） hidden = 罫線は表示されず幅（column-rule-width）が0になる。none との違いは、テーブルセルなどの他の罫線が重なっている時、noneは他の罫線が優先されるが、hiddenはこっちの値が優先されるんだそうです。 solid = 実線 double = 二重線 dashed = 破線 dotted = 点線 groove = 立体的で凹んで見える線 ridge = 立体的で出っ張って見える線 inset = これで囲むことによってボックスが凹んで見える線 outset = これで囲むことによってボックスが出っ張って見える線
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

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

column-rule-styleプロパティのデフォルト値は「none」です。
前回までのサンプルでは、このプロパティを指定していないので、デフォルトの column-rule-style: none になっていて、罫線は非表示でした。

というわけで、column-rule-styleプロパティの値を none と hidden 以外に指定してやれば罫線が表示されるのよね。

どんな罫線が表示されるのか、none と hidden 以外を全部使ってみます。

サンプルでは column-rule-styleプロパティのみ指定して、罫線の色や幅は指定していません。
罫線の色や幅は、指定しなければそれぞれデフォルト値になります。
色は「currentColor（文字色）」線幅は「ミディアム」がデフォルトです。
（罫線の色や幅の指定については、次回以降に書きます）

groove, ridge, inset, outset は、単なる実線に見えます。この4つは、線の色が濃すぎたり幅が狭いと立体的に見えないんです。
色や幅を変えるとこんな感じ（<div>要素にborderプロパティで指定）

ということで、罫線の色を column-rule-colorプロパティで変えて、幅も column-rule-widthプロパティで太くしてみました。
（ま、1本線なので あんまりパッとしませんけどねw）

サンプルのHTMLはこちら。（冒頭の8個並んだやつ）

<div class="sample sample1">
<p><b>solid</b><br>
マルチカラムの罫線（column-rule）は、column-rule-styleプロパティのデフォルト値
が「none」なので、column-rule-styleプロパティを none, hidden 以外に指定しなけ
れば表示されません。値はすべてキーワード。実線なら solid、点線なら dotted など
と、borderプロパティと同じキーワードで指定できます。</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>
<div class="sample sample6">
<!--略-->
<div>
<div class="sample sample7">
<!--略-->
<div>
<div class="sample sample8">
<!--略-->
<div>

サンプルのCSSはこちら。（冒頭の8個並んだやつ）

.sample { /*sampleで全部の共通の指定をしています*/
	column-count:2;
	column-gap:2em;
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
	margin:0}
.sample1 {column-rule-style:solid}
.sample2 {column-rule-style:double}
.sample3 {column-rule-style:dashed}
.sample4 {column-rule-style:dotted}
.sample5 {column-rule-style:groove}
.sample6 {column-rule-style:ridge}
.sample7 {column-rule-style:inset}
.sample8 {column-rule-style:outset}

次回予告

それじゃあ次回は、カラムの罫線の「幅」を指定する column-rule-widthプロパティを使ってみましょう。
（その次の回は「色」を指定する column-rule-colorプロパティです）

関連記事

• 【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プロパティ
• 【54】テキストが はみ出る場合に「...」を付ける text-overflow