column-count プロパティ

最終更新：2026-09-13

column-count column-count プロパティ

column-count プロパティは、要素のコンテンツが分割される列数を指定します。CSS マルチカラムレイアウトの一部であり、通常は column-gap や column-rule と組み合わせて新聞風の複数列組版を作成するために使用されます。

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

📝 構文

column-count: auto | <integer>;

⚙️ 値

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

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： column-count と column-width の両方を設定した場合、column-count は最大値として機能し、実際の列数はそれより少なくなることがあります。

注意： 列数が多すぎると、各列が狭くなりすぎて読みにくくなります。コンテンツの長さとコンテナの幅に応じて列数を設定してください。通常は 2〜4 列が適切です。

❓ よくある質問

Q優先順位が高いのは column-count と column-width のどちらですか？

A両方設定されている場合、column-count は上限として機能します。ブラウザは指定された column-width で何列収まるかを計算し、結果を column-count で制限します。例えば column-width:200px; column-count:3 は、700px のコンテナでは 3 列になりますが、450px のコンテナでは 2 列のみです。余分な列を無理に作ることはありません。つまり、column-width がレイアウトを決定し、column-count がそれを制限します。

Qcolumn-count:3 が効かないのはなぜですか？

A考えられる理由：1つ目はコンテンツが不十分なことです。コンテンツが短すぎると、ブラウザは必要な分の列だけを表示します。2つ目は、コンテナの高さや幅が制約されて 3 列を収められないことです。3つ目は、column-width も設定されていて列数がそれより少なく制約されていることです。4つ目は、対応していない古いブラウザです。複数列はコンテンツ主導です。列数は目標値であり厳密な保証ではなく、コンテンツが多いほど列が埋まります。

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

Aauto は、列数がこのプロパティで決定されないことを意味します。column-width またはブラウザに任せられます。column-width が設定されていれば、列数はそこから自動的に導かれます。どちらも設定されていなければ、コンテンツは 1 列のままです。auto はデフォルト値なので、column-count:auto 単独では目に見える効果がありません。自動的な列の流れを有効にするには column-width と組み合わせてください。

Q列間の間隔を制御するにはどうすればよいですか？

A間隔には column-gap（例：column-gap:24px）、列間の区切り線には column-rule（例：column-rule:1px solid #ccc）を使用します。どちらも複数列コンテナにのみ適用されます。24px〜40px、または 1.5em〜2em の間隔を推奨します。小さすぎると隣の列と見分けにくく、大きすぎるとスペースを無駄にし読む流れを妨げるため、実際のフォントサイズに合わせて調整してください。