CSS3の段組みレイアウト（Multi-column Layout）

「段組みレイアウト」（Multi-column Layout）は要素のコンテンツを2列以上の列に分けて配置するCSSのレイアウトによる方法である。書籍、雑誌、新聞などでは広く用いられ、“段組み”とも言われている。

現在のブラウザ対応状況（Can I use）

  • メリット
    最低限のコードで段組みを実装できる。HTMLのコードを変えなくても常に段ごとにバランスよくコンテンツを配置できる
  • デメリット
    段ごとに異なる横幅にすることができない。一つ一つの段に異なるスタイル（背景など）を適用することができない
<div class="container">
  親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて
　一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。
　別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、
　いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。
　小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて
　腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
　（青空文庫より）親譲りの無鉄砲で小供の時から損ばかりしている。
　小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事
</div>
.container {
  width: 600px;
  column-count: 2;
}

column-count

何段組みかの設定をするプロパティ。
これをつけるだけで、テキストを横に何段で組むかの設定をすることができる。
初期値はauto、値に数字を入れると、その数字の段組みになる。
流し込むテキストも自動で調整してくれる。

上記の例では2を入れたので、横2段、4を入れるとHTML側を変えること無く、4段組になる。
※このプロパティは、table以外のブロック要素に指定することができる

column-width

段の幅を指定することができるプロパティ。
横幅は、後述するcolumn関連のプロパティを全部設定しない限りは目安となり、状況に応じては指定した横幅よりも短くなったり長くなったりする。
何段での表示になるかはボックスの横幅によって変わる。

もし、column-countで数字を指定していても、column-widthによってはその段組が維持できない場合がある。
例えば

.container {
  width: 600px;
  column-count: 4;
  column-width: 15em;
}

とした場合、column-widthがなければ、上にも出た4段組の表示になるが、 column-widthは一つ一つのボックスの横幅が4段組時よりも広いため、結果的に表示としては2段組になる。

column-gap

段と段の間隔を指定するプロパティ。
デフォルトだと1emである。

.container {
  width: 600px;
  column-count: 4;
  column-gap: 2em;
}

column-rule

カラムの区切り線を指定するプロパティ。
線の種類、色、太さを指定することができる。
指定するときは、それぞれ別々に指定することも可能だが、borderプロパティのようにcolumn-ruleにまとめて指定することもできる。

プロパティ説明
column-rule-style区切り線のスタイル。border-styleと値に入れられるものは大体同じ
column-rule-width区切り線の太さ
column-rule-color区切り線の色
.container {
  width: 600px;
  margin: 30px 10px;
  column-count: 4;
  column-gap: 2em;
  column-rule-style: dashed;
  column-rule-width: 2px;
  column-rule-color: #ccc;
}

※text-alignが左揃え場合、右端までぴったりと文字が入っておらず右寄りに見えてしまう。text-align: justifyを追加するとぴったり真ん中に収まる。

column-span

段組の中で、複数のカラムをまたがる要素に指定するプロパティ。

<div class="container">
  <h1 class="title">タイトル</h1>
  親譲りの無鉄砲で小供の時から損ばかりしている。小学校に…
</div>
.container {
  width: 600px;
  column-count: 4;
  column-gap: 2em;
}
.title {
  column-span: all;
  border-bottom: 2px solid #ccc;
}

column-span: allをあてた要素のみ、段組みを無視して横いっぱいになる（上記の例の場合、タイトルが横いっぱいに表示される）。
指定できる値は

値説明
all要素をすべての段にまたがった状態で表示する
none複数の段にまたがる表示をしない（1つのカラム内におさめる）。初期値

allを指定していない場合だと、タイトルは一番最初に記載したので、一番左のカラム内に収まる。

orphans

orphansは、ページや段組みカラムの最下部に表示されるブロックの最小行数を制御する。オルファン（orphan）とは、組版で使われる用語で、段落の最初の行がページの末尾に単独で現れることを意味する。ページに入り切らなかった内容は、次のページに続く。
ウェブページにおいて、ページや段で区切られた要素は断片化したものとして処理される。この状態をフラグメントと言う。断片化した要素は、意図しない挙動やレイアウトの崩れを引き起こすため、CSSで事前に制御することが、このプロパティの目的である。
ただし、コンテナの幅を極端な寸法まで縮めると、指定された行数を超えることがあるので注意する。

/* <integer>値 */
orphans: 1;
orphans: 3;
orphans: 5;

/* グローバル値 */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: unset;

widows

widowsは、ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する。ウィドウ（widow）とは組版業界で使われる言葉である。段落が前のページから続いている場合に、最後の行がページの先頭に単独で現れることを意味する。

/* <integer>値 */
widows: 1;
widows: 2; /* 初期値 */
widows: 4;

/* グローバル値 */
widows: inherit;
widows: initial;
widows: revert;
widows: unset;
inserted by FC2 system