column-span プロパティ

最終更新：2026-09-13

column-span column-span プロパティ

column-span プロパティは、要素が複数の列にまたがるかどうかを指定します。all に設定すると、要素はすべての列にまたがります。複数列レイアウトの見出しや小見出しによく使用され、分栏されたコンテンツとは視覚的に区別されます。

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

📝 構文

column-span: none | all;

⚙️ 値

値	タイプ	説明
`none \| all`	キーワード	要素が列にまたがるかどうか。

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： column-span:all は複数列レイアウトの見出しとよく組み合わせられ、タイトルがすべての列にまたがることで記事の構造がより明確になります。

注意： column-span は要素自体にのみ影響し、他の要素の列の分布は変更しません。Firefox の古いバージョンではサポートが限られていたため、互換性を確認してください。

❓ よくある質問

Qcolumn-span で特定の列数にまたがらせることはできますか？

Aできません。column-span には none（デフォルトでまたがらない）と all（すべての列にまたがる）の 2 つの値しかありません。そのため、2 列や 3 列だけにまたがらせることはできません。部分的にまたがらせるには、入れ子の複数列コンテナでシミュレートするか、grid レイアウトに切り替える必要があります。これは CSS マルチカラム仕様の意図的な制限であり、値で回避することはできません。

Qどの要素が column-span を使用できますか？

Acolumn-span は、複数列コンテナの最上位フローにあるブロックレベル要素に適用されます。最も一般的なのは、見出し（h1〜h6）、小見出し、および視覚的な区切りとしてすべての列にまたがる引用ブロックです。列内にネストされた要素には使用できず、ブラウザのサポートはまちまちです。古いブラウザでは単に無視される可能性があるため、プログレッシブエンハンスメントとして扱い、常に単一列のフォールバックを最初に設計してください。

Qcolumn-span:all が効かないのはなぜですか？

A考えられる理由：1つ目は、要素が複数列コンテナの直接のブロックレベル子要素ではないことです。2つ目は、ブラウザが古すぎることです（一部のバージョンでは列をまたぐサポートが不完全で、Firefox の初期ビルドはサポートが限られていました）。3つ目は、複数列コンテナ自体が機能しておらず、1 列しかないことです。まず列が表示されることを確認し、次に階層内の要素の位置を確認してください。

Qcolumn-span は複数列テキストの読む順序を壊しますか？

Aいいえ。column-span:all の要素は複数列テキストを 2 つのセクションに分割します。その上の列が先に埋められ、次にまたがる要素が表示され、その下の列が続きます。読む順序はドキュメントの流れに従ったままです。またがる見出しは単に全幅の行を強制するだけです。そのため、またがるタイトルを上部に置いても、本文はその下で正常に流れ、コンテンツの途中にあるまたがる要素についても同様です。