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

エ・ビスコム・テック・ラボ
2008-10-17 17:00:00
  • このエントリーをはてなブックマークに追加

 前回の記事「ウェブページの段組みをレイアウトする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プロパティを利用すれば段の間隔を調節することができる。たとえば、次のサンプルでは

で囲んだ文章を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;
}

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

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

…略…
ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ