column-width プロパティ

最終更新：2026-09-13

column-width column-width プロパティ

column-width プロパティは、複数列レイアウトにおける各列の理想の幅を指定します。ブラウザはコンテナの幅とこの値から実際の列数を導き出し、コンテンツは各列に適応的に流れます。これは柔軟な複数列組版に適しています。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

column-width: auto | <length>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	自動的に計算されます。
`<length>`	タイプ	固定された列幅。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
column-width	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： column-width は理想値です。実際の幅はわずかに調整されることがあり、コンテナの幅の変化に応じて列数が増減します。

注意： column-width と column-count の両方を設定した場合、column-count は最大値として機能し、実際の列数は 2 つの計算結果の小さい方になります。

❓ よくある質問

Qcolumn-width と width の違いは何ですか？

Awidth は要素自身の幅、つまり外側のボックスのサイズを設定します。column-width は複数列レイアウト内の各列の理想の幅を設定します。ブラウザはコンテナの幅とこの値から列数を計算するため、コンテナのサイズ変更に応じて列数が変わります。column-width は柔軟で、長さが不確定で自動的に列を分けたいコンテンツに適し、width は固定です。両者は同じボックスのまったく異なる側面を扱います。

Qcolumn-width と column-count を両方設定するとどうなりますか？

A両方設定すると、column-count は上限、column-width は理想の幅として機能します。ブラウザは両方の制約の下で最適解を見つけ、その幅に収まる列数としますが、column-count を超えることはありません。例えば column-width:150px; column-count:4 を 500px のコンテナに適用すると、収まるのは 3 列だけなので 3 列が描画されます。この組み合わせにより、最小の快適な幅と最大の列数の両方を得られます。

Qcolumn-width:auto はどういう意味ですか？

Aauto は、列幅がこのプロパティで決定されないことを意味します。column-count またはブラウザに任せられます。これはデフォルト値です。column-width のみが設定され column-count がない場合、ブラウザはコンテナをその幅に近い列に分割します。両方設定されている場合、auto の列幅は無関係になり column-count が優先されます。以前の幅を解除したい場合にのみ、明示的に column-width:auto を使用してください。

Qcolumn-width を使ってレスポンシブな複数列レイアウトを構築するにはどうすればよいですか？

Acolumn-count を省略して column-width だけを設定します（例：column-width:250px）。ブラウザがコンテナの幅から列数を決定し、広い画面では 4〜5 列、狭い画面では 1〜2 列に減り、メディアクエリは不要です。これが column-width の column-count に対する利点であり、列が常に理想の幅に近く保たれるため、読書向けのコンテンツに適しています。