CSSでカラムの数を指定する方法/Column-countプロパティの使い方

カラムのレイアウトを指定するCSSのプロパティを、総称してMulti columnと呼びます。ここではカラムの数を指定するColumn-countについて説明します。

Column-countの使い方

カラム数の指定
Column-count:値;

たとえばサンプル文章に対して、

このようにcolumn-countを3に指定します。その状態で文字を入力していくと、文字が3カラムに分割されます。

<！-- html -->
<div class = "clmn">このようにcolumn-countを3に指定します。その状態で文字を入力していくと、文字が3カラムに分割されます。</div>

/*CSS*/
.clmn{
column-count:3;
}

column-countプロパティはdisplay:inlineの要素に指定しても効果がありません。

column-countが指定された状態でフォントサイズやwidthを変更しても、カラム数は維持されます。

<！-- html -->
<div class = "clmn2">column-countが指定された状態でフォントサイズやwidthを変更しても、カラム数は維持されます。</div>

/*CSS*/
.clmn2{
column-count:3;
font-size:15px;
width:300px;
}

また、画像をこのように

配置することもできます。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。ちょっととっても数少ないですが、段々増える予定です。