CSS3のカラムを調整する方法(column-gap、column-rule)

Web制作

2016年08月05日

CSS3プロパティの連載記事

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;

カラムの間隔 normal

カラムの間隔 25px

「カラムの間隔」に25pxを指定した場合です。

  column-gap: 25px;

カラムの間隔 25px

カラムの間隔 50px

「カラムの間隔」に50pxを指定した場合です。

  column-gap: 50px;

カラムの間隔 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;

スタイルに二重線(double)を指定した場合

スタイルに二重線(dotted)を指定した場合

「区切り線のスタイル」にdottedを指定した場合です。

  column-rule: 5px dotted green;

スタイルに二重線(dotted)を指定した場合

スタイルにnormalを指定した場合

「区切り線のスタイル」にnormalが指定してあると、幅や色が指定してあっても区切り線が表示されません。注意しましょう。

  column-rule: 5px normal #777777;

スタイルにnormalを指定した場合

あとがき

CSS3のcolumn-gapとcolumn-ruleプロパティの使い方と具体例についてご紹介しました。columnsプロパティと合わせて、上手に使っていきましょう。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。