デザインサンプルで学ぶCSSによるスタイリング～「テキスト（マルチカラム）」編

CSSで作るWeb用パーツ（9）

マルチカラムの間隔と区切り線

　マルチカラム機能を利用して段組みレイアウトをした場合、段と段の間隔はcolumn-gapプロパティで指定、区切り線はcolumn-ruleプロパティで指定します。

「column-gap」で段組みの間隔を指定する

　段と段の間隔は、column-gapプロパティで指定します。初期値はnormalで、normal時の段と段の間隔は1文字分（1em）になります。次の例では、column-gap: 40px;を指定して、段組みの間隔を40pxで表示しました。

リスト6　段と段の間隔を40pxの幅に指定／CSS（sample04.html）

div#article {
  ～略～
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}

図9　上：column-gapを指定していない時。下：column-gap:40px;の時

「column-rule」で段の区切り線を指定する

　column-ruleプロパティを使うと、段と段の間の区切り線を指定できます。指定できる値は、線の太さ、スタイル、色で、「column-rule: 2px solid #f93;」のように、半角スペースで区切って指定します。これらは、column-rule-width、column-rule-style、column-rule-colorプロパティで個別に指定することもできます。サンプルでは、column-rule: 2px solid #f93;を指定しました。これで、2pxのオレンジ（#f93）の実線を区切り線として表示できます。

段の区切り線のプロパティと値

プロパティ	値
column-rule	区切り線の太さ スタイル 色
column-rule-width	区切り線の太さ
column-rule-style	区切り線のスタイル
column-rule-color	区切り線の色

リスト7　2pxのオレンジ（#f93）の実線を区切り線として指定／CSS（sample05.html）

div#article {
  ～略～
  column-gap: 40px;
  -moz-column-rule: 2px solid #f93;
  -webkit-column-rule: 2px solid #f93;
  column-rule: 2px solid #f93;
}

図10　2pxのオレンジ（#f93）の実線を区切り線として表示

「column-span」で段にまたがる表示を指定する

　マルチカラムの機能で表示した段組みでは、通常、見出しのようなコンテンツも段をまたいで表示されることはありません。図11のオレンジの帯「星の金貨」は見出しですが、段組み内に収まっているのが分かります。次に説明するcolumn-spanプロパティを指定していない場合や、値を「1」とした場合は、このようにコンテンツが段をまたいで表示されることはありません。

図11　見出しも段で区切られて表示される

　column-spanの値に「all」を指定すると、コンテンツは、すべての段にまたがって表示されます。ただし、このプロパティは、Firefoxではサポートされていません。また、このプロパティに指定できる値は1（1段）か、all（すべての段）のみとなっています。次のサンプルでは、見出しにcolumn-span: all;を指定しました。

リスト8　見出しを複数の段にまたがって表示させる／CSS（sample06.html）

h1 {
  column-span: all;
  -webkit-column-span: all;
}

図12　見出しを複数の段にまたがって表示