column-gap プロパティ

最終更新：2026-09-13

column-gap column-gap プロパティ

column-gap プロパティは、複数列レイアウトにおける列と列の間の間隔を設定します。CSS マルチカラムレイアウトの重要な要素であり、適切な間隔を選ぶことで複数列テキストの読みやすさと見た目が大きく向上します。

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

📝 構文

column-gap: normal | <length-percentage>;

⚙️ 値

値	タイプ	説明
`normal`	キーワード	デフォルトの列間隔。
`<length>`	タイプ	固定された列間隔。

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： normal は通常 1em（現在のフォントサイズを基準）に等しく、デフォルトの列間隔です。

注意： 間隔が小さすぎると隣の列と見分けにくくなり、大きすぎるとスペースを無駄にし読む流れを妨げます。一般的に 1.5em〜2em、または 24px〜40px の値が推奨されます。

❓ よくある質問

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

Acolumn-gap は複数列レイアウトに特有の間隔プロパティです。gap は Flexbox と Grid 用の汎用的な間隔プロパティです。最新のブラウザでは、両者は同じ間隔システムの一部です。gap は複数列レイアウトでも機能し（そこでは column-gap と等価）、flex や grid の row-gap と column-gap もカバーします。複数列レイアウトでは column-gap の方が明確に読め、gap は 3 つのレイアウトモードすべてで統一的な選択です。

Qcolumn-gap にパーセンテージを使用できますか？

Aはい。CSS マルチカラム仕様によれば、column-gap は normal または <length-percentage> を受け付け、パーセンテージは複数列コンテナの幅を基準に計算されます。これは新しめの機能です（古い仕様では長さのみ許可されていました）。古いブラウザをサポートする必要がある場合は、px や em のような固定単位を使用してください。一部の古いエンジンではパーセンテージが正しく動作しない可能性があります。疑問がある場合は、互換性を最大にするために長さを使用してください。

Qcolumn-gap のデフォルト値は何ですか？

Aデフォルトは normal です。ブラウザは通常、現在のフォントサイズを基準に 1em としてレンダリングするため、間隔はフォントに合わせて拡大縮小されます。固定で予測可能な間隔が必要な場合は、column-gap:32px のように明示的な長さを設定してください。ブラウザは normal が 1em を意味することでおおむね一致していますが、レンダリング結果は使用するフォントに依然として依存するため、フォントサイズが変わると実効間隔も変わります。

Qcolumn-gap は列の幅を奪いますか？

Aいいえ。間隔は列と列の間に確保された空間です。幅を分配するとき、ブラウザはまずすべての column-gap の合計を差し引き、残りの幅を列に分割します。そのため、column-gap を大きくすると各列は狭くなります。各ピクセルが貴重な狭いビューポートでは特に、間隔と列幅の比率を適切に保ち、列が読みにくくなるほど狭くならないようにしてください。