新聞や雑誌のように、長い文章を複数の段に分けて表示する——このいわゆる「段組み」を、CSS だけで手軽に実現できるのがマルチカラムレイアウトです。column-count で段の数を指定したり、column-gap で段の間隔を空けたりと、専用のプロパティが用意されています。この記事では、段組みの基本となる columns・column-count・column-gap を中心に、段の間に罫線を引く column-rule や見出しを全段ぶち抜きにする column-span まで、実際の表示を見ながら初心者の方にも分かるように解説します。
目次
マルチカラム（段組み）とは
マルチカラムレイアウトは、ひとつの要素の中にある文章を、自動的に複数の段（カラム）へ流し込む仕組みです。段の中身は上から下へ、そして次の段の上へと続いていくため、新聞のコラムのような読み方になります。文章の量が変わっても、CSS 側で「何段にするか」「段の間隔をどうするか」を決めておけば、あとはブラウザが自動で振り分けてくれます。
横幅の広い画面で一行があまりに長いと、次の行の先頭を探すのに視線が大きく動き、かえって読みにくくなります。段組みで一行を短く保つと、この負担をやわらげられるのが利点です。なお、要素を横に並べる用途では Grid や Flexbox がよく使われますが、マルチカラムは「ひとつながりの文章を段に分けて流す」ための機能で、目的が異なります。要素の配置を細かく制御したいなら Grid・Flexbox、長文を読みやすく段組みしたいならマルチカラム、と考えると分かりやすいでしょう。
column-count で段数を指定する
もっとも基本的な使い方は、段組みにしたい要素に column-count で段の数を指定することです。次の例では、文章を2段に分け、column-gap で段の間隔を32px空けています。プレビューの値を書き換えると、すぐに段の数や間隔が変わります。
<div class="article">
<h3>コーヒーの歴史</h3>
<p>コーヒーの起源には諸説ありますが、エチオピアの高原で発見されたという伝説が有名です。ヤギ飼いのカルディが、赤い実を食べたヤギが元気に飛び跳ねるのを見て、その実に気づいたと伝えられています。</p>
<p>やがてコーヒーはアラビア半島へ渡り、イスラム世界で「眠らない修行のための飲み物」として広まりました。その後、ヨーロッパへと伝わり、各地にコーヒーハウスが生まれます。人々はそこで議論を交わし、コーヒーハウスは情報交換の場として社会に大きな影響を与えました。</p>
<p>日本にコーヒーが伝わったのは江戸時代の長崎・出島だとされています。当初は薬のように扱われていましたが、明治以降に喫茶店文化が花開き、今では日々の暮らしに欠かせない一杯になりました。</p>
</div>
.article {
/* 2段組みにして、段の間を32px空ける */
column-count: 2;
column-gap: 32px;
font-family: sans-serif;
line-height: 1.8;
padding: 8px;
}
.article h3 {
margin-top: 0;
}
.article p {
margin: 0 0 1em;
text-align: justify;
}
ポイントは、段組みにしたい要素そのものに指定することです。この例では、文章を囲む親要素（.article）にプロパティを付けています。子要素の <p> や <h3> は自動的に段へ流し込まれ、こちらで一つずつ配置する必要はありません。
column-width で幅から段数を自動で決める
段数を固定するのではなく、「1段あたりの幅」を基準にして段数を自動で決めることもできます。それが column-width です。指定した幅を目安に、要素の横幅に収まるだけの段が作られます。
.article {
/* 1段あたり約200pxを目安に、入るだけ段を作る */
column-width: 200px;
}この書き方は、画面幅に応じて段数が変わるのが特徴です。広い画面では段が増え、狭いスマートフォンでは1段になるため、メディアクエリを書かなくてもある程度レスポンシブに対応できます。「幅を優先したいなら column-width」「段数を優先したいなら column-count」と覚えておくとよいでしょう。ちなみに column-width は指定幅そのものに固定するのではなく、あくまで「目安」として扱われ、実際の段幅は残りのスペースに合わせて調整されます。
columns でまとめて指定する
columns は、column-width と column-count をひとつにまとめて書ける一括指定プロパティです。値はスペースで区切って並べ、長さの値が column-width、数値だけの値が column-count として解釈されます。
.article {
/* 「1段200pxを目安に、最大3段まで」という指定 */
columns: 200px 3;
}
/* 段数だけ指定したいとき */
.simple {
columns: 2;
}columns: 200px 3; は「1段あたり200pxを目安にしつつ、段は最大でも3段まで」という意味になります。幅による自動調整と段数の上限を両立させたいときに便利です。片方だけを書くこともでき、その場合はもう一方が既定値（auto）になります。3つのプロパティの役割を整理すると次のとおりです。
| プロパティ | 指定する内容 |
|---|---|
column-count | 段の数を直接指定する |
column-width | 1段あたりの幅を目安にして段数を自動で決める |
columns | 上の2つをまとめて書く一括指定 |
column-gap で段の間隔を調整する
column-gap は、段と段の間の余白を指定するプロパティです。指定しない場合は既定で normal（多くのブラウザで 1em 相当）になります。段どうしが近すぎて読みにくいときや、逆に間隔を詰めて情報を密に見せたいときに調整します。
.article {
column-count: 3;
column-gap: 40px; /* 段の間を40px空ける */
}なお column-gap は、Flexbox や Grid でおなじみの gap プロパティと同じ「段（列）方向のすき間」を指定するもので、マルチカラムでも gap と書いて同じ効果を得られます。段組みだけを扱うときは、意味が分かりやすい column-gap を使うとよいでしょう。
column-rule と column-span で紙面らしく仕上げる
段組みをより新聞・雑誌らしく見せるプロパティが2つあります。ひとつは段の間に区切りの罫線を引く column-rule、もうひとつは見出しなどを全段またいで表示する column-span です。次のプレビューでは、3段組みに罫線を引き、見出しを全段ぶち抜きにしています。
<div class="news">
<h3 class="news__title">段組みで読みやすい紙面をつくる</h3>
<p>column-rule を使うと、段と段の間に罫線を引けます。新聞や雑誌のように、段の区切りがはっきりして読みやすくなります。線の太さ・スタイル・色は border と同じ書き方で指定できます。</p>
<p>column-span: all を見出しに指定すると、その要素だけが全段をぶち抜いて横いっぱいに広がります。上の見出しがすべての段をまたいでいるのは、この指定によるものです。</p>
<p>段組みは長い文章を限られた横幅に収めつつ、一行を短く保てるのが利点です。一行が長すぎると視線の移動が大きくなり読みにくくなりますが、段組みならその負担をやわらげられます。</p>
<p>column-gap で段の間隔を、column-rule で区切り線を調整しながら、読みやすい紙面を目指してみましょう。</p>
</div>
.news {
column-count: 3;
column-gap: 28px;
/* 段の間に罫線を引く（太さ スタイル 色） */
column-rule: 2px solid #d0d0d0;
font-family: sans-serif;
line-height: 1.8;
padding: 8px;
}
.news__title {
/* 見出しを全段ぶち抜きで表示する */
column-span: all;
margin: 0 0 0.6em;
color: #4a3aff;
}
.news p {
margin: 0 0 1em;
text-align: justify;
}
column-rule は、border とまったく同じ「太さ・スタイル・色」の書き方で罫線を指定します。この罫線は column-gap の中央に描かれ、段の幅を広げたり文章を押しのけたりしません。太さを増やしたいときは、そのぶん column-gap を広げておくと窮屈になりません。
column-span: all は、指定した要素をすべての段をまたいで横いっぱいに表示します。見出しや画像を全段ぶち抜きにして、段組みの上に大きく見せたいときに使います。既定値は none で、この場合は他の文章と同じように段の中へ流し込まれます。
段の高さがそろわない・途中で切れるとき
段の高さがばらつく
マルチカラムは文章を上から順に流し込むため、内容の量によっては最後の段だけ短くなり、段の高さがそろわないことがあります。これは不具合ではなく仕様です。どうしても各段の高さをそろえたい場合は要素の高さを固定する必要がありますが、文章が収まりきらないと段が横に増えていくため、可変の長文では無理にそろえないほうが扱いやすいでしょう。
見出しや画像が段の切れ目で分断される
段の変わり目で、見出しだけが前の段の一番下に取り残されたり、ひとまとまりの箱が上下に割れてしまったりすることがあります。この場合は、割りたくない要素に break-inside: avoid; を指定すると、その要素の途中で段が切り替わるのを防げます。カードのようなまとまった内容を段組みで並べるときに役立ちます。
.card {
/* この要素の途中で段が切り替わらないようにする */
break-inside: avoid;
}まとめ
CSS のマルチカラムを使えば、長い文章を新聞や雑誌のような段組みで読みやすく整えられます。要点を整理します。
column-countで段の数を、column-widthで1段の幅を目安に段数を自動で決める。columnsは上の2つをまとめて書ける一括指定。column-gapで段と段の間隔を調整する。column-ruleで段の間に罫線を、column-span: allで見出しを全段ぶち抜きにできる。- 段が途中で割れるのを防ぎたい要素には
break-inside: avoid;を指定する。
まずは column-count と column-gap の2つから試してみてください。それだけでも、横に長い文章がぐっと読みやすくなるはずです。慣れてきたら罫線や全段ぶち抜きを加えて、紙面らしいレイアウトに仕上げてみましょう。