column-countとは
- ここで説明するcolumn-countとは次の語句からなるCSSのプロパティです。
- column
- 読み: カラム
意味: 列 - count
- 読み: カウント
意味: 数、個数
column-countプロパティの概要
このプロパティは、段組みの列の数を設定することができます。
段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{column-count: 列の数の値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルは親要素にdiv要素を、子要素にはp要素を使用しています。 要素が分かりやすいように境界線と背景色には予め以下の設定をしています。
サンプルコード: CSS
<style>
div{
background-color: ##khaki;
border: thin solid ##darkgray;
padding: 10px;
width: 95%;
height: max-content;
}
p{
border: thin solid;
padding: 3px;
}
</style>
サンプルコード: HTML
<body>
<div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>
</body>
初期値: auto;
初期値は、autoです。列の数が指定されていませんので、p要素の段落の初期設定のままで表示されます。
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
div{column-count: auto;}column-count: 列の数の値;
列の数の数値を指定した場合には、その数値の数だけ列の数が割り振られます。 数値は1以上の整数でなければいけません。
このサンプルでは列の数を3にしています。
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
div{column-count: 3;}列の数の値と列の幅の値の一括指定
列の数であるcolumn-countと列の幅である column-width を一括指定する方法があります。 それを一部ですが説明したいと思います。
一括指定の詳しい設定方法については、 columnsプロパティの段組みの列の幅と数を設定する方法を参照してください。
列の数 列の幅の値の両方を設定したい場合には、半角スペースで区切ります。 なお、列の数と列の幅は、どちらを先に指定しても構いません。
このサンプルは、列の数の値:3と列の幅の値:10emを設定した場合の方法を説明します。
column-countとcolumn-widthの二つを同時に設定する場合には半角スペースで区切ります。
column-countが3であった場合、列は3つに分けられ、column-width:10emならば10emの幅で表示されます。
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
div{columns: 3 10em;}グローバル値
column-countプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のautoに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{column-count: グローバル値;}補足説明
- テーブルラッパーボックス以外のブロックコンテナーに適用可能
- 親要素の値を継承しない
まとめ
コードの部分をクリックすると、サンプルにCSSが反映されます。
column-count: auto;
column-count: 2;
column-count: 5;
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト