cssのcolumns｜ボックス内の文章を任意のカラム数に自動で段組みする方法

カラムといえば、「メインコンテンツ」と「サイドバー」など、大きなボックス要素が思い起こされますが、ここで扱うカラムは、１つのボックスの中でテキストなどを折り返す「段組み」のことです。

このページでは、CSSで指定すると自動的に「均等な段組み」をレイアウトできる方法について、分かる範囲で解説していきます。

cssで段組みできる「column-」プロパティ

ボックスの中の要素を段組みするには、cssの「column-」プロパティを利用します。主に利用するのは「column-count」と「column-width」です。

これより先、それぞれのプロパティの具体的な動きを見ていきます。

cssの記述例は次のようになります。

○○○○ {
  column-count: 3;
}
※カラム数：3

○○○○ {
  column-width: 25em;
}
※（最小の）１段の幅：25em

○○○○ {
  columns: 3 25em;
}
※カラム数：3、（最小の）１段の幅：25em

３つ目の「columns」は同時に２つのプロパティ値が指定できます。

「columns」は値を１つにしても大丈夫です。
例えば「columns: 3」は「culumn-count: 3」と同じ意味です。
例えば「columns: 25em」は「culumn-width: 25em」と同じ意味です。

２つ同時に指定するとそれぞれのプロパティの動きが理解しにくくなるため、最初は「column-count」か「column-width」のいずれかだけ指定した方が理解しやすいと思います。

次にそれぞれのプロパティの具体的な動きを見ていきます。
なおこれより下のサンプル表示は、全て次のHTMLを共通で使用します。

<div class="○○○○">
  <p>ぼくの家から見える山が現在と同じような形になったのはおよそ5万年程前だといわれています。約30万年前に噴火が始まり、その後噴火が繰り返されたことによって、積もった火山灰や溶岩が次第に山を形成していき、標高1000メートルを越える山に成長していきました。</p>
</div>

カラム数を指定する「column-count」

「column-count」はカラム数を指定します。

○○○○ {
  column-count: 5;
}

上のように指定すれば「５つ」に段組みされます。「カラムは５つ、折り返し点はブラウザーにお任せ」というニュアンスです。

「column-count」の使用例

実際に「column-count」を指定してみます。

このように「column-count」を指定するだけで、自動的に１段の「幅」と「高さ」を揃えた位置で折り返してくれます。

1カラムの幅を指定する「column-width」

「column-width」は１つの段の（最小）幅を指定します。

○○○○ {
  column-width: 20em;
}

上のように指定すれば「１つの段の幅が（最小）20em」になるよう自動で段組みされます。「幅20em以上で、できるだけ多くの段をつくってね」というニュアンスです。

「column-width」の使用例

実際に「column-width」を指定してみます。

指定するのは「最小の幅」ですので、仮に「15em」と指定しても、ブラウザーが「この状況なら、22emの２段だね」といった具合に、自動的に１段の「幅」と「高さ」を揃えた位置で折り返してくれます。

画面幅によるレイアウトの動き

もし段組みを「手動」で行うなら、折り返し位置を決めてから「HTML」の中に記述することになります。

固定レイアウトなら問題ないですが、レスポンシブレイアウトだとデバイス幅によってボックスや文字のサイズが変わります。すると適切な折り返し位置のブレイクポイントが「デバイス幅によって変わる」ので、手動作業は難しくなります。

「column-」プロパティは、ブラウザーが「カラム幅と高さ」を自動調整して段組みしてくれます。これはレスポンシブレイアウトを作る上で、とてもうれしい機能です。

「column-count」を固定し画面幅を変えてみる

次の例では「column-count: 2;」のまま画面幅を変化させてみます。

同じテキストの内容でも画面幅によってブレイクポイントが変化し、「高さ」と「幅」のバランスをとってブラウザーが自動段組みしてくれます。

「column-width」を固定し画面幅を変えてみる

次に「column-width: 15em」のまま画面幅を変えてみます。

「column-width」は横幅が変化した時に「最小の幅」をキープしたまま段組みしてくれるので、「これ以上分けられないよ～」という場合には１段のまま表示されます。

レスポンシブデザインでの「column-」指定

「column-count」と「column-width」のどちらかだけ指定する場合、ボックス幅が可変となるレスポンシブデザインでは「column-width」の方が使いやすいかもしれません。

「column-count」は、大きな画面幅ではちょうどいいカラム数も、小さな画面幅では「細かく分けすぎ」になってしまう場合があります。

CSSのメディアクエリを利用して、デバイス幅に応じた「column-count」を指定する方法もあると思います。ただ、デバイス幅とボックス幅がいつも正比例するとは限りません。

こういった悩ましさを解消するには「column-count」と「column-width」を両方指定する方法が有効です。

「column-count」と「column-width」両方を指定

両方を指定すれば「いいとこ取り」ができます。「columns: 2 11em」を指定してみます。

仮に「columns: 2」だけの指定では、360pxで2カラムになります。
仮に「columns: 11em」だけの指定では、650pxで3カラムになります。

それを「columns: 2 11em」と指定することで、「最小の1段の幅は11em」を保ったまま「カラム数は2まで」を保ってくれます。

「column-」の装飾系のプロパティ

「column-」には段組みを装飾するプロパティが用意されていますので、簡単にご紹介します。

「column-gap」段と段の間の余白を指定

段の間にできる余白サイズを指定できます。

○○○○ {
  column-gap: 30px;
}

「column-rule」段と段の間に罫線を指定

段の間にできる余白に罫線を引くことができます。borderプロパティなどと同じような指定方法です。

○○○○ {
  column-rule: 1px solid orange;
}

「線の太さ」「線の種類」「線の色」を分けて記述することもできます。

○○○○ {
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: orange;
}

「column-gap」「column-rule」での装飾例

最後に２つの装飾系プロパティを加え、画面幅ごとの表示をしてみます。

○○○○ {
  columns: 2 11em;
  column-gap: 25px;
  column-rule: 1px dashed yellowgreen;
}

360pxで1カラムになった時「column-gap」と「column-rule」は効きません。この２つはあくまで「行の間にできる余白」を装飾するプロパティです。