段組みに関するCSSプロパティ - nicepaper @ ウィキ

このページでは、記事を書くときに必要となる知識のひとつである段組みに関するCSSプロパティを解説していきます。
なお、一つの文章を複数のカラム(列)に渡って記述する場合はCSSプロパティを使って指定する事もありますが、ボックス自体を分ける事も多いようです。
また、ここで解説するプロパティの多くは現在、ベンダープレフィックス-moz-と-webkit-が必要となります。
画像や表など様々なものを乗せる場合は後者の方が扱いやすいかもしれませんね。

目次

column系プロパティのグループ

以下で説明する段組みを画像で説明するとこのような形となります。

列数を指定できるcolumn-countプロパティ

column-count: 3;

といったように任意の数値を値として指定する事で、 指定された値が最大の列数として扱われます。

HTML

<div id="ex_column">
  <h1>カラムの説明</h1>
    <p>本文省略</p>
</div>

CSS

#ex_column {
 column-count: 3;
}

任意の値以外では、autoを指定する事ができ、autoを指定した場合は、column-widthの値などから自動で適切な列数を導き出してくれます。

列幅を指定できるcolumn-widthプロパティ

column-width: 12em;

といったように一列あたりの各カラムの横幅を指定できます。
こちらのプロパティもautoを指定でき、その場合はcolumn-countの値を参照します。
単位の選び方は基本的には自由ですが、line-heightの様にem単位を使用するのが一般的です。

CSS

#ex_column {
 column-width: 20em;
}

また、column-countプロパティと合わせて

columns: -width -count;

という一つにまとめた指定も可能です。
しかしながら、この指定をする場合はしっかりと計算をしておかないとおかしなこと(入りきらないなど)になってしまいますので、注意が必要です。

それぞれの列の間隔幅を指定できるcolumn-gapプロパティ

こちらも任意の数値と単位によって指定する事ができます。

column-fillプロパティ

このプロパティでは、二つの値を選択する事ができます。
autoとbalanceです。
autoの場合、文章は前詰め になり、 balanceの場合は出来る限り格段の内容(高さ)が均一になる ように調整されます。
またこのプロパティは段組みの高さが指定されている場合のみ使用する事ができます。

#ex_column

上がauto、下がbalanceです。

それぞれの段の間に縦線を表示させるcolumn-ruleプロパティ

このプロパティでは、縦線をそれぞれの段組みの間に入れる事ができます。

column-rule: -width -style -color;
/*styleはdottedやsolidなど*/

といったようにborderと同じ要領で指定する事ができます。 このプロパティは3つに分解して書くことも可能です。

column-rule-width:
column-rule-style:
column-rule-color:

CSS

#ex_column {
 column-count: 2;
 column-rule: 3px solid #00ff00;
}

以上