CSSでテキストを多段組みする
今回は見ての通りテキストを多段組みする方法のご紹介です。CSS3で新しく追加されたcolumn-countとかcolumn-width、column-gapを使います。まとめると
- column-count:段組みの数
- column-width:段組みの幅
- column-gap:段組み間の幅
となっています。column-countとcolumn-widthを両方指定すると、column-countが段数の最大値になるようです。また、段の間に罫線を引くこともでき、こちらはcolumn-ruleで指定できます。borderと同じく、-color、-style、-widthをあとにつけると個別に設定することもできます。
なお、column-widthはデバイスごとに最適な表示なるよう柔軟に解釈されるので、column-widthで設定した値が必ず適用されるわけではないようです。厳密に段の幅を指定したい場合は
- width
- column-width
- column-gap
- column-rule-width
をすべて指定する必要があります。
ちなみに、この記事全体には、
column-count:2 column-gap: 20px; -webkit-column-count:2; -webkit-column-gap: 20px; -moz-column-count:2 -moz-column-gap: 20px; column-rule: thin dotted #999; -webkit-column-rule: thin dotted #999; -moz-column-rule: thin dotted #999;
という設定をしてあります。要は2段組みにして間を20px空け、間にグレーの点線を引くようにしてあります。今のところベンダープレフィックスをつけないとwebkit系のブラウザとfirefoxでは表示されません。なしでもうまく表示してくれるのはOperaとIE10くらいです*1。
ブロック要素の多段組みはすでに枯れたテクニックなのですが、文章のようなインライン要素をシンプルに多段組みする方法はありませんでした。今までは段落ごとや切りのいいところでpタグか何かでいい感じに囲い段組みする必要があったのですが、これからは本のように自然な段組みができるようになるかもしれませんね。
