ほんっとにはじめての HTML5 と CSS3

マルチカラムで、カラム幅を計算せずに適当に指定してもカラムがコンテナにピッチリ収まるのは「カラム幅」や「カラム数」を決める計算式が W3Cの仕様として決まっているからなんです。

これは別に知らなくても困らないけど、読んでてへ〜と思ったのでメモっておきます。
今回はメモと言うより余談かも。

マルチカラムに関しては、下記のように記事を分けています。

【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プロパティ

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

カラム幅やカラム個数を決めるアルゴリズム

下記は、W3C仕様書にあるアルゴリズムのコピペです。
カラム数は N、各カラムの幅は W、マルチカラムを指定した要素の幅は Uです。

(01)  if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* not a multicol container */
(03)  if column-width = auto then
(04)      N := column-count
(05)  else if column-count = auto then
(06)      N := max(1,
(07)        floor((U + column-gap)/(column-width + column-gap)))
(08)  else
(09)      N := min(column-count, max(1,
(10)        floor((U + column-gap)/(column-width + column-gap))))

And:

(11)  W := max(0, ((U + column-gap)/N - column-gap))

なんじゃこりゃ...なこれ↑を、とにかく読み解いてみました↓

まず (01)〜(02) は、
column-width も column-count もどっちも auto ならブラウザは計算をやめる（exit）。（マルチカラムじゃないから）

次の (03)〜(04) は column-count だけ指定があればそれをそのままカラム数Nにする。

(05)〜(07) は、column-width だけ指定がある場合です。

関数がありますが、
floor関数は ( ) の中の計算結果に小数部分があればそれを取って整数にしたもの、
max関数は ( ) の中の数値の最大値を、min関数は ( ) の中の数値の最小値を返すということです。

(05) column-count の値が auto の時、
(06) (07) N は、
「U と column-gapの値を足した数値」を
「column-widthの値と column-gapの値を足した数値」で割った数の
小数部分を取って整数にしたものと「1」を比べて大きいほう

脳内イメージはこう↓　これでカラムが何個入るか計算をします。
（エディトリアルやグラフィックのデザイナーがよくやってる手法です）

(08)〜(10) は、column-count も column-widthも両方とも指定もある場合です。

(08) column-widthも column-countも autoじゃなければ、
(09) (10) N は、
「U と column-gapの値を足した数値」を
「column-widthの値と column-gapの値を足した数値」で割った数の
小数部分を取って整数にしたものと「1」を比べて大きいほうと
「column-countの値」とを比べて小さいほう

最後に W（カラム幅）の計算をします。

(11) W は、
「U と column-gapの値を足した数値」を N で割ったものから
「column-gapの値」を引いた数値と
「0」を比べて大きいほう

ちょっとサンプルを作って計算してみます

では実際にどうなるか、上の計算をしながらサンプルで試してみます。
マルチカラムを指定する要素に width: 270px と指定します。なので U は 270pxです。

（padding が指定されてても width が内容の幅（Content Area）だからね）

ここに column-width: 120px を指定。
column-count は指定なし。
column-gapは指定しなければデフォは 1emなので、ここでは font-size: 16px と指定したので column-gapは 16pxです。

(05)〜(07) の計算をします。
(270+16)÷(120+16)=286÷136=2.1029411で、小数を取ると 2。1 と 2では 2が大きいのでカラム数（N）は「2」です。

次に (11) の計算で、カラム幅を出します。
(270+16)÷2-16=143-16=127 で、カラム幅は 127px になります。
120pxと指定したけど、実際はちょっと多めでしたねw。
こうやって適当に指定しても、ピッチリとコンテナの中にカラムを埋めてくれるアルゴリズムなんですね。

上記の指定で 実際に作ってみたサンプルです↓

上の指定に、ちょっと意地悪して column-count: 3 を加えてみました。
ですが、さっきのサンプルと変わりありませんね。

これは、先程のアルゴリズムの (08)〜(10) のおかげ。
U（マルチカラムを指定した要素の幅）と column-gap と column-width の値でカラム数を出して、それと column-count の値との「最小値」をカラム数Nにするから。

で、その カラム数と U と column-gap で カラム幅も計算されるわけです。
無茶な指定でもブラウザが混乱しないようにあらかじめ計算方法が指定されているので便利ですね。

上のサンプルから column-width の指定を取ってみます。（column-count:3 だけにする）
ちゃんと カラム数が3になってますね。
これは、(03)〜(04) の column-count だけ指定された場合だからです。

一応サンプルのHTMLとCSSを貼っておきます。

<div class="sample">
 <p>（文章略）</p>
</div>
<div class="sample sample2">
 <p>（文章略）</p>
</div>
<div class="sample sample3">
 <p>（文章略）</p>
</div>

.sample {
	width:270px;         /*これが U*/
	column-width:120px;  /*最初はcolumn-widthだけ指定*/
    column-rule:solid 1px #ccc;
	text-align:justify;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:10px;
    }
.sample p {
	font-size:16px;
	line-height:1.4em;
	margin:0}
.sample2 {
	column-count:3;  /*2番目のサンプルでcolumn-countも追加*/
    }
.sample3 {
	column-count:3;    /*最後のサンプルはcolumn-countを残して*/
    column-width:auto; /*column-widthはデフォ値にしています*/
    }

次回予告

今回で マルチカラム関連の記事は一応終わりです。

次回からはGrid Layout（グリッドレイアウト）を使ってみよう。
Grid Layoutは、親要素をグリッド（格子）状に分割してできた「セル」に子要素を割り付けていく CSSのレイアウト方法です。

次回はまず、Grid Layoutの基本の概念を少しと、grid-template-rows、grid-template-columnsというプロパティを使ってみます。グリッドを作ってアイテムを流し込むという基本的なところまでやってみよう。

関連記事

• 【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
• 【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
• 【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
• 【62-3】セルやエリアを一括指定する grid-templateショートハンド
• 【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
• （ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
• 【62-1】Grid Layout の grid-template-rows, grid-template-columns
• （ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか
• 【61】各カラムの埋め方を決める column-fillプロパティ
• 【60】マルチカラム内で段抜きができる column-spanプロパティ
• 【59-4】カラム間の罫線をまとめて指定する column-rule
• 【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ
• 【59-2】カラム間の罫線の幅を指定する column-rule-width
• 【59-1】カラム間の罫線のスタイルを指定する column-rule-style
• 【58】各カラムの間隔を指定する column-gapプロパティ