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

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

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

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

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

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

column-rule-colorプロパティの値
キーワード	currentcolor（要素の文字色 =colorプロパティの値）がデフォルト値。
CSSの色指定	CSSの色指定のルールで指定します。 詳細はこちら↓ [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

column-rule-color: currentcolor; がデフォルト。
currentcolorというキーワードは「colorプロパティの値」を表します。
colorプロパティは文字の色を指定するので、column-rule-colorを何も指定せずにデフォルト値のままだと。罫線の色は「文字色」になります。

文字色以外にしたい時は、普通にCSSの色指定のルールで指定します。
border-color や background-color などの時と同じなので簡単です。

CSSの色指定については、下記の記事をご覧ください。
[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
【8】CSSの「色」と「透明度」の指定

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

column-rule-colorプロパティでいろいろな色を付けてみます。
線のスタイル（column-rule-style）はすべて solid（実線）に指定。
幅（column-rule-width）は未指定なのでデフォルトのミディアムです。

サンプルのHTMLはこちら。

<div class="sample sample1">
<p>
<b>pink</b><br>
column-rule-colorプロパティでマルチカラムの罫線の色を指定できます。
デフォルト値は currentcolor で、その要素の文字色（colorの値）になります。
CSSの色指定のルールで色を指定します。</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>

サンプルのCSSはこちら。

.sample {
	column-count:2;
	column-gap:2em;
	column-rule-style:solid;
	/*column-rule-widthは指定なし=デフォのmediumになる*/
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
	margin:0}
.sample1 {column-rule-color:pink}
.sample2 {column-rule-color:beige}
.sample3 {column-rule-color:#aacf53}
.sample4 {column-rule-color:rgba(156,100,210,0.4)}
.sample5 {column-rule-color:currentcolor}
.sample6 {column-rule-color:transparent}

次回予告

マルチカラムの罫線の「スタイル」「幅」「色」3つをまとめて指定できるショートハンドプロパティ column-ruleがあります。
3つ全部デフォルト以外に変えたいとき、それぞれ書いてたら3行になっちゃうから、ショートハンドで書いたほうがいいですよね。次回はこれを使おう。

関連記事

• 【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プロパティ
• 【56】ユーザーのテキスト選択などを制御する user-selectプロパティ