段組み設定
- １段の高さ（行長）指定
column-width: 000px;
-webkit-column-width: 000px;（ベンダープレフィックス）
- 段数の指定
column-count: 3;
-webkit-column-count: 3;（ベンダープレフィックス）
- 段間サイズ
column-gap: 00px;
-webkit-column-gap: 00px;（ベンダープレフィックス）
- 段間に入れることができる罫線の指定
column-rule: solid 1px #000;
-webkit-column-rule: solid 1px #000;（ベンダープレフィックス）
borderと同じで、線種・太さ・色を一括で指定できます。
段間の中央に罫線が上塗りされるかたちでひかれるので、上の段と下の段の間隔は、変わりません。罫線を太くしても段間が開いていくわけではないです。
- 段組み全体の高さを指定する
height: 000px;
１段の高さ（column-width）、段数（column-count）、段間サイズ（column-gap）から導き出される段組み全体の高さ（height）を指定しておかないと、レイアウトが指定通りに表示されない場合があるため、この数値は、必須であったほうがよいです。
これらの「縦書き」と「段組み」のスタイルシートの機能を使えば、とりあえずは、縦組みが実現できるのだけど、それは、段に含まれるボリュームである文章量がはっきり判明していて、文字組み指定やレイアウトデザインがかっちり決定している場合でのことで、ブログ投稿のように、毎回文章量に変化があり、複数のデバイスで閲覧することを前提としたレスポンシブに変化するレイアウトデザインを考慮すると、もうひと工夫が必要になってくるのですが、それは、次の投稿へ。
次回につづく。
