【CSS Modules】column-fillプロパティの使い方
column-fillプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
column-fillプロパティは、CSSの複数段組みレイアウトにおいて、カラム（段）内にコンテンツをどのように配置し、埋めるかを制御するプロパティです。このプロパティを使用することで、Webページのデザインにおいてテキストや要素を複数のカラムに分割する際、それらのカラムがどのようにコンテンツで満たされるかを細かく調整することができます。
このプロパティには主に二つの値があります。一つは初期値であるbalanceです。balanceを指定すると、複数段組みコンテナ内のコンテンツが、すべてのカラムにわたってほぼ均等な高さになるように分配されます。これにより、コンテンツの量に関わらず、見た目上すべてのカラムの高さが揃い、バランスの取れたレイアウトが実現されます。特に、印刷用のスタイルシートや、視覚的な均一性が求められるデザインに適しています。
もう一つの値はautoです。autoを指定した場合、コンテンツは最初のカラムから順に完全に埋められていき、次に進む形で配置されます。このとき、各カラムの高さは、そのカラムに収まるコンテンツの量によって決まります。そのため、すべてが均等な高さになるとは限りません。例えば、コンテンツが特定量のカラムを埋めた後に次のページや次のセクションに流れるような、連続的な表示を意図する際に利用されます。
column-fillプロパティを適切に設定することで、複数段組みレイアウトの視覚的な整合性やコンテンツのフローを効果的に制御し、より洗練されたWebデザインを実現することができます。
公式リファレンス: column-fill
構文(syntax)
1.element { 2 column-fill: balance; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません