columns プロパティ

最終更新：2026-09-13

columns columns プロパティ

columns プロパティは column-count と column-width の略記であり、要素のコンテンツを自動的に複数列に分割します。これは新聞の組版に似ています。長いテキストを複数の列に表示して読みやすさを向上させるためによく使用されます。

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

📝 構文

columns: auto | <integer> || auto | <length>;

⚙️ 値

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

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： columns は column-count と column-width の略記です。値が 1 つだけ書かれた場合、ブラウザはその型から列数か列幅かを推測します。

注意： 複数列レイアウトを表示するには、明確な高さか十分なコンテンツが必要です。そうでない場合、コンテンツは引き続き 1 列で表示されることがあります。

❓ よくある質問

Q複数列レイアウトにおける columns と Flexbox の違いは何ですか？

Acolumns（CSS マルチカラムレイアウト）は、新聞のようにコンテンツを 1 つの列から次の列へ自動的に流します。1 つのテキストブロックが列をまたいで分割されても、読む順序は連続したままです。一方 Flexbox は、各子要素をそれぞれ独立した列にし、間にコンテンツの流れはありません。流れるテキストには columns を、独立した子要素を横に並べるには flex を使用してください。

Q見出しをすべての列にまたがらせるにはどうすればよいですか？

A見出しに column-span:all を設定すると、すべての列にまたがり、本文はその下で分割されたままになります。これは複数列の記事で最も一般的な構造です（全幅の見出し＋分栏された本文）。column-span は none と all のみを受け付けるため、特定の列数にまたがらせることはできず、見出しは複数列コンテナの直接の子要素である必要があります。

Qcolumns の略記はどう理解すればよいですか？

Acolumns は column-count と column-width の略記です。値が 1 つの場合、ブラウザは型から意味を推測します。columns:3 のような整数は列数、columns:200px のような長さは列幅です。両方を同時に指定でき、例えば columns: 200px 3 は、列幅約 200px で最大 3 列を意味し、1 行で完了する複数列設定です。

Q複数列レイアウトのブラウザサポートはどうなっていますか？

A最新のブラウザは columns、column-count、column-gap、column-rule をよくサポートしています。Chrome、Edge、Firefox、Safari はすべて対応しています。column-span:all は新しめのバージョンが必要で、古いブラウザではレイアウトが単一列にフォールバックしてもコンテンツは完全なままです。最悪の場合でも読みやすい単一列へのフォールバックであり、ページが壊れることはないため、複数列は安心して使える安全なプログレッシブエンハンスメントです。