Mar. 16th,2021
マルチカラム・レイアウトについて
“マルチカラム・レイアウト”とは？
“マルチカラム・レイアウト(Multi-column Layout)”は要素のコンテンツを2列以上の列に分けて配置するCSSのレイアウトによる方法です。書籍、雑誌、新聞などでは広く用いられ、“段組み”とも言います。
.multi-column {
column-count: 3;
}
<div class="multi-column">
<p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<p>
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<p>
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<p>
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
</div>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
- メリット
- 最低限のコードで段組みを実装できます。
- HTMLのコードを変えなくても常に段ごとにバランスよくコンテンツを配置できます。
- デメリット
- 段ごとに異なる横幅にすることができません。
- 一つ一つの段に異なるスタイル(背景など)を適用することができません。
マルチカラム・レイアウトの基本
“column-width”プロパティと“column-count”プロパティの指定によって要素は“マルチカラム・コンテナ(Multi-column container)”となります。マルチカラム・コンテナの中には段組みの一つ一つの段となる“カラム・ボックス(Column box)”が生成され、子要素はカラム・ボックスに割り振られて配列されます。グリッド・レイアウトやフレキシブルボックス・レイアウトではコンテナとアイテムが親子要素の関係になりますが、マルチカラム・レイアウトでは一つ一つのカラム・ボックスはアノニマス・ボックスであり、何らかの要素を表すものではありません。
カラム・ボックスはマルチカラム・コンテナとなる要素のコンテント・ボックスの中に配置されます。
カラム・ボックスはブロック整形コンテキストを生成し、その子要素が絶対位置で配置される(“position:absolute;”)場合にはその配置位置の基準となります。また、マルチカラム・コンテナとカラム・ボックスの中にある要素との間ではマージンの折り畳みが起こりません。
マルチカラム・コンテナのコンテンツはカラム・ボックスの中に通常フローに従って配置されます。コンテンツは区切りの挿入が許容される箇所で分割され、以降のコンテンツは次のカラム・ボックスの中に配置されます。
書字方向が左から右の横書きである場合はコンテンツはまず一番左側のカラム・ボックスに配置され、カラム・ボックスがいっぱいになるか区切りが挿入されると続くコンテンツは右隣のカラム・ボックスに配置されます。
通常段落などの要素では要素の途中でも段の区切りが挿入されて複数のカラム・ボックスに分割されえますが、“break-inside”プロパティによって区切りの挿入を禁止することもできます。
ページ化メディアなどの断片化コンテキストでマルチカラム・コンテナが分割される場合には先の断片(ページなど)にあるカラム・ボックスを埋めてから次の断片へ移ります。
書字方向が縦書きの場合には段組みは横向きになり、マルチカラム・コンテナ内のカラム・ボックスは縦に並びます。
マルチカラム・レイアウトの設定方法
マルチカラム・コンテナの設定
要素は少なくとも“column-width”プロパティと“column-count”プロパティのどちらかの値が“auto”でない場合にマルチカラム・コンテナとなります。
“column-width”プロパティはカラム・ボックス(段)の横幅を指定します。指定された横幅はカラム・ボックスの横幅の最大値となります。なので、マルチカラム・コンテナの横幅が足りない場合などにはカラム・ボックスの横幅は指定した値よりも小さくなる場合があります。カラム・ボックスの横幅を指定した通りにしたい場合はマルチカラム・コンテナの横幅やカラム・ボックス間の隙間の大きさなども同時に指定する必要があります。
“column-count”プロパティはマルチカラム・コンテナ内に並べるカラム・ボックス(段)の数を指定します。同時に“column-width”プロパティによってカラム・ボックスの横幅が指定されている場合は並べることができるるカラム・ボックスの最大数を指定します。
コンテンツ(画像など)がマルチカラム・コンテナの横幅よりも大きい場合にはコンテンツはマルチカラム・コンテナからはみ出し、隣のマルチカラム・コンテナのコンテンツに重なります。
“height”プロパティや“max-height”プロパティによってマルチカラム・コンテナの高さが制限されるなど、マルチカラム・コンテナの大きさが足りない場合にはマルチカラム・コンテナの外側に追加のカラム・ボックスが生成されます。
“column-width”プロパティと“column-count”プロパティの指定はこれらのプロパティの一括指定プロパティである“columns”プロパティでまとめて行うこともできます。
カラム・ボックス間の隙間と罫線
“column-gap”プロパティはカラム・ボックス間の隙間の大きさを指定します。同じマルチカラム・コンテナ内のカラム・ボックス間の距離はすべて等しく指定された大きさになります。隙間の大きさを指定しなかった場合の既定値は“1em”です。
カラム・ボックス間には罫線を引くことができます。罫線はカラム・ボックス間の隙間の中央に引かれますが、空間は占有せず、罫線の存在はカラム・ボックス間の隙間の大きさには影響しません。また、罫線の長さはカラム・ボックスの高さと等しくなります。なお、罫線はその両側のカラム・ボックスがどちらもコンテンツを含んでいる場合にだけ表示されます。
罫線を引く場合は“column-rule-style”プロパティで罫線の見た目を指定します。
“column-rule-width”プロパティは罫線の太さを指定します。罫線は空間を占有しないのでその太さがレイアウトに影響を与えることはありませんが、カラム・ボックス間の隙間よりも太い場合はコンテンツと重なって描画されます。
“column-rule-color”プロパティで罫線の色を指定することができます。省略した場合は要素の文字色で罫線が描画されます。
罫線はマルチカラム・コンテナとなる要素のボーダーの上に描画されます。要素がスクロール可能である場合(“overflow:scroll;”)、ボーダーと背景はスクロールされませんが、罫線はコンテンツとともにスクロールされます。
これらの設定は同じマルチカラム・コンテナ内のすべての罫線に反映されます。また、“column-rule-width”プロパティと“column-rule-style”プロパティ、“column-rule-color”プロパティの指定はこれらのプロパティの一括指定プロパティである“column-rule”プロパティでまとめて行うこともできます。
コンテンツの割り振り
既定ではコンテンツはカラム・ボックスを順番に埋めるように配列されます。なので、カラム・ボックスに十分な高さがある場合はコンテンツがない空のカラム・ボックスができる場合があります。
コンテンツをすべてのカラム・ボックスに均等に割り振る場合は“column-fill”プロパティを使用して設定することができます。
段抜き
見出しなどの要素を段をまたいで配置する場合には“column-span”プロパティを使用します。複数の段をまたぐ要素は“スパニング要素(Spanning element)”と呼ばれます。
スパニング要素は通常フローからは外され、段の区切りを強制します。スパニング要素の前にあるコンテンツはスパニング要素直前に並ぶすべてのカラム・ボックスに均等に割り振られます。
スパニング要素はブロック整形コンテキストを生成し、その子要素が絶対位置で配置される(“position:absolute;”)場合にはその配置位置の基準となります。また、スパニング要素とカラム・ボックスの間ではマージンの折り畳みが起こりません。
マルチカラム・レイアウトのプロパティ
プロパティの一覧
段の数と横幅
| プロパティ | 説明 |
|---|---|
| columns: | 段の横幅と段数の一括指定 |
| column-width: | 段の横幅 |
| column-count: | 段の数 |
段の間の罫線
| プロパティ | 説明 |
|---|---|
| column-rule: | 罫線の見た目、太さ、色の一括指定 |
| column-rule-style: | 罫線の見た目 |
| column-rule-width: | 罫線の太さ |
| column-rule-color: | 罫線の色 |
他のプロパティ
| プロパティ | 説明 |
|---|---|
| column-gap: | 段の間の隙間の大きさ |
| column-fill: | 段へのコンテンツの割り振り |
| column-span: | 要素に段をまたがせる |
“column-gap”プロパティは“CSS Box Alignment Module”で定義されています。ほかに、マルチカラム・コンテナの中にある要素の途中や前後で段の区切りを許可するかは以下のプロパティで指定することができます。
サンプル
横書き
.multi-column {
columns: 3 100px;
column-rule: 5px dotted;
}
.headers {
background-color: rgb(240, 230, 140);
column-span: all;
}
<div class="multi-column">
<h1 class="headers">バナナの特徴</h1>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
<h2>バナナの特徴</h2>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>
<h2>バナナの果実</h2>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
<h1 class="headers">バナナの産地</h1>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>
<h1 class="headers">バナナの保存方法</h1>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
<h1 class="headers">バナナの栄養素</h1>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</div>
バナナの特徴
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
バナナの特徴
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
バナナの産地
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
縦書き
.multi-column {
writing-mode: vertical-rl;
columns: 3 100px;
column-rule: 5px dotted;
}
.headers {
background-color: rgb(240, 230, 140);
column-span: all;
}
<div class="multi-column">
<h1 class="headers">バナナの特徴</h1>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
<h2>バナナの特徴</h2>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>
<h2>バナナの果実</h2>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
<h1 class="headers">バナナの産地</h1>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>
<h1 class="headers">バナナの保存方法</h1>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
<h1 class="headers">バナナの栄養素</h1>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</div>
バナナの特徴
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
バナナの特徴
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
バナナの産地
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
