マルチカラムレイアウト段組の作成〜CSS3 | IT工房｜AI入門とWeb開発

一般的にWebで読みやすい行の長さは、約30文字から45文字前後くらいといわれています。具体的な文字数の根拠は不明ですが、あまり長すぎる行は読みにくい傾向になります。
＊「ブログデザインを考える：１行の字数とWEB幅」に1行の文字数について比較など掲載されています。
幅広のレイアウトで文章を読みやすくする手段として段組があります。雑誌などの印刷物では段組が多く取り入れられています。ワードなどの文章作成で活用した経験がある方もいると思います。
CSS３のマルチカラムレイアウトモジュールでこれと同等のことができるようになりました。
今回はCSS3を使った段組作成の方法の解説です。
CSS3を使用した段組を作成する方法は大きく分けて２つあります。

カラム数を指定して分割する方法
カラム幅を指定して分割する方法

カラム数を指定する方法

column-countプロパティに分割する数字を値に指定します。

column-countプロパティを使用したサンプル
CSS

div{
  column-count:2;
}

カラム幅を指定する方法

column-widthプロパティに分割する数字を値に指定します。

column-widthプロパティを使用したサンプル
CSS

div{
  column-width:150px;
}

column-widthプロパティはwidthプロパティと同時に指定することができます。
＊column-widthプロパティと段組の余白の合計値がwidthプロパティと一致しない場合は最小値として計算されます。

column-widthプロパティとwidthプロパティを併用使用したサンプル
CSS

div{
  column-width:150px;
  width:648px;
}

カラムの余白設定とカラム間の区切り線

通常のカラムとカラムの間の余白は１emです。もし余白の値を決めたい場合はcolumn-gapプロパティを使用します。
カラム間に区切り線を使いたい場合は、column-ruleプロパティを使用します。

column-gapプロパティとcolumn-ruleプロパティを使用したサンプル

div{
  column-width:150px;
  column-gap:2em;
  column-rule:1px solid #000;
}

段組作成テクニック

カラム内にimgタグで画像を挿入する場合、画像のサイズがカラムより大きければ、画像は見切れたり、はみ出したりします。
それぞれの表現はブラウザ依存になります。

このときは、max-width:100%で対応するとよいでしょう。
画像がはみ出したサンプル

column-span:all

ある特定要素（見出しなど）をカラムから外したい場合は、その要素に対してcolumn-span:allを指定します。
ただし、このプロパティはすべてのブラウザには対応していません。（firefoxなど）

column-span:allを使用したサンプル
CSS

h2{
  column-span:all;
}

break-before: columnとbreak-after: column

ある要素の直前または直後での改ページや改コラムの指定をする「break-before: column」と「break-after: column」が用意されていますが、対応ブラウザが少なく（IEのみ対応）実質的に使えない状況です。
break-before: columnのサンプル