CSS: column-rule-color (カラムルールカラー) の解説 | 独学 Webプログラミング!

column-rule-colorとは

column: 読み: カラム
意味: 列
rule: 読み: ルール
意味: 規則、規定
color: 読み: カラー
意味: 色

目次に戻る

column-rule-colorプロパティの概要

このプロパティは、段組みの列の間の線の色を設定することができます。

段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。その段組みの列と列の間の線の色を指定するための個別プロパティです。

線の色と線の種類「スタイル」と線の太さの一括指定プロパティは column-rule (カラムルール) のページを参照してください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{column-rule-color: 値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルは親要素にdiv要素を、子要素にはp要素を使用しています。要素が分かりやすいように境界線と背景色には予め以下の設定をしてコード内に記載しています。

サンプルコード: CSS

<style>
	div{
		background-color: ##khaki;
		border: thin solid ##darkgray;
		padding: 10px;
		width: 95%;
		column-count: 6;
		column-rule: 8px solid;
	}
	p{
		border: thin solid currentColor;
		background-color: ##lightgreen;
		padding: 3px;
	}
</style>

サンプルコード: HTML

<body>
	<div>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
	</div>
</body>

目次に戻る

初期値: currentColor;

初期値のcurrentColorキーワードは、ユーザーエージェントの既定色で境界線が表示されます。つまりブラウザで決まっている標準の色が使われるということです。

詳しくは、色見本 (カラーサンプル)のページを参照してください。

テキストテキストテキストテキストテキストテキスト

div{column-rule-color: currentColor;}

目次に戻る

キワード値: カラーキーワード

色を指定する場合W3Cで定義されているカラーキーワードを使って色を指定することができます。

詳しくは、色見本 (カラーサンプル)のページを参照してください。

テキストテキストテキストテキストテキストテキスト

div{column-rule-color: ##orange;}

目次に戻る

16進数: 16進数のカラーコード

16進数とは私たちが普段、数学などで使っているアラビア数字の0~9にA~Fを付け加えた数字です。アラビア数字は0から数えて9の次の10で位が上がりますが、16進数では9の次からABCDEFと数えていき、最後のFが16番目の数字となります。つまりFはアラビア数字でいうところの15を表すことになります。

16進数で色を表す場合はカラーコードの先頭に「#」を付けます。

色の指定方法は #XXYYZZを例とするとXXの部分が赤色の明るさ、YYの部分が緑色の明るさ、 ZZの部分が青色の明るさの形式で 0~F の数字をあてはめて指定します。なお、指定した数字が大きいほど明るくなります。

16進数で色を指定する場合には2種類の書き方があります。#000と#000000はどちらも16進数のカラーコードです。 #000は16進数のカラーコードの短縮系となり、指定できる色の幅が少し大雑把になります。

カラーコードに大文字と小文字の区別はありませんので、例えば#FFFと書いても#fffと書いても同じ意味になります。

詳しくは、色見本 (カラーサンプル)のページを参照してください。

テキストテキストテキストテキストテキストテキスト

div{column-rule-color: #FF0000;}

目次に戻る

関数: rgb関数で色を指定する

rgb関数は引数に指定した数値をもって処理したカラーコードを返してくれる関数です。

RGB とはRed,Green,Blueの頭文字をとったもので赤と緑と青の色の混合比を使って色を指定します。この考え方は16進数で色を指定する場合と同じです。

rgb( 赤, 緑, 青) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示されます。

詳しくは、色見本 (カラーサンプル)のページを参照してください。

テキストテキストテキストテキストテキストテキスト

div{column-rule-color: rgb(0,255,0);}

目次に戻る

関数: rgba関数で色を指定する

rgba関数はrgb関数と同じく、引数に指定した数値をもって処理したカラーコードを返してくれる関数ですが、 rgb関数よりも引数が一つ多く、最後の引数で色の透過率を設定することができる関数です。つまり、背後の要素やテキストが透けた状態を表現することができるということです。

RGBA とはRed,Green,Blue,Alphaの頭文字をとったもので前項で挙げたRGBに透過度であるAlpha値を指定することができます。

rgba( 赤, 緑, 青, 透過率) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示され、かつ、透過度を設定することで指定した色に透明度を設定します。

詳しくは、色見本 (カラーサンプル)のページを参照してください。

テキストテキストテキストテキストテキストテキスト

div{column-rule-color: rgba(0,255,0,0.3);}

目次に戻る

グローバル値

column-rule-colorプロパティに対してのグローバルキーワードは以下の3つです。ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

inheritは親要素の値の継承を促します。
initialは値を初期値の currentColor に戻します。
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{column-rule-color: グローバル値;}

目次に戻る

補足説明

段組み要素に適用可能
親要素の値を継承しない

目次に戻る

まとめ

コードの部分をクリックすると、サンプルにCSSが反映されます。

column-rule-color: currentColor;

column-rule-color: orange;

column-rule-color: #FF0000;

column-rule-color: rgb(0,255,0);

column-rule-color: rgba(0,255,0,0.3);

テキストテキストテキストテキストテキストテキスト

目次に戻る

Title

段組みレイアウトのセパレーターの色を設定する

目次 (INDEX)

column-rule-colorとは

column-rule-colorプロパティの概要

構文

実機サンプルとサンプルコード

初期値: currentColor;

キワード値: カラーキーワード

16進数: 16進数のカラーコード

関数: rgb関数で色を指定する

関数: rgba関数で色を指定する

グローバル値

補足説明

まとめ