【57-1】マルチカラムのカラム数を決める column-countプロパティ

今回から マルチカラム レイアウト（Multi-column Layout） を使ってみよう。
マルチカラムとは段組みのこと。
ボックスレベルの要素に指定すれば、中のテキストが勝手に複数のカラムになって並ぶという仕様です。

フレックスボックスや、グリッドレイアウト（これはまだ記事にしてません）も、横並びにレイアウトできるヤツですが、親要素の中にある子要素がアイテムになります。
マルチカラム レイアウト は小要素なしで中身を複数のカラムに分けます。

マルチカラムは、長めの文章（Webマガジンの記事とか、小説とか論文とか）を読みやすくするのに使う感じです。

マルチカラムは、ブロックレベル要素に
・column-countプロパティ
・column-widthプロパティ
のどちらか一方を指定すれば作れます。

というわけで今回は、まず column-countプロパティを使ってみよう。
これは、カラム数をいくつにするか指定するプロパティです。

本日のINDEX

1. column-countプロパティの値
2. column-countプロパティを使ってみる
   1. カラム同士の間隔は 自動で「1em」

マルチカラム関連のプロパティは、下記のように記事を分けます。

【57-1】マルチカラムのカラム数を決める column-countプロパティ　←今日はココ

【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

【57-3】カラム数と幅をまとめて指定する columnsショートハンド

【58】各カラムの間隔を指定する column-gapプロパティ

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

【59-2】カラム間の罫線の幅を指定する column-rule-width

【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ

【59-4】カラム間の罫線をまとめて指定する column-rule

【60】マルチカラム内で段抜きができる column-spanプロパティ

【61】各カラムの埋め方を決める column-fillプロパティ

（ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか

参考：
・CSS Multi-column Layout Module Level 1 | W3C Working Draft
・CSS 段組みレイアウト | MDN

column-countプロパティの値

column-countプロパティの値は「auto」か「整数」だけです。

column-countプロパティ
キーワード	auto 。これがデフォルト値。
<integer>	整数（単位なし）
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ

値の継承	しない	適用できる要素	ブロックレベルの要素 ただし table関連のブロック要素は除く

column-countプロパティを使ってみる

さっそく column-countプロパティを試してみます。

まだ何も指定していない状態のサンプルを見てください。
<div>要素の中に2つの <p>要素を仕込んで、わかりやすいように <p>要素を色分けしています。

column-countを使ってみたサンプルです。カラムの数は3つ。カラム同士の間隔（column-gapプロパティ）は指定していませんので値はデフォルトの normalになり、マルチカラムレイアウトでは normal=1em になります。

column-countプロパティは、ほぼ全部のブラウザが実装していますが、 古い Safari（iOS含む）に対応させたいなら一応 -webkit- ベン ダープレフィックスをつけたほうがいいかも。

ここまでの HTMLはこちら。

<div class="sample">
  <p style="background:#f0f">
    column-countを使ってみたサンプルです。（..略..）
  </p>
  <p style="background:#3cf">
    column-countプロパティは、ほぼ全部のブラウザが（..略..）
  </p>
</div>

カラムを3個作ってみます。
サンプル全体を囲む<div>要素に column-count: 3 と指定するとこうなります。

column-countを使ってみたサンプルです。カラムの数は3つ。カラム同士の間隔（column-gapプロパティ）は指定していませんので値はデフォルトの normalになり、マルチカラムレイアウトでは normal=1em になります。

column-countプロパティは、ほぼ全部のブラウザが実装していますが、 古い Safari（iOS含む）に対応させたいなら一応 -webkit- ベン ダープレフィックスをつけたほうがいいかも

CSSはこちら。（HTMLは先程と同じ）

.sample {
	-webkit-column-count:3;  /* ←古いブラウザ用*/
	column-count:3;
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	text-indent:1em;
	line-height:1.4em;
	margin:1.3em 0 0}  /* p要素に上マージン*/
.sample p:first-child {
	margin:0}  /* 最初のp要素だけ上マージンがあると変なので取っています*/

マルチカラムが指定された要素の中身は、<p>要素（子要素）の個数とか関係なく、テキスト全部通してカラムに分けられます。
このときカラムの幅（column-width）は指定していないのでデフォルトの column-width: auto で、ブラウザが自動でカラム幅を決めます。

というわけで、column-count で指定すると、幅が狭いデバイスでも カラムに分けられて、逆に文字が読みにくくなってしまうこともあります。
column-width（次回やります）だと、画面幅に合わせてフレキシブルにカラム数を変えるので、マルチデバイス対応。

カラム同士の間隔は 自動で「1em」

カラム同士の間隔は column-gapプロパティ（【58】で記事にします）で指定できますが、ここでは何も指定していないので、デフォルトの column-gap: normal です。
マルチカラムレイアウトでの column-gap: normal は 1em なのでカラム間隔が自動で 1em になります。

図説するとこんな感じ↓（PC版Firefoxでのプレビューです）

間隔を変えたいなら、例えば 2em にしたければ column-gap: 2em と指定すればOK。

＊フレックスボックスや グリッドレイアウトでの column-gap: normal は「0」です。
レイアウトモードによってデフォルトが変わるので、ややこしいですけどね。

次回予告

今回はカラムの数を指定しました。
次回はカラムの幅を指定する column-widthプロパティを使おう。

カラム数で指定すると、小さな画面でもカラムに分けられて逆に文字が読みにくくなってしまうこともありますが、カラム幅を指定する方法だと、小さい画面では1カラムに、大きな画面では2つ以上のカラムに分けるのでフレキシブルです。