CSSで文書の段組表現を行うcolumnプロパティの使い方

CSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。

というわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。

段組にすると視線の横移動が少なくて済む
段毎の幅はcolumn-widthで
幅の決まったボックスにしたい場合は
まとめ

段組にすると視線の横移動が少なくて済む

お題のHTMLはこちら。


<div>
<p>上海のある家の2階で、占い師をやっているインド人の老婆が、アメリカ人の商人と話し合っていた。商人は戦争で大儲けをする為に、日米戦争がいつ頃起こるのかを占って欲しいと頼む。始めは渋っていた老婆だが、前金として小切手をもらうと愛想が良くなり、自分にはアグニの神がついているから占いは絶対に外れないと言って引き受ける。商人が帰ると老婆は家にいる一人の少女を呼びつけ、今夜アグニの神にお伺いをたてるなどと話す。</p>
<p>丁度その時、下の通りからその様子を見ている日本人がいた。日本人は名を遠藤といい、行方不明になった香港領事の娘を探していて、2階にいる少女が領事の娘、妙子ではないかと疑う。遠藤は2階に押し入り、少女を返すよう求めるが、一向に聞き入れられない。遠藤はピストルを出して老婆を脅すが、老婆の魔法によってあっけなく追い返されてしまう。</p>
<p>遠藤は下の通りでどうしたものかと考えていたが、家の2階から妙子が書いた手紙が落ちてくる。手紙には、おばあさんはいつも私にアグニの神を乗り移らせて声を聞くから、自分は神に取り憑かれたふりをして自分を父の元に返すよう求めるという計画が書かれていた。</p>
<p>儀式が始まり、遠藤は2階のドアの前に立って盗み聞きをする。神の声が聞こえたが、その内容は少女を父親の元に返せというもので、老婆は妙子に、神に乗り移られたふりをするなと言う。しかし神の声はそれを否定する。怒った老婆はナイフで妙子を殺そうとするが、次の瞬間には自分自身を刺して息絶えた。</p>
<p>ドアを突破した遠藤は、妙子に計画の成功を伝えるが、妙子は自分は眠ってしまっていて計画は失敗したと言う。妙子は死んでいる老婆を見て、遠藤さんが殺したのかと聞くが、遠藤は、殺したのはアグニの神ですと答えた。</p>
</div>

このようにひとつの【div】のなかにパラグラフがいくつかある一連の文書をどうやって段組するか、というお話。

こういうときには【column】プロパティを使ってCSSを書きます。


div{
display:block;
background-color:#ccc;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}

ここで登場した【column-count】というのは段組の数を指定するプロパティです。例えば今は2を指定していますので

このように2段組になっています。こうすると目線の横移動、行での折り返しのときに疲れなくて済みますよね、読むほうとしては。

ただこのままだと幅を指定していませんので、Window幅にともなって幅が可変なboxだと

こんな感じで段の幅も連なって変わってしまいます。

サンプルページ

実際にこのサンプルを開いてウィンドウ幅を広げたり縮めたりするとよくわかると思います。

段毎の幅はcolumn-widthで

段毎の幅を固定にするには【column-width】プロパティを使用します。


div{
display:block;
background-color:#ccc;
column-width:150px;
-webkit-column-width:150px;
-moz-column-width:150px;
}

こうすると

幅の狭いウィンドウでは2段組になり

幅の広いウィンドウでは3段組になる、もっと広ければ4段…となり段毎の視線移動が変わらずに済みます。

サンプルページ

では【column-count】と【column-width】を使えばきちっとしたフォーマットの段組ができるか…というと段組数の方が優先されて適用されるみたいで幅は無視されるようです（ソース割愛）。

段組数と段組幅両方指定のサンプルページ

幅の決まったボックスにしたい場合は

実用的に使う場合はボックスの幅に制限があることが多いでしょうから、【div】の幅を決め撃ちしたうえで段組数指定するのが順当な方法ではないでしょうか。


div{
display:block;
background-color:#ccc;
width:420px;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}

サンプルページ

【div】の高さを指定しなければボックス自体は下に伸びるだけなので通常はこれで良いでしょう。

余白のとり方は通常通り【padding】を用いれば良いのですが、段と段の間隔を指定するには【column-gap】というプロパティを使います。


div{
display:block;
background-color:#ccc;
width:500px;
padding:10px;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap:40px;
-webkit-column-gap:40px;
-moz-column-gap:40px;
}