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

マルチカラムの各カラム間の罫線に関するプロパティの続きです。
今回は、罫線関連を一括指定する column-ruleショートハンドプロパティを使おう。
罫線の「スタイル・幅・色」をこのプロパティでまとめて指定できます。

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

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

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

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

column-ruleプロパティ
キーワード	スタイル・幅・色それぞれのデフォルト値がデフォルト値。 column-rule-style: none column-rule-width: medium column-rule-color: currentcolor
構文	<'column-rule-style'> || <'column-rule-width'> || <'column-rule-color'> ||（二重バー）はすべて省略可能で1つは必要、順不同という意味。 ＊構文についての詳細は CSSの値の定義構文 | MDN をご覧ください。
グローバル値	inherit; 親のcolumnsの値を継承 initial; 継承した親の columnsの値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

指定の仕方は、borderプロパティと同じで、「スタイル」「幅」「色」を順不同で「半角スペース」で区切って並べるだけ。
値は3つとも書いても、2個でも、1個でもOK。
（borderプロパティはこちら→【13-1】borderと borderのショートハンド）

値を 2個か 1個にした場合、省略した値はデフォルト値になります。
（これ↑は全ショートハンドで同じルールです）

ですので少なくとも「スタイル」だけは書いておかないと、column-rule-style のデフォは「none」なので、罫線が表示されないよ。

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

では、column-ruleプロパティを使っていろいろ指定してみます。
スタイル・幅・色の3つの指定が1行で済むのでとってもラク。
borderプロパティと同じように、もうこのプロパティしか使わなそう。

サンプルのHTMLはこちら。

<div class="sample sample1">
<p>
<b>column-rule:double pink</b><br>
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの 
column-rule で指定できます。値は最低1個でもOK。省略された値はそれぞれのデフォルト
値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。</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;
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
	margin:0}
.sample1 {column-rule:double pink}
.sample2 {column-rule:beige 0.7em dotted}
.sample3 {column-rule:#aacf53 solid thick}
.sample4 {column-rule:dashed}
.sample5 {column-rule:solid hsla(210,80%,80%)}

次回予告

マルチカラムの各カラム間の「罫線」に関するプロパティはこれで終わりです。

次回は、マルチカラム内で段抜きができる column-spanプロパティを使ってみよう。

段抜きとは、段組みレイアウトの中で、タイトル文字などを複数の段にまたがらせるヤツです。

関連記事

• 【62-3】セルやエリアを一括指定する grid-templateショートハンド
• 【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
• （ちょっとメモ）サイズ指定で使う値について (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プロパティ