column-countプロパティの説明
CSSのcolumn-countプロパティは、要素に含まれる内容を指定された数で段組みにします。例えば、文字の分量が多いセクションを、新聞や雑誌の段組みのようにレイアウトします。
column-countに指定できる値
auto- マルチカラムが有効になるプロパティが指定されている場合に、その値に適した段数で分割します。
<integer>- 正数で表すデータ型の値です。内容を分割する時の理想的な数を表します。
column-widthが指定されている場合、その値がauto以外であれば、最大の段数を表します。
column-countの使い方とサンプルコード
column-countプロパティの構文は以下の通りです。
/* キーワード値 */
column-count: auto;
/* <integer>値 */
column-count: 3;
column-count: 6;
column-count: 12;
/* グローバル値 */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: unset;
column-countの実例
それでは実際にcolumn-countプロパティの書き方を見ていきましょう。以下の内容は、複数の段落を持つセクションをマルチカラムにした時の比較です。
<h2>指定なし</h2>
<section class="samp_box" id="cc_1">
<p>段落１：あいうえおカキクケコ。さしすせそタチツテト。</p>
<p>段落２：あいうえおカキクケコ。さしすせそタチツテト。</p>
<p>段落３：あいうえおカキクケコ。さしすせそタチツテト。</p>
</section>
<h2>column-count: 3;</h2>
<section class="samp_box" id="cc_3">
<p>段落１：あいうえおカキクケコ。さしすせそタチツテト。</p>
<p>段落２：あいうえおカキクケコ。さしすせそタチツテト。</p>
<p>段落３：あいうえおカキクケコ。さしすせそタチツテト。</p>
</section>
<h2>column-count: 6;</h2>
<section class="samp_box" id="cc_6">
<p>段落１：あいうえおカキクケコ。さしすせそタチツテト。</p>
<p>段落２：あいうえおカキクケコ。さしすせそタチツテト。</p>
<p>段落３：あいうえおカキクケコ。さしすせそタチツテト。</p>
</section>
h2{
margin: 1rem 0 0 0;
font-size: 1rem;
}
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
background: #fff;
}
#cc_3 {
column-count: 3;
}
#cc_6 {
column-count: 6;
}
マルチカラムの数は、要素のサイズが変わったとしても維持されます。以下の例では、セクションにresizeプロパティを追加して、幅を可変式にしています。対応しているブラウザでは右下にハンドルが表示されているはずなので、それを掴んで横幅を変更してみましょう。