【CSS Modules】columns省略形プロパティの使い方

columnsプロパティは、ウェブページ上でテキストや要素を複数列に配置する、いわゆるマルチカラムレイアウトを設定するためのCSS短縮プロパティです。このプロパティを使用することで、個別に設定する必要があるcolumn-widthとcolumn-countという二つの関連プロパティを一度にまとめて指定できます。

column-widthは各列の推奨される幅を設定し、コンテンツの量や利用可能なスペースに応じて、列幅が指定した値よりも小さくならないように列の数を自動的に調整します。一方、column-countは理想的な列の数を直接指定します。columnsプロパティに両方の値を指定する場合、例えばcolumns: 200px 3;のように、列幅と列数を半角スペースで区切って記述します。これにより、各列の推奨幅を200ピクセルとし、理想的には3列に分割されます。

どちらか一方の値のみを指定することも可能です。例えば、columns: 200px;と記述すると、各列の推奨幅が200ピクセルとなり、列数はブラウザが自動的に決定します。逆に、columns: 3;と記述すると、列数が3に固定され、各列の幅はブラウザが自動的に均等に調整します。このようにcolumnsプロパティは、柔軟かつ効率的に複数列のレイアウトを制御できるため、雑誌や新聞のようなデザインをウェブ上で実現する際に非常に役立ちます。このプロパティを理解し活用することで、より洗練されたレイアウトを簡潔なコードで実現できるようになるでしょう。

Copy
1columns: <'column-width'> || <'column-count'>;

引数なし

引数はありません

戻り値なし

戻り値はありません