CSS3 マルチカラムレイアウト

Volardev 編集部 April 13, 2026

CSS3 のマルチカラム（Multiple Columns）レイアウトを使用すると、新聞の紙面のようにテキストを複数のカラム（段）に分割して表示させることが可能になります。

1. CSS3 マルチカラムプロパティ

CSS3 では、段組みレイアウトを制御するために以下のプロパティが導入されました。

column-count プロパティは、要素をいくつのカラムに分割するかを指定します。

以下の例では、<div> 要素内のコンテンツを 3 つのカラムに分割します。

div {
  /* コンテンツを3カラムに分割 */
  column-count: 3;
}

column-gap プロパティは、カラムとカラムの間の余白（ギャップ）を指定します。

以下の例では、カラム間の余白を 40px に設定します。

div {
  column-count: 3;
  /* カラム間の余白を40pxに設定 */
  column-gap: 40px;
}

column-rule プロパティ群を使用すると、カラム間に境界線を引くことができます。これは、通常の border プロパティと同様の感覚で設定可能です。

境界線のスタイル（実線、点線など）を指定します。

div {
  column-count: 3;
  column-gap: 40px;
  /* カラム間の境界線を実線に設定 */
  column-rule-style: solid;
}

境界線の太さを指定します。

div {
  column-rule-width: 1px;
}

境界線の色を指定します。

div {
  column-rule-color: lightblue;
}

上記のプロパティは、column-rule で一括指定することができます。

div {
  /* 太さ、スタイル、色を一括指定 */
  column-rule: 1px solid lightblue;
}

column-span プロパティは、特定の要素がいくつのカラムをまたいで表示されるかを指定します。

例えば、記事の見出しをすべてのカラムにわたって横断させたい場合に all を指定します。

h2 {
  /* すべてのカラムをまたいで表示 */
  column-span: all;
}

column-width プロパティは、カラムの最適な幅（推奨される最小幅）を指定します。ブラウザは、この幅を維持しながら、利用可能なスペースに基づいてカラム数を自動的に調整します。

div {
  /* 各カラムの最適な幅を100pxに設定 */
  column-width: 100px;
}

プロパティ	説明
`column-count`	要素を分割するカラムの数を指定。
`column-fill`	カラムの内容をどのように充填するか（バランス調整など）を指定。
`column-gap`	カラム間の余白を指定。
`column-rule`	`column-rule-*` プロパティを一括設定するショートハンド。
`column-rule-color`	カラム間の境界線の色を指定。
`column-rule-style`	カラム間の境界線のスタイルを指定。
`column-rule-width`	カラム間の境界線の幅を指定。
`column-span`	要素がまたがるカラムの数を指定。
`column-width`	カラムの最適な幅を指定。
`columns`	`column-width` と `column-count` を一括設定するショートハンド。

マルチカラムレイアウトは、レスポンシブデザインにおいて非常に強力です。画面幅に応じて column-count を動的に変更することで、モバイルでは 1 カラム、デスクトップでは 3 カラムといった新聞風の読みやすいレイアウトを容易に実現できます。