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

に対して背景や罫線のプロパティを適用すれば、デザインをカスタマイズすることも可能だ。たとえば、backgroundプロパティを適用すると段組み全体の背景に色をつけることができる。

Firefox 3.1（ベータ版）での表示

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

div{
background-color: khaki;

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

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

-moz-column-rule: 2px solid goldenrod;
-webkit-column-rule: 2px solid goldenrod;
}

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

　borderプロパティを適用すれば、段組み全体を罫線で囲んで表示することが可能だ。

Firefox 3.1（ベータ版）での表示

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

div{
background-color: khaki;
border: 4px solid goldenrod;

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

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

-moz-column-rule: 2px solid goldenrod;
-webkit-column-rule: 2px solid goldenrod;
}

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

　なお、上のサンプルの表示を確認すると、Safariでは1段目の最初の文章の上に余白が入っていることがわかる。この余白を削除するには、文章をマークアップした

の上マージンを「0」と指定する。これで、Firefox、Safari、Chromeの表示を揃えることができる。

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

div{
background-color: khaki;
border: 4px solid goldenrod;

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

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

-moz-column-rule: 2px solid goldenrod;
-webkit-column-rule: 2px solid goldenrod;
}

p{
margin-top: 0;
}

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

　最後に、paddingプロパティで罫線の内側に余白を入れて、文章をゆったりと読めるようにしておこう。

Firefoxでの表示

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

div{
background-color: khaki;
border: 4px solid goldenrod;
padding: 20px;

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

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

-moz-column-rule: 2px solid goldenrod;
-webkit-column-rule: 2px solid goldenrod;
}

p{
margin-top: 0;
}

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