ほんっとにはじめての HTML5 と CSS3

column-widthプロパティは、 マルチカラムでの各カラムの幅を指定します。

前回の column-countプロパティでは、このcolumn-widthプロパティは指定していなかったので値はデフォルトの column-width: auto になっていました。
autoだとブラウザが自動でカラム幅を決めてくれます。

column-widthプロパティでカラム幅を指定しても、カラム同士の間隔（column-gap）やコンテナ全体の幅によって、ブラウザは 柔軟にカラム幅を変えちゃいます。
なので、だいたいのカラム幅を指定して あとはブラウザにお任せって感じになります。

1. column-widthプロパティの値
2. column-widthプロパティを使ってみる
   1. column-width: 15em と指定したサンプル
   2. column-width: 300px と指定したサンプル
   3. column-width: 40vw と指定したサンプル

マルチカラム関連のプロパティは、下記のように記事を分けます。

【57-1】マルチカラムのカラム数を決める column-countプロパティ

【57-2】マルチカラムのカラム幅を決める column-widthプロパティ　←今日はココ

【57-3】カラム数と幅をまとめて指定する columnsショートハンド

【58】各カラムの間隔を指定する column-gapプロパティ

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

【59-2】カラム間の罫線の幅を指定する column-rule-width

【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ

【59-4】カラム間の罫線をまとめて指定する column-rule

【60】マルチカラム内で段抜きができる column-spanプロパティ

【61】各カラムの埋め方を決める column-fillプロパティ

（ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか

参考：
・CSS Multi-column Layout Module Level 1 | W3C Working Draft
・CSS 段組みレイアウト | MDN

column-widthプロパティの値

column-widthプロパティの値は以下のものがあります。

column-widthプロパティ
キーワード	auto（デフォルト値）
<length>	正の数値に単位（px, em, vw, rem など）を付けて指定（マイナスの値不可）
グローバル値	column-width: inherit; 親の値を継承 column-width: initial; 継承した親の値を解消しデフォルト値に戻す column-width: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	ブロックレベルの要素 ただし table要素の中で使うブロック要素は除く

px, em, rem, vwなどの単位については、こちらをご覧ください。
【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）

column-widthプロパティを使ってみる

column-widthプロパティでの指定してみよう。
いろいろ見てみたいので「em」「px」「vw」でサンプルを作ってみました。

column-width: 15em と指定したサンプル

「em」は フォントサイズの高さを1とする単位で、15emだと15文字分のカラム幅を指定したことになります。
が、 column-width の場合は キッチリ厳密にサイズ指定できるわけではありません。
指定したカラム幅が、使えるスペースに対してちょっと多かったり少なかったりしたら、ブラウザが親コンテナを満たすように伸縮させるので「だいたいそのへんのサイズ」になりますw

今回は、画面幅を変えて見比べるために、別ページでサンプルを作りました。

サンプルはこちら（クリックで別ウィンドウで開きます）

PCやタブレットなどの大きな画面では、ウィンドウ幅によって2カラム、3カラム...とカラム数が増えていきます。
スマホなど幅が狭い画面では1カラムに収まります。

ウィンドウ幅によって自動でカラム数を決めてくれるので めっちゃ便利ですよね。

サンプルファイルにも載せてありますが、サンプルのHTMLはこちらです。

<div class="sample1">
<p>column-widthを使って各カラムの幅を15emにしたサンプルです。<br>
PCサイトではウィンドウ幅を広げるとカラム数が増えていきます。横幅の狭いスマホで
見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔（column-gapプロパティ）は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら。

.sample1 {
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em;
    background:#ffc;
	-webkit-column-width:15em; /*古いブラウザ用*/
	column-width:15em}
.sample1 p {
	text-indent:1em;
	line-height:1.4em;
	margin:1.3em 0 0}
.sample1 p:first-child {margin:0}

column-width: 300px と指定したサンプル

今度は「px」でカラム幅を指定してみます。
ディスプレイのドット1個が 1px とされています。iPhoneの6,7,8の画面（5.5インチ）のCSSピクセルでの横幅は414pxですので、300pxあたりで1カラムになるだろうということでサンプルを作ってみました。

サンプルはこちら（クリックで別ウィンドウで開きます）

これも、PCやタブレットなどの大きな画面では、ウィンドウ幅によって2カラム、3カラム...とカラム数が増えます。
スマホなど幅が狭い画面では1カラムに収まります。

「em」でも「px」でも、ボックスサイズや margin などの指定と違って、キッチリ厳密にサイズ指定するんじゃなく、それに近いサイズになるということです。

サンプルのHTMLはこちらです。

<div class="sample2">
<p>column-widthを使って各カラムの幅を300pxにしたサンプルです。<br>
PCサイトではこちらもウィンドウ幅を広げるとカラム数が増えていきます。
横幅の狭いスマホで見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔（column-gapプロパティ）は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら

.sample2 { /*要点のみ。他の指定はsample1と同じです*/
	-webkit-column-width:300px; /*古いブラウザ用。無くてもいいです*/
	column-width:300px}

column-width: 40vw と指定したサンプル

最後にもう一つ「vw」でカラム幅を指定してみます。
「vw」は「viewport width」の略。1vw = ビューポートの幅の 1/100ですので、100vwでビューポートの横幅いっぱいということになります。

単位「vw」については、こちらをご覧ください。
【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について

サンプルでは、column-width: 40vw にしてみました。
画面に対して相対的なので、大画面では2カラム、ほどほどの画面サイズなら1カラムにしてくれて便利です。

サンプルはこちら（クリックで別ウィンドウで開きます）

HTMLはこちら

<div class="sample3">
<p>column-widthを使って各カラムの幅を40vwにしたサンプルです。<br>
PCサイトではウィンドウ幅が広い場合は2カラム、狭い場合は1カラムになります。
横幅の狭いスマホで見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔（column-gapプロパティ）は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら

.sample3 { /*要点のみ。他の指定はsample1と同じです*/
	-webkit-column-width:40vw; /*古いブラウザ用。無くてもいいです*/
	column-width:40vw}

次回予告

前回の column-countプロパティは、何が何でも指定したとおりの「カラム数」に分けられるので、小さい画面のスマホでも2カラム、3カラムになってしまいます。メディアクエリなどを使ってスマホ用は1カラムにするなど、ひと手間増えますね。
今回の column-widthプロパティなら、ブラウザが画面サイズに合わせて勝手にカラム数を決めてくれるので、こっちのほうが便利ですね。

ところで、column-count と column-width の値を一括で指定できるショートハンドがあるんです。
次回はそのショートハンドプロパティ columnを使ってみよう。

関連記事

• 【60】マルチカラム内で段抜きができる column-spanプロパティ
• 【59-4】カラム間の罫線をまとめて指定する column-rule
• 【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ
• 【59-2】カラム間の罫線の幅を指定する column-rule-width
• 【59-1】カラム間の罫線のスタイルを指定する column-rule-style
• 【58】各カラムの間隔を指定する column-gapプロパティ
• 【57-3】カラム数と幅をまとめて指定する columnsショートハンド
• 【57-2】マルチカラムのカラム幅を決める column-widthプロパティ
• 【57-1】マルチカラムのカラム数を決める column-countプロパティ
• 【56】ユーザーのテキスト選択などを制御する user-selectプロパティ
• 【55】ボックスのリサイズを可能にする resizeプロパティ
• 【54】テキストが はみ出る場合に「...」を付ける text-overflow
• （ちょっとメモ）テキスト選択時のハイライトを変える ::selection
• 【53】キャレットの色を変えられる caret-colorプロパティ
• 【52】カーソルの表示をいろいろ変えられる cursorプロパティ