CSS3のプロパティについて解説する連載記事です。以前の記事で、columnプロパティを使って段組を指定する方法についてご紹介しました。
» CSS3のcolumnsプロパティを使って段組を指定する方法
段組の数と幅を指定する方法について解説しましたが、今回ご紹介するプロパティを使うことでカラムの詳細を指定することができます。本稿ではcolumn-gapとcolumn-ruleを使って、段組のスタイルをカスタマイズしていきましょう。
columns-gapの指定方法
columns-gapから見ていきましょう。カラムの間隔は、下のように記述して指定します。
column-gap: カラムの間隔;
「カラムの間隔」を値で指定するのですが、初期値はnormal（1.0em）となっています。
column-gapの具体例
column-gapを使った具体例です。
カラムの間隔 normal
「カラムの間隔」にnormalを指定した場合です。
column-gap: normal;
カラムの間隔 25px
「カラムの間隔」に25pxを指定した場合です。
column-gap: 25px;
カラムの間隔 50px
「カラムの間隔」に50pxを指定した場合です。
column-gap: 50px;
columns-gapの指定方法
次は、カラム間に区切り線を表現することができるcolumns-ruleです。指定方法は下記の通り。
column-rule: （区切り線の幅） （区切り線のスタイル） （区切り線の色）;
column-ruleは、column-rule-widthとcolumn-rule-style、column-rule-colorの3つを合わせたプロパティです。指定できる値について、下にまとめておきましょう。
| 区切り線の幅 | 区切り線の幅を数値で指定します（初期値はmedium）。column-rule-widthでも指定可能。 |
|---|---|
| 区切り線のスタイル | 区切り線のスタイルを指定します（初期値はnone）。column-rule-styleでも指定可能。 |
| 区切り線の色 | 区切り線の色を指定します（初期値はcolorプロパティの値）column-rule-colorでも指定可能。 |
なお、「区切り線のスタイル（column-rule-style）」で指定できる値は下記の通りです。
- none（初期値）
- hidden
- solid
- double
- groove
- ridge
- inset
- outset
- dashed
- dotted
column-ruleの具体例
column-ruleの具体例を見ていきましょう。
スタイルに二重線（double）を指定した場合
「区切り線のスタイル」にdoubleを指定した場合です。
column-rule: 3px double blue;
スタイルに二重線（dotted）を指定した場合
「区切り線のスタイル」にdottedを指定した場合です。
column-rule: 5px dotted green;
スタイルにnormalを指定した場合
「区切り線のスタイル」にnormalが指定してあると、幅や色が指定してあっても区切り線が表示されません。注意しましょう。
column-rule: 5px normal #777777;
あとがき
CSS3のcolumn-gapとcolumn-ruleプロパティの使い方と具体例についてご紹介しました。columnsプロパティと合わせて、上手に使っていきましょう。