雑誌風 2 カラム本文
新聞や雑誌のように本文を 2 段組みで流し込む、エディトリアルなレイアウトです。中身を分割する難しい計算は不要で、本文を包む要素に CSS の column-count:2 を指定するだけで、ブラウザがテキストを左段から右段へ自動で折り返します。
解説
新聞や雑誌のように本文を 2 段組みで流し込む、エディトリアルなレイアウトです。中身を分割する難しい計算は不要で、本文を包む要素に CSS の column-count:2 を指定するだけで、ブラウザがテキストを左段から右段へ自動で折り返します。段の間隔は column-gap、段と段の間の細い罫線は column-rule で引いており、紙面のような落ち着いた佇まいになります。
向いている用途
読み物系のブログ記事、社史やブランドストーリー、エッセイやインタビューの導入文など、文章をじっくり読ませたい場面に合います。一行が長すぎると視線が迷子になりますが、段組みにすると一行が短くなり目線の移動が楽になります。
- 段数：
column-countの数値で段の本数を変えられます。3 段にすると、より新聞的な密度になります。 - 罫線：
column-ruleの色や太さで紙面の硬さを調整できます。外すと柔らかい印象です。 - スマホ対応：狭い画面では
column-count:1に戻し、一段で読みやすくする分岐を入れてあります。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
段の数を増やせますか
はい。本文要素の column-count の値を 3 などに変えれば段数が増えます。ただし画面が狭いと一段あたりが窮屈になるため、スマホでは 1 段に戻す指定を併用してください。
段と段の間の線は消せますか
消せます。column-rule の指定を外すか none にすれば罫線が消え、余白だけで段を分ける柔らかい見た目になります。間隔は column-gap で調整します。