【CSS Modules】column-spanプロパティの使い方

column-spanプロパティは、CSSのマルチカラムレイアウトにおいて、特定の要素が複数のカラムをまたいで表示されるかどうかを制御するための設定を保持するプロパティです。

このプロパティは、ウェブページなどのコンテンツを複数の段組（カラム）で表示する際に、段組内の特定の見出しや画像、図表などの要素を、その段組全体にわたって表示させたい場合に利用されます。通常、段組レイアウトでは各要素は自身が所属する単一のカラム内に収まりますが、column-spanプロパティを使用することで、そのルールから外れ、複数のカラムにまたがってコンテンツを大きく表示させることが可能になります。

設定できる主な値としては、「none」と「all」があります。noneはデフォルト値であり、要素は通常通り単一のカラム内に表示されます。一方、allを指定すると、その要素は親要素が持つすべての段組をまたいで横いっぱいに表示されます。この場合、column-span: all;が適用された要素は、レイアウト上、その前後のコンテンツとは独立したブロックとして扱われ、その要素の前後に自動的に改段が挿入される形になります。

この機能は、新聞や雑誌のようなデザインで、記事の主要な見出しを段組の中央に大きく配置したり、画像を複数カラムにわたって表示したりする際に非常に有効です。コンテンツの視覚的な階層を明確にし、読者の注目を集めるデザインを実現するために重要な役割を果たします。

Copy
1.example-element {
2  column-span: all;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません