ウェブページの段組みのデザインをカスタマイズする

　前回の記事「ウェブページの段組みをレイアウトするCSS 3のMulti Column」では、段組み（マルチカラム）のレイアウトを実現するcolumn-countとcolumn-widthプロパティを紹介した。

　今回は段組みの間隔を調節するcolum-gapと、区切り線を挿入するcolum-ruleプロパティを紹介する。いずれもCSS 3の草案「Multi-column layout」で提案されているプロパティだ。また、背景や罫線のプロパティを適用して、段組みを設定した部分のデザインをカスタマイズしてみよう。

　なお、段組み関連のプロパティにはFirefoxとSafari、Chromeが対応している。ただし、Firefox 3は区切り線を挿入するcolor-ruleプロパティには未対応で、Firefox 3.1（ベータ版）からの対応となっている。

段の間隔を調節する

　column-countまたはcolumn-widthプロパティで段組みを設定した場合、column-gapプロパティを利用すれば段の間隔を調節することができる。たとえば、次のサンプルでは<div>で囲んだ文章を2段組みで表示して、段の間隔を50ピクセルに設定している。

　column-gapプロパティはFirefoxでは-moz-column-gap、SafariやChromeでは-webkit-column-gapと記述する。

Firefoxでの表示

Safariでの表示。Chromeでも同じように表示される

div	{
	-moz-column-count: 2;
	-webkit-column-count: 2;

	-moz-column-gap: 50px;
	-webkit-column-gap: 50px;
	}

<div>

<p>こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。</p>

<p>こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。</p>
…略…

</div>

※ブラウザで表示を確認する