段組の導入

Wordなどではおなじみの段組をweb画面でも使えるようにとCSS3から段組がサポートされている。これで新聞や雑誌のような記事レイアウトができるのではとさっそく2段組を試してみるとSafari、Crome、Firefoxでは2段組ができたが、IE9では2段にならなかった(予定ではIE10からはサポートされるらしい)。ブラウザによってサポートが異なるが、少しづつ進歩を感じる。

試したソースは次のとおり。

<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<title>サンプル</title>
<style>
div.multi_colum {
 width: 680px;
-moz-column-count: 2;
-webkit-column-count: 2;
-ms-column-count: 2;
 column-count: 2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
-ms-column-gap: 40px;
 column-gap: 40px;
-webkit-column-rule: 1px dotted #ccc;
-moz-column-rule:1px dotted #ccc;
 column-rule:1px dotted #ccc;
}
</style>
</head>
<body>
<p>天声人語 10月31日の朝日新聞より</p>
<div class="multi_colum">
<p>秋色深まる首都東京で、威勢のいい言葉が宙を飛ぶ。スカッとしたい。そんな気分の高まりは
、こと政治においてはやはり危うい。天気図の曲線に季節風を思う10月の言葉から<br>
▼民主主義を問う声が高い。最大格差5倍の参院選は違憲状態だと最高裁が判じた。<br>
▼オスプレイが配備された配備された沖縄の人は言う。「知事や全市町村長が反対してもダメ。
座り込んでもダメ。沖縄はできることをしてきたが全く無視されている。
沖縄に関して、日本の民主主義が機能しないです。
</p>
</div>
</body>
</html>

表示サンプル(IE9以下は段組されない)

天声人語 10月31日の朝日新聞より

秋色深まる首都東京で、威勢のいい言葉が宙を飛ぶ。スカッとしたい。そんな気分の高まりは 、こと政治においてはやはり危うい。天気図の曲線に季節風を思う10月の言葉から
▼民主主義を問う声が高い。最大格差5倍の参院選は違憲状態だと最高裁が判じた。
▼オスプレイが配備された配備された沖縄の人は言う。「知事や全市町村長が反対してもダメ。 座り込んでもダメ。沖縄はできることをしてきたが全く無視されている。 沖縄に関して、日本の民主主義が機能しないです。