カラムを区切る際の線に対して、色を指定するために使うcolumn-rule-colorプロパティ。
設定するためには、カラムの区切り線を引くためのプロパティも覚えなければいけませんが、
という方がいるでしょう。
そこで今回は、column-rule-colorプロパティの
・応用的な使い方
について説明します。
column-rule-colorプロパティとは
column-rule-colorプロパティの読み方
column-rule-colorの読み方は、「カラム-ルール-カラー」です。
カラムの区切り線に対して行う設定の一つです。
column-rule-colorプロパティの説明
column-rule-colorプロパティは、
ときに使う設定です。
column-rule-colorプロパティに色の値を指定すると、カラムの区切り線の色を変えられます。
色の値はいくつかあり、数多くの色を指定できます。
しかし、column-rule-colorプロパティの他にも設定するものがあります。書き忘れてしまうと、カラムの区切り線自体がなくなるため、色の指定もできません。
column-rule-colorプロパティの設定に必要なものは、「column-rule-colorプロパティの基本的な使い方」からご紹介していきます。
column-rule-colorプロパティで利用できる値
column-rule-colorプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| カラーネーム | blackやwhiteなどのカラーネームを使って色を指定します。 |
| 16進数 | 16進数は、6桁のコードを使って色を指定します。 |
| RGB | 色を表現するRGBを使って色を指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
column-rule-colorプロパティの基本的な使い方
column-rule-colorプロパティの使い方
column-rule-colorプロパティの使い方が分かるコードを以下に記述していきます。
See the Pen
column-rule-colorプロパティの使い方 by rabbittyu (@rabbittyu)
on CodePen.
上記のcolumn-rule-colorプロパティは、区切り線の色を緑にする設定をしています。
区切り線に色を指定するために
・column-rule-styleプロパティ：区切り線のスタイルを指定
上記の2つが必要になります。
2つのプロパティの設定をしていない状態で、column-rule-colorプロパティを書いても意味がありません。
書き忘れないように気を付けてください。
column-rule-widthプロパティで区切り線の幅を指定しています。ですが、記述しなくとも「カラムの数」と「区切り線のスタイル」が指定されていればcolumn-rule-widthプロパティを設定しなくともカラムの区切り線を引けます。
カラムの区切り線のスタイルや幅、色をまとめて設定できるcolumn-ruleプロパティ
カラムの区切り線に色を指定できるcolumn-rule-colorプロパティですが、スタイルや幅も含めまとめて設定できるcolumn-ruleプロパティがあります。
どのように使うのかコードを交えて解説していきます。
See the Pen
カラムの区切り線のスタイルや幅、色をまとめて設定できるcolumn-ruleプロパティ by 吉井大輝 (@DaiW)
on CodePen.
「column-rule-colorプロパティの使い方」のコードと同様の設定をcolumn-ruleプロパティで指定しています。
column-ruleプロパティで指定できるのは、
・column-rule-widthプロパティ：カラムの区切り線の幅を指定
・column-rule-colorプロパティ：カラムの区切り線の色を指定
の3つです。
column-rule-colorプロパティなど1つずつ設定せず、まとめられるメリットがcolumn-ruleプロパティにあります。
しかし、1つずつ設定する方が分かりやすいケースもあります。
つまり、コーディングする側や環境に応じて使うプロパティを決めるということです。
column-rule-colorプロパティの応用的な使い方
「column-rule-colorプロパティの基本的な使い方」では、色の値を16進数にしていました。
16進数以外の値を指定すると違った利点があります。
どのような利点があるのか説明していきます。
column-rule-colorプロパティで指定する値をRGBにした場合
column-rule-colorプロパティの値をRGBにしたコードを以下に記述していきます。
See the Pen
column-rule-colorプロパティで指定する値をRGBにした場合 by 吉井大輝 (@DaiW)
on CodePen.
RGBは、3つの数値を変えることで、さまざまな色を表現できます。
16進数でも可能ですが、RGBでは数値を調整するだけで、色を変えられるメリットがあります。
こだわりを持って区切り線の色を指定したいとき使い勝手が良い値です。
column-rule-colorプロパティで指定する値をカラーネームにした場合
column-rule-colorプロパティの値をカラーネームにしたコードを以下に記述していきます。
See the Pen
column-rule-colorプロパティで指定する値をカラーネームにした場合 by 吉井大輝 (@DaiW)
on CodePen.
色の指定に数値や6桁のコードではなく、カラーネーム書くだけなので、簡単かつ早く設定できます。
RGBと比べると表現できる色は少ないですが、少なすぎるという訳ではありません。
column-rule-colorプロパティの中でも設定がしやすい値です。
まとめ
いかがでしたでしょうか？
今回、column-rule-colorプロパティの基本的な使い方や応用的な使い方についてご紹介しました。
column-rule-colorプロパティを使うためには、カラムの区切り線を設定の仕方も覚える必要があります。
ですが、コードを含めて説明をしているので、参考にすることによって覚える手助けになるでしょう。
CSSの学習に役立てもらえれば幸いです。
参考文献：MDN web docs｜column-rule-colorプロパティ: 段組みレイアウトで段間に引かれる線の色を設定します。
