ここでは、文章をタテに分割表示させることができるcolumn系プロパティについて見ていきたいと思います。column系プロパティは意外と知られていないものなので初めて知った方もいるかもしれません。実例を見ながらどんなものかを理解していきましょう。

カラム数を指定するcolumn-countプロパティ

column-countプロパティは、値に数字を入力して何カラムにするかを指定するプロパティです。column系プロパティの使い方は、すべてpタグやdivタグなどで文章全体をくくり、これをセレクタとして指定します。

column-count: 2;で２カラムを指定

ボタンで表示を切り替えてご覧ください。

See the Pen column01 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-count: 2;
}

２カラムを作ってみました。カラム数を指定すると、横幅に応じてキレイに分割されます。

column-count: 3;で３カラムを指定

See the Pen column02 by kenichi (@ken81) on CodePen.

今度は、３カラムです。column-countプロパティについてはこれで大丈夫でしょう。次に行きます。

カラムの幅を指定するcolumn-widthプロパティ

column-widthは、カラムの幅を指定するプロパティです。指定された幅のカラムが要素の横幅の分だけ作成されます。この設定のみだと何カラムになるのかは、要素の横幅に依存します。

See the Pen column03 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-width: 10em;
}

ここでは、カラムの幅を10emにしてみました。pxでも良いですが文章の幅を指定するので単位はemの方が自然かもしれませんね。ちなみにこのプロパティでは値にパーセント(%)は指定できませんでした。パーセントを使うならcolumn-countプロパティでカラム数を指定すべきでしょう。

カラム数とカラムの幅のショートハンドcolumnsプロパティ

columnsプロパティは、上記の２つのプロパティ（column-count, column-width）を同時に指定できるショートハンドプロパティです。半角スペースで２つの値を指定します。順番はどちらが先でも問題ありません。

See the Pen column04 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  columns:3 100px;
}

カラム数を３、幅を100pxに指定しました。パソコンで見る限り、ちゃんと表示されているように見えますがブラウザの幅によっては、指定通りになっていないかもしれません。というのも、このプロパティは２つの値のバランスを取ってレイアウトされるそうなので、ちょっと挙動が把握しずらいです・・・。でも、変にデザインが崩れるわけでもないのでよしとしましょう。

カラムとカラムの間の線を設定するcolumn-ruleプロパティ

column-ruleプロパティは、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの３つをまとめたショートハンドです。borderプロパティと同じといえば分かりやすいでしょうか。線の色（color）、幅（width）、スタイル（style）の３つの値を半角スペースを空けて入力します。３つの値の順番は関係ありません。

それではいくつかサンプルを見てみましょう。

See the Pen column05 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-count: 3;
  column-rule:1px solid #666;
}

実線を引きました。

See the Pen column06 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-count: 3;
  column-rule:1px dotted #666;
}

点線にしてみました。

See the Pen column07 by kenichi (@ken81) on CodePen.

CSS

html{
  background:#ececec;
  font-family:Times New Roman;
}
h1{
  text-align:center;
}
.column-container {
  column-count: 3;
  column-rule:1px solid #333;
}

英新聞風のデザインにしてみました。

ふーん、って感じですかね。
column関連プロパティは、今すぐあのデザインに使おうみたいなものではありませんが、知っておくと何かに使えそうですね。