ywork2020.com

Title

段組みの列の幅と数を設定する

目次 (INDEX)

columnsとは

ここで説明するcolumns とは次の語句からなるCSSのプロパティです。
columns
読み: カラムス
意味: 列

目次に戻る

columnsプロパティの概要

このプロパティは、段組みの列の幅と数を設定することができます。

段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。

これは、 column-width: 列の幅column-count: 列の数 の二つのプロパティを一括で設定できます。 どちらかの値を省略した場合には、その省略された値は初期値が適用されます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{columns: 列の幅の値 || 列の数の値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルは親要素にdiv要素を、子要素にはp要素を使用しています。 要素が分かりやすいように境界線と背景色には予め以下の設定をしています。

サンプルコード: CSS
<style>
	div{
		background-color: ##khaki;
		border: thin solid ##darkgray;
		padding: 10px;
		width: 95%;
		height: max-content;
	}
	p{
		border: solid thin;
		padding: 3px;
	}
</style>
サンプルコード: HTML
<body>
	<div>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
	</div>
</body>

目次に戻る

初期値: auto auto;

このプロパティは、column-width と column-count の二つのプロパティを一括で指定をすることができるプロパティです。 しかし、どちらかの設定を省略することもできるので columns: auto; だけでも同じように表示されます。

初期値は、autoです。幅の値も列の数も指定されていませんので、p要素の段落の初期設定のままで表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: auto auto;}

目次に戻る

columns: 列の数の値;

列の数の数値だけを指定した場合には、その数値の数だけ列の数が割り振られます。 数値は1以上の整数でなければいけません。 列の幅の値を省いた場合には列の幅は初期値autoが割り当てられます。

このサンプルでは列の数を3にしています。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: 3;}

目次に戻る

columns: 列の幅の値;

列の幅の値だけを設定したい場合には0以上の数値に単位を付けて指定します。 列の数の値を省いた場合には列の数は初期値autoが割り当てられます。

詳しい単位についてはCSSの単位についてを参考にしてください。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns:  10em;}

目次に戻る

columns: 列の数の値 列の幅の値;

ここでは、列の数であるcolumn-countと列の幅であるcolumn-widthを一括指定する方法を説明します。

列の数 列の幅の値の両方を設定したい場合には、半角スペースで区切ります。 なお、列の数と列の幅は、どちらを先に指定しても構いません。

columns: auto auto;

ここでは、列の数値:column-countと列の幅の値:column-widthが初期値であった場合の説明をします。 初期値のセクションでも述べましたが、何も設定していない状態で表示されます。 この値はcolumns: auto;のように一つの値だけでも同じように表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: auto auto;}

目次に戻る

columns: auto 10em;

ここでは、列の数の値:autoと列の幅の値:10emを設定する方法を説明します。 column-countとcolumn-widthの二つを同時に設定する場合には半角スペースで区切ります。

column-widthが10emであった場合1つの列に対しての幅が10emということになります。

列の数が auto ならば、列の数は column-width プロパティのなど、子要素の幅により計算されて表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: auto 10em;}

目次に戻る

columns: 2 auto;

ここでは、列の数の値:2と列の幅の値:autoを設定する方法を説明します。

column-countとcolumn-widthの二つを同時に設定する場合には半角スペースで区切ります。

column-countが2であった場合列は二つに分けられ、column-widthが:autoならば、幅は均等に揃えられた状態で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: 2 auto;}

目次に戻る

columns: 3 10em;

ここでは、列の数の値:3と列の幅の値:10emを設定する方法を説明します。

column-countとcolumn-widthの二つを同時に設定する場合には半角スペースで区切ります。

column-countが3であった場合、列は3つに分けられ、column-width:10emならば10emの幅で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: 3 10em;}

目次に戻る

グローバル値

columnsプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のautoに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{columns: グローバル値;}

目次に戻る

補足説明

  • テーブルラッパーボックス以外のブロックコンテナーに適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

コードの部分をクリックすると、サンプルにCSSが反映されます。

columns: auto auto;

columns: 2;

columns: 5;

columns: 2 auto;

columns: auto 4em;

columns: 2 4em;

columns: 4em 2;

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

目次に戻る