メディアクエリを使わずに適切なカラムレイアウトを
自動生成するCSSプロパティ『Columns』
columnsは、CSSの一括指定プロパティです。
そのレイアウトの特徴は、コラムの分量にかかわらず適切な配分で段組みを構築してくれることです。
例えば、3コラムの文章を作成する場合それぞれの文字量を同等な分量にしないと綺麗な3コラムにならないものです。
ところがcolumnsプロパティを使うと、それぞれの段落の分量の大小にかかわらず均一な3コラムにしてくれます。
また、コラム数ではなく横幅を設定するだけでもは自動でコラム数を調整してくれます。
これまでのレスポンシブデザインでは横幅に応じたコラム幅を指定する必要がありましたが、もうcolumnsを使えば横幅を指定するだけで済むようになりました。
かなり自由な指定方法が可能で、おおきく二つの方法があります。
一つはコラム数を指定する方法ですが、これだとスマホなどの場合、文字数が少なくなりすぎるのであまり現実的ではないかもしれません。（スマホの一行を3～5個のコラムに分割したレイアウトを想像してみてください。）
もうひとつは上で説明しました、段落の横幅を指定する方法で、こちらだとレスポンシブにコラムレイアウトが可能です。
指定した横幅より大きい場合に自動でコラム数を増加する仕様の様で非常にフレキシブルに対応します。
Columnsレイアウトの場合、各段落の間隔は自動で適切なサイズになります。
font-sizeを変更すると比例して間隔も変化しますので、感覚的には一文字分かなと思います。
とはいううものの、段落間隔も当然自由に指定できます。
column-gapで間隔を指定します。
marginなどで指定するより効率よく設定できるので、デフォルトの間隔が気に入らない場合は、こちらを使うべきでしょう。
このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら