1行の文字数が多くなるとどうしても読みづらくなってしまいます。そのような時に本分の部分を複数のカラムに分けると読みやすくなる事があります。今回はスタイルシートで文章を複数のカラムに分ける段組みの事をまとめてみました。

設定できる項目はカラムの数、カラム同士の幅、カラム間の線になります。
img_620
カラムの数の設定から見ていきましょう。カラム数は「column-count:カラムの数;」で指定します。ベンダープレフィックス-moz-、-webkit-も併記します。

column-count:3;
-moz-column-count:3;
-webkit-column-count:3;

カラム同士の間隔は「column-gap:ピクセル;」で指定します。

column-gap:50px;
-moz-column-gap:50px;
-webkit-column-gap:50px;

カラム間に罫線を引きたい場合はcolumn-ruleを使います。これはborderの指定と同様に指定できます。

column-rule:#F69 1px dashed;
-moz-column-rule:#F69 1px dashed;
-webkit-column-rule:#F69 1px dashed;

カラムからURLなど長い英文等で文字がはみ出してしまう事があります。word-breakを使ってカラム内に納めます。

word-break:break-all;

サポートするブラウザ
FirefoxGoogleChromeSafariOperaInternetExplorer10