columnsで作る段組みレイアウト
最近のWEBサイトレイアウトはgridあるいはflexで設計するのが一般的ですが、もう少しするとそれも古い話となるのかも知れません。
今記事と次記事で段組みレイアウト（multi column layout）をまとめておきたいと思います。
column-widthとcolumn-countとcolumnsプロパティ
デモ用に平家物語を引用します。
平家物語
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高(てうかう)、漢の王莽(わうまう)、梁の朱忌(しうい)、唐の祿山(ろくさん)、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
おおまかな構造は、
<div id="demo">
<h2>平家物語</h2>
<p>・・・</p>
<p>・・・</p>
<p>・・・</p>
</div>をイメージしておいてください。
column-countプロパティ
column-count は非常にわかりやすく、整数でカラム数を指定します。
#demo{
column-count: 2;
}
平家物語
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高(てうかう)、漢の王莽(わうまう)、梁の朱忌(しうい)、唐の祿山(ろくさん)、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
ブラウザサイズに合わせて自動的に２カラム表示となりましたが、自動で最小のheightになるため２つめのボックスが途中でぶつ切りになっています。「平家物語」のタイトルも全幅表示の方が良さそうです。
これらは後ほど解決するとして、次はcolumn-widthの説明です。
column-widthプロパティ
column-widthプロパティは、カラムの最小幅を指定します。指定された幅にあわせて自動的にレイアウトが生成されます。なお、最後のカラムは必ずしもこのwidthになるとは限りません。
#demo{
column-width: 140px;
}平家物語
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高(てうかう)、漢の王莽(わうまう)、梁の朱忌(しうい)、唐の祿山(ろくさん)、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
140px幅なので、モバイルでは２〜３カラム。PCでは４〜5カラムぐらいで表示されていると思います。
注意１：column-countはcolumn-widthに優先する
column-countとcolumn-widthが両方指定されている場合 column-countが優先されます。
ただしcolumn-widthは最小幅として扱われるため、カラム幅がcolumn-widthより小さくなってしまうことはありません。
次のデモは320pxのコンテナに、column-count: 3; column-width:140px を指定しているので、２カラムで表示されているはずです。
平家物語
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高(てうかう)、漢の王莽(わうまう)、梁の朱忌(しうい)、唐の祿山(ろくさん)、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
注意２：column-gap column-rule-width を考慮する必要
column-widthプロパティで段組みレイアウトを設計する場合、カラム間の余白を決めるcolumn-gapプロパティ、カラム間の区切り線を指定するcolumn-ruleプロパティを考慮する必要があります（各プロパティについては後述します）。
段組みレイアウトにおけるcolumn-gapは初期値が1emとなっているので、column-gapを考慮していないと意図せぬレイアウト崩れを起こす場合があります。
column-ruleはcolumn-rule-style（solidとかdashedとか）を指定していなければ０ですが、区切り線を表示する場合にはcolumn-rule-widthの幅を考慮する必要があります。
注意３・%は使えない
column-widthには、px em rem vwなど、lengthタイプの指定が必要です。%を指定するとエラーが出ます。（執筆時時点）
calc、min、max、clamp は使えますが、%を含んではいけません。
columnsプロパティ（ショートハンド）
column-countとcolumn-widthを一気に指定するプロパティとしてcolumnsプロパティが用意されています。
columnsは、
- column-count・column-widthを空白区切りで指定
- 順番はどっちでも良い
- 片方だけの指定でも良い
ので、何にせよcolumnsプロパティを使った方が便利です。
では、初っ端にでた「タイトルは全幅に」と「ボックスのぶつ切れをさせない」という２つの問題をクリアしていきます → 次のページ
