CSS 段組みレイアウト標準は CSS のモジュールの一つで、 CSS で段組みレイアウトの対応を追加するものです。このモジュールは、このモジュールを使用すると、段組みのレイアウトを作成するのが、これまで以上に簡単で信頼性が向上し、複雑で壊れやすい構造を手作業でコード化する必要がなくなります。レイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線(段間罫)などの対応が含まれています。

段組みレイアウトの基本

CSS で段組みを生成するために、 column-countcolumn-widthcolumn-gap の3つの重要なプロパティが使われます。他のプロパティは、これらのプロパティを使って構築されたレイアウト構造の中で、どのようにまとめ描画するかを微調整する方法を提供しますが、何がどうなるのかを扱う仕事は、全般的にはこれら3つで扱います。

段数と幅の提案

最初の2つのプロパティ、 column-countcolumn-width は、どちらも最も重要で最も間違いやすいものです。理解する上で重要なことは以下の通りです。

  • column-count プロパティは文字列を描画するために使用する段の最大数を指定します。ブラウザーは利用できる水平の空間の寸法と、 column-widthの値、 column-gap の値を考慮し、利用可能な空間に合う最大数の段を描画します。
  • column-width プロパティは最小の段の幅を <length> 値で指定します。ブラウザーが生成する各段は最小でこの幅ですが、おそらくより広くなります。段数が決定された後で、残りの水平の空間の幅は、ブラウザーが等分して各段の幅に追加されることがあります。

ある意味、これらは固く厳格な規則よりも勧告に似ています。そして、いったんこの論理が分かれば、理にかなっているとわかるでしょう。これにより、段組みレイアウトが画面幅に応答して適応し、ページの全体レイアウトと作成者の意図にも対応します。内包空間(または画面)の幅が縮小するにつれて、ブラウザーは作成する段数を減らし、残りの段の幅を調整して全体の幅が期待どおりになるようにします。

他に制御できるものとしては、段間と呼ばれる段の間隔があります。段間は column-gap プロパティを使って制御することができます。習慣的に、既定の段間は 1em ですが、ブラウザーによってそうである場合とそうでない場合があるので、利用する際に明示的に設定してください。段間は、段数や幅とは異なり、ブラウザーが利用可能な空間を埋めるために合わせようとすることはありません。

以下の例を参照してください。一番上にあるレンジコントロールを使用して、段を含む要素の幅を調整することができます。

段組みレイアウトでの段の折り返し

column-fill プロパティもレイアウトに影響します。既定では、ブラウザーは適切な寸法の段をできるだけ多く作成してから、それぞれの段がほぼ同じ長さになるようにコンテンツの比率を調整します。しかし、もしブラウザーに最初の段を高さの上限まで埋めてから次の段に移動するようにさせたい場合は、 column-fill に(既定値の balance の代わりに) auto を設定すると実現できます。

ただし、段の高さに制約がない場合は、次の段に移るためのきっかけとなる高さの上限に届くことがないため、1つしか段を作成しません。そのため、 height または max-height を使用して高さを制限したコンテナーの中に段を配置するようにしてください。

CSS 仕様書では break-beforebreak-afterbreak-inside プロパティを定義して、領域、段、ページ境界をまたがる要素の折り返しを制御することができるようにしていますが、これらのプロパティは今のところ、実用に足るほど広く一般に実装されていません。

段の表示方法

レイアウトの出力で段間罫(それぞれの段間の中央に引く分割線)を段の間に引くように設定するには、 column-rule-stylecolumn-rule-widthcolumn-rule-color プロパティ、または一括指定プロパティの column-rule を使用してください。

リファレンス

CSS プロパティ

ガイド

CSS 段組みレイアウトの使用
段組みを使ったレイアウトを構築する方法についての手順を追ったチュートリアル。

仕様書

仕様書 策定状況 コメント
CSS Multi-column Layout Module 草案 初回定義

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) -webkit 9 (9)-moz
52 (52)
10 11.10
15-webkit
3.0 (522)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 2.1-webkit 22.0 (22)-moz
52.0 (52)
10 11.5
32-webkit
3.2-webkit

関連情報

他の CSS レイアウト技術には以下のようなものがあります。

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

 このページの貢献者: mfuji09, Sebastianz
 最終更新者: mfuji09,