CSS の段組みレイアウト (Multi-column Layout) は、ブロックレイアウトモードを拡張して、文章の段組みを定義しやすくするものです。行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがあります。したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切です。

残念ながら、これは CSS と HTML では固定位置で段を区切ったり、文章に許されるマークアップを厳重に制限したり、大げさなスクリプトを使用したりしなければ実現できません。この制限は、従来のブロックレイアウトモードを拡張する新しい CSS プロパティを追加することで解決します。

段組みの使用

段の数と幅

2つの CSS プロパティ、 column-countcolumn-width で、段組みをするかどうか、段数をいくつにするかを制御します。

column-count プロパティで、段数を特定の数に設定します。例えば以下のようにします。

例1

HTML

<div id="col">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
  </p>
  <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>
    Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
    Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

CSS

#col {
  column-count: 2;
}

結果

コンテンツが(段組み対応のブラウザーを使用していれば)2段で表示されます。

column-width プロパティは最小限ほしい段の幅を設定します。 column-count の値が一緒に設定されていない場合は、ブラウザーは有効な幅に収まるできるだけ多くの段を自動的に作成します。

例2

HTML

<div id="wid">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum
</div>

CSS

#wid {
  column-width: 100px;
}

結果

より厳密な詳細については、 CSS3 仕様書で説明されています。

段組みをしたブロックでは、コンテンツは必要に応じてある段から次の段に流れます。 HTML、 CSS、 DOM 機能はすべて段組みでの編集や印刷に対応しています。

一括指定の columns

たいていの場合、ウェブデザイナーは column-countcolumn-width の2つのうち1つを使用します。これらのプロパティの値は重複しないので、一括指定の columns を使うのがふつうは便利です。例えば以下のようにします。

CSS 宣言の column-width:12em は次のように置き換えられます。

例3

HTML

<div id="col_short">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum
</div>

CSS

#col_short {
  columns: 12em;
}

CSS 宣言 の column-count:4 は次のように置き換えられます。

例4

HTML

<div id="columns_4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum
</div>

CSS

#columns_4 {
  columns: 4;
}

Result

column-width:8emcolumn-count:12 の2つの CSS 宣言は、次のように置き換えられます。

例5

HTML

<div id="columns_12">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum
</div>

CSS

#columns_12 {
  columns: 12 8em;
}

結果

高さの調整

CSS3 の段組みの仕様書では、段の高さが揃っていなければならないと規定されています。つまり、ブラウザーは自動的に段の高さの最大値を設定し、各段のコンテンツの高さはおよそ同じになります。 Firefox はこれを行っています。

しかし、場合によっては段の高さの最大値を明示的に設定し、コンテンツを最初の段から配置して必要に応じていくつもの段を作成し、右に流れることができるようにすることが有用であることもあります。従って、段組みブロックに CSS の height または max-height プロパティを設定することで高さを制限すると、それぞれの段は新しい段を追加する前にその高さまで伸びていきます。このモードはレイアウトではるかに効率的です。

段間

段と段の間には隙間があります。推奨される既定値は 1em です。この寸法は段組みブロックに column-gap プロパティを適用することで変更することができます。

例6

HTML

<div id="column_gap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum
</div>

CSS

#column_gap {
  column-count: 5;
  column-gap: 2em;
}

結果

古いブラウザーの対応

段組みのプロパティは、段組みに対応していないブラウザ―では単に無視されます。従って、そのようなブラウザーでは一列で表示し、対応しているブラウザーでは段組みを行うというレイアウトが比較的簡単に作成できます。

まとめ

CSS3 の段組みは、ウェブ開発者が画面の資産を最大限に活用できるようにするためのレイアウト方法です。想像的な開発者は、特に自動的に高さを調整する機能を利用して、様々な利用方法を見つけるでしょう。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, fscholz, ethertank, sosleepy, Marsf, Mgjbot, Foximer
最終更新者: mfuji09,