最終更新日

column-rule-colorプロパティ

column-rule-colorは、段組みの、段と段の間の境界線の「色」を指定するプロパティです。指定できる値は、colorと同じです。

境界線の「種類」を指定する場合は、column-rule-styleを使用します。
境界線の「太さ」を指定する場合は、column-rule-widthを使用します。
境界線の「種類、色、太さ」をまとめて指定する場合は、column-ruleを使用します。

下記の   の部分が、column-ruleです。

カラムモデル

段組みの段と段の間隔(    の部分)を指定する場合は、column-gapを使用します。

CSS3での変更点
・column-rule-colorは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
ブラウザに依存 段組された要素 なし
説明
RGB値(16進数) R、G、Bそれぞれの割合を16進数の2桁で示します。WEBセーフカラーは1桁に省略する事も可能です。
RGB値(10進数) R、G、Bそれぞれの割合を「0~255」までの10進数の数値で示します。
RGB値(%) R、G、Bそれぞれの割合をパーセント値で示します。
RGBA値(10進数) RGB値の10進数表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0~1.0」の範囲で示します。
RGBA値(%) RGB値のパーセント表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0~1.0」の範囲で示します。
HSL値 H(色相)S(彩度)L(明度)という3つの属性を使って色を表す方法です。H(Hue:色相)は、色を環状で表す色相環の角度を示す数値で指定します。0は赤、120は緑、240は青になります。S(Saturation:彩度)は、色の鮮やかさをパーセント値で指定します。100%は彩度がもっとも高い純色で、0%は彩度のない無彩色です。L(Lightness:明度)は、色の明るさを0%~100%までのパーセント値で指定します。50%は純色を示します。
HSLA値 HSLの表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0~1.0」の範囲で示します。
基本色 CSS3で定義されている、black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aquaの16色です。アルファベットの大文字と小文字は区別されません。
拡張色 一般的なブラウザが対応している「X11カラー」の色名です。CSS3カラーモジュールでは、X11カラー140色に加え、darkgray、darkslategray、dimgray、gray、lightgrey、lightslategray、slategrayの7色については、「gray」と「grey」のどちらのスペルでも利用できるようになり、合計147色のカラーネームが正式に定義されています。
transparent 完全な透過色を示します。rgba(0,0,0,0)と指定した場合と同じです。
currentColor 要素のcolorプロパティの値を示します。色の値を受け取る全てのプロパティで使用できます。colorプロパティ自身にcurrentColorを指定した場合は「color:inherit」として扱われ、親要素のカラー値を受け継ぎます。
サンプルコード
column-rule-color: #f00;
column-rule-color: #ff0000;
column-rule-color: rgb(255,0,0);
column-rule-color: rgb(100%,0%,0%);
column-rule-color: rgba(255,0,0,0.5);
column-rule-color: rgba(100%,0%,0%,0.5);
column-rule-color: hsl(0,255%,128%);
column-rule-color: hsla(0,255%,128%,0.5);
column-rule-color: red;
column-rule-color: darkred;
column-rule-color: transparent;
column-rule-color: currentColor;
参考文献:CSS Multi-column Layout Module外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。