【CSS Modules】column-gapプロパティの使い方
column-gapプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
column-gapプロパティは、CSSのマルチカラムレイアウトにおいて、複数の列で構成されるコンテンツの各列間に設定される間隔の幅を保持するプロパティです。このプロパティを使用することで、ウェブページのコンテンツが複数の縦列に分割された際に、それぞれの列がどれくらいの空白を挟んで配置されるかを制御できます。
主に、column-countやcolumn-widthといったマルチカラムレイアウトを定義するプロパティが適用された要素に対して使用します。例えば、コンテンツを3つの列に分割するためにcolumn-count: 3;と指定し、さらにcolumn-gap: 20px;と指定することで、それぞれの列の間に20ピクセルの均一な空白が生まれます。
指定できる値には、pxやemなどの具体的な長さを表す単位や、ブラウザの標準的な間隔を示すキーワードnormalがあります。normalが指定された場合、ブラウザのデフォルト値（通常は1em）が適用されます。これにより、コンテンツの可読性を高め、視覚的に整ったレイアウトを実現することが可能です。
このプロパティは、近年ではFlexboxやGridレイアウトで使用されるgapプロパティの一部としても機能します。gapプロパティに1つの値を指定すると、それがrow-gapとcolumn-gapの両方に適用されますが、マルチカラムレイアウトの文脈では、column-gap単独で列間の間隔を直接指定する用途が主となります。ウェブコンテンツのレイアウトを柔軟に制御するために非常に重要なプロパティです。
公式リファレンス: column-gap
構文(syntax)
1.container { 2 column-gap: 20px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません