column-countプロパティで文章や要素を段組み(マルチカラム)表示する方法について【CSS】

文章や要素を段組み(マルチカラム)表示するにはいくつか方法があります。
メニューなどのリスト系についてはdisplay: flex;やdisplay: grid;でグリッドレイアウトで対応できます。今回は雑誌などのように1つの文章や要素を段組み表示する場合に向いているcolumn-countプロパティについて解説していきます。

column-countプロパティについて

column-countプロパティは、指定した要素の中身(または子要素)を段組み(マルチカラム)で表示する事が出来るプロパティです。初期値はautoとなり、段組み表示する場合は「2」や「3」などの希望の列数(整数)を指定します。

次項で詳しい使い方や表示例を解説していきます。

column-countプロパティの使い方と表示例

column-countプロパティの使い方は以下のようになります。

p {
    column-count: auto または 整数;
}

上記のように指定する事で希望の列数で表示ができます。
例として、以下のように1つの文章を3列表示にしてみます。

<p>カムパネルラのうちへもつれて行った烏瓜のあかりのようにはね起きました。胸はなんだか、泣きだしたいのをこらえておこったようになって、まもなく帰ってくるよああ行っておいで。そして誰にも聞こえないようになってとまってじっと川の微光を受けているのに気がつきました。きっとみんなのほんとうの神さまってどんな神さまですほんとうの神さまですほんとうの神さまがおっしゃるんだわそんな神さまうその神さまよそうじゃないよあなたの神さまがほんとうの天上へさえ行ける切符だ。月のあかりは汽車が通るときだけ青くなるようになって、まもなくジョバンニは走りだして黒い丘の方へ歩いて行ってしまいました。</p>

p {
    column-count: 3;
}

このように指定した値での段組みが可能です。
今回は1つの文章で表示していますが、複数の子要素などを段組み表示する事も可能です。ただし、要素の途中で切られて次の列に表示されるという事もありますので、そういった場合には冒頭で述べたように他の手段(グリッドレイアウト等)で対応した方が良い場合もあります。

関連するプロパティについて

column-countプロパティに関連するプロパティがいくつかありますので簡単にですが解説していきます。

column-widthプロパティ

段組みする要素の幅を指定できます。
指定出来る値は正の値となり、pxやrem・em・vwなどいろいろ指定できますが%は無効となります。

column-gapプロパティ

段組みした要素間の余白を指定できます。
pxやrem・em・vw・%などいろいろ指定可能です。display: flex;などでも使用されているプロパティですので、こちらは馴染みがあるかもしれません。

column-ruleプロパティ

段組みした要素間の区切り線を指定できます。
borderプロパティと同じように線の種類・太さ・色を指定できます。

上記が主な関連するプロパティとなります。
column系のプロパティ(主にcolumn-widthプロパティ)に言える事なのですが、「あくまでも指定した値になるように都度計算される」というものであって、必ずその指定した値になるわけではありません。「あくまでも」というのが少し厄介ですので、きっちりと指定したレイアウトになるようにする場合は他の手段で段組みした方がいいかもしれません。

私個人としては、1つの文章のや雑誌などのような文章の段組みの場合はcolumn-countプロパティを使用する事があります。

さいごに

いかがでしたでしょうか。
今回は、column-countプロパティで文章や要素を段組み(マルチカラム)表示する方法について解説しました。
段組みする方法はいくつかありますので、場面に応じた適切な方法でコーディングできるようにしていきたいですね。