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

最終更新日:2020年11月12日  (初回投稿日:2020年11月12日)

マルチカラムで、カラム幅を計算せずに適当に指定してもカラムがコンテナにピッチリ収まるのは「カラム幅」や「カラム数」を決める計算式が 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-rowsgrid-template-columnsというプロパティを使ってみます。グリッドを作ってアイテムを流し込むという基本的なところまでやってみよう。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2021/04 | 05
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.