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

エ・ビスコム・テック・ラボ
2008/10/17 17:00

FirefoxやSafari、ChromeなどのブラウザのCSS対応を解説する本連載。今回は段組みの間隔を調節するcolum-gapと、区切り線を挿入するcolum-ruleプロパティを紹介する。

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

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

 なお、段組み関連のプロパティにはFirefoxSafariChromeが対応している。ただし、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での表示 Firefoxでの表示
Safariでの表示。Chromeでも同じように表示される 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>
ブラウザで表示を確認する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文(必須) :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ