CSSのcolumn-widthとcolumn-countは列幅と列数のどちらを優先するかで使い分ける

画面幅に応じて列数を変えたいならcolumn-width、常に決まった列数へ分けたいならcolumn-countを使います。両方を指定すると、column-countは列数の上限になります。先に列幅と列数のどちらを守りたいかを決めてください。

CSSの段組みでは、文章のHTMLを列ごとに分割しません。一つの要素に含まれる内容が、複数のcolumn boxへ順に流れます。見た目の列を増やすために本文を二重管理する必要はありません。

column-widthは読みやすい列幅を基準にする

column-widthには長さを指定します。指定値を基準に、利用できる横幅へ収まる列数が決まり、実際の列幅は横幅に合わせて調整されます。

.article-summary {
  column-width: 18em;
  column-gap: 2em;
}

この指定では、広い表示領域なら複数列になり、狭い表示領域なら列数が減ります。二列を維持するために一列を極端に細くする設計ではありません。文章を読むための幅を先に決めたい場合に向いています。

column-gapは列の間隔です。列幅を決めるcolumn-widthとは役割が違います。本文の幅だけを見ず、列間を含めて表示領域へ収まるか確認します。

column-countは必要な列数を指定する

column-countには0より大きい整数を指定します。表示領域を指定した列数へ分けたい場合に使います。

.service-comparison {
  column-count: 2;
  column-gap: 2em;
}

この例は二列を指定します。親要素が狭くなっても、列数を変える指定は含まれていません。狭い画面でも二列が必要か、文字が読める幅を保てるかを実機で確認してください。

説明用の仮例として、短い概要を左右二列に見せるならcolumn-count: 2で意図を表せます。一方、長い記事を画面幅に応じて一列から三列へ変えたいなら、列数よりcolumn-widthを基準にする方が管理しやすくなります。

両方を指定すると列数に上限が付く

column-widthとcolumn-countの両方がauto以外なら、指定したcolumn-countは最大列数として働きます。十分に広い画面でも、それを超える列数にはなりません。

.news-list {
  column-width: 16em;
  column-count: 3;
  column-gap: 1.5em;
}

この指定は、16emを基準に列幅を決めながら、列数を最大三列に抑えます。「列を増やせるだけ増やす」のではなく、読みやすい列幅と編集上の上限を同時に持たせる指定です。

両方を指定すべきか迷うなら、最初はcolumn-widthだけで表示を確認します。列が増えすぎて文章のまとまりを追いにくい場合に、column-countで上限を加えます。

columns短縮形では省略した値がautoへ戻る

columnsはcolumn-widthとcolumn-countをまとめる短縮形です。

.article-summary {
  columns: 18em 3;
}

値はどちらか一方だけでも指定できます。columns: 18emならcolumn-widthが18em、column-countがautoです。columns: 2ならcolumn-countが2、column-widthがautoです。

短縮形を書き直すと、省略した側は以前の値を保持せず、初期値のautoへ戻ります。別の規則で個別指定している場合は、短縮形がどちらの値も設定することを忘れないでください。

段組みは文章の読み順と運用で判断する

段組みを使えば、必ず読みやすくなるわけではありません。長い列を下まで読んでから隣の列へ移る表示では、画面の上下移動と列の移動が重なることがあります。短い概要、注釈、一覧など、全体の高さを見渡しやすい範囲から試してください。

制作を委託するときは、「二列にする」という見た目だけでなく、対象となる表示幅、守りたい列幅、最大列数、列間、適用する文章の長さを指定します。本文の正本は一つのHTMLに保ち、編集者が列ごとの文章を手作業で入れ替えない運用にします。

最初の確認では、内容が最も長いページを使い、狭い幅、中間の幅、広い幅で列数、列幅、読み順を見ます。列数が意図どおりでも読みにくいなら、段組みを外す判断を優先してください。