ywork2020.com

Title

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

目次 (INDEX)

column-widthとは

ここで説明するcolumn-widthとは次の語句からなるCSSのプロパティです。
column
読み: カラム
意味: 列
width
読み: ウィズ
意味: 幅、広さ

目次に戻る

column-widthプロパティの概要

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

段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。 その段落の列の幅を設定するためのプロパティです。

目次に戻る

構文

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

セレクター{column-width: 列の幅の値+単位;}

目次に戻る

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

ここからは実際の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-width: auto;}

目次に戻る

column-width: 列の幅の値+単位;

列の幅の値を数値で指定する場合には、正の数にに単位を付けなければいけません。 詳しい単位については、 CSSの単位について を参照してください。

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

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-width: 15em;}

目次に戻る

列の幅の値と列の数の値の一括指定

列の幅であるcolumn-widthと列の数である column-count を一括指定する方法があります。 それを一部ですが説明したいと思います。

一括指定の詳しい設定方法については、 columnsプロパティの段組みの列の幅と数を設定する方法を参照してください。

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

このサンプルは、列の数の値:3と列の幅の値:10emを設定した場合の方法を説明します。

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

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

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{columns: 10em 3;}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

column-width: auto;

column-width: 15em;

column-width: 50px;

column-width: 10ch;

column-width: 5rem;

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

目次に戻る