段組み(multi-column)

      2016/03/21

段組はCSS Multi-column Layout Moduleで規定されています。

プロパティ 内容
column-width <length>|auto 段の幅を指定。縦組みの場合は高さを指定(column-heightというのはありません)
column-count <number>|auto 段数を指定
column-gap <length>|normal 段間を指定
column-rule-color <color> 段間の罫線の色を指定
column-rule-style <border-style> 段間の罫線のスタイルを指定
column-rule-width <border-width> 段間の罫線の太さを指定
column-span none|all 段抜き
column-fill auto|balance 段ごとのコンテンツ量の調整

段組サンプル

See the Pen 段組サンプル by overprint (@overprint) on CodePen.

段の形成

段を指定する方法としてはcolumn-countとcolumn-widthのいずれかを使用しますが、段がどのように計算して表示されるかは、指定方法により異なります。また、その領域をwidth、heightで指定した場合にも挙動が異なります。

column-count指定

まず、column-countで指定した場合には、指定した段数を維持しようとします。領域をheight指定した場合、その領域の高さの中で段組を形成します。

領域の高さでは段が収まらない(height:2em;では3段は収まらない)場合は、領域からはみ出て表示されます。

See the Pen 段組サンプル2 by overprint (@overprint) on CodePen.

さらにwidth指定した場合、領域内に収まらない場合は縦方向にはみ出て表示されます。この場合、見た目上は段が増えたように見えます。

See the Pen 段組サンプル3 by overprint (@overprint) on CodePen.

column-width指定

column-widthで指定した場合は、その指定した数値で段組が可能なら段組表示をして、不可能な場合には段組表示しません。

See the Pen 段組サンプル4 by overprint (@overprint) on CodePen.

さらにwidth指定した場合、領域内に収まらない場合は縦方向にはみ出て表示されます。この場合、column-widthの数値がheightより大きい場合、領域からはみ出して段組表示されます。この場合の1段の高さはcolumn-widthの数値ではなくheightの数値になります。

See the Pen 段組サンプル5 by overprint (@overprint) on CodePen.

参考

 - css