Mar. 6th,2021
プロパティについて
概要
| 初期値 | “column-width: auto;” |
| 適用対象 | テーブル包括ボックスを除くブロック・コンテナ |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定された値 |
| アニメーション | 計算値 |
“column-width”プロパティはマルチカラムレイアウトの段組みの横幅を指定するプロパティです。
“column-width”プロパティの値は段の中の行ボックスの長さとなります。
“column-width”プロパティで指定された横幅よりも狭い段がないようにできるだけ多くの段を配置します。
画像などのコンテンツが段の横幅よりも大きい場合はそのコンテンツは段からはみ出し、隣の段のコンテンツに重なります。
サンプルコード
div { column-width: 100px;}
値
| 値 | 説明 |
|---|---|
| auto | 他のプロパティの設定をもとに横幅を決定する (値が“auto”でない“column-count”プロパティなど。) |
| <length> | “px”、“em”などで段組みの理想的な横幅を指定 (正の値のみ指定できます。横幅は隙間を埋めるために指定した値より大きくなる場合があります。また、必要な領域がない場合は指定した値より小さくなる場合があります。) |
| 共通キーワード |
使用例
段組みの横幅を指定する
.multi-column {
column-width: 100px;
}
<div class="multi-column">
<p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<p>
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<p>
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<p>
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
</div>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
段組みの横幅を自動で決定する
.multi-column {
column-count: 3;
column-width: auto;
}
<div class="multi-column">
<p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<p>
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<p>
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<p>
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
</div>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
