ウェブページの段組みのデザインをカスタマイズする
前回の記事「ウェブページの段組みをレイアウトする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プロパティを利用すれば段の間隔を調節することができる。たとえば、次のサンプルでは
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;
}
こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。
こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。こんにちは。今日はとてもいい天気です。
…略…
※ブラウザで表示を確認する
- ホワイトペーパー
HP 3PARがデータ急増時代を救う
仮想環境の確実な保護！
2012年はDBサーバー統合始動の年！
クラウドサービスの事業戦略に迫る
オープンソースで実現するクラウド
「出入口」を固め、攻撃を防御する
漫画で解説 クラウドのITリソース
