Studio Happyvalley

contact | search

Columns & Grid レイアウト

Columnsレイアウトの特徴

columnsは、CSSの一括指定プロパティです。そのレイアウトの特徴は、コラムの分量にかかわらず適切な配分で段組みを構築してくれることです。
例えば、3コラムの文章を作成する場合それぞれの文字量を同等な分量にしないと綺麗な3コラムにならないものです。
ところがcolumnsプロパティを使うと、それぞれの段落の分量の大小にかかわらず均一な3コラムにしてくれます。

また、コラム数ではなく横幅を設定するだけでもは自動でコラム数を調整してくれます。

Columnsの指定方法と種類

かなり自由な指定方法が可能で、おおきく二つの方法があります。
一つはコラム数を指定する方法ですが、これだとスマホなどの場合、文字数が少なくなりすぎるのであまり現実的ではないかもしれません。(スマホの一行を3~5個のコラムに分割したレイアウトを想像してみてください。)
もうひとつは上で説明しました、段落の横幅を指定する方法で、こちらだとレスポンシブにコラムレイアウトが可能です。
指定した横幅より大きい場合に自動でコラム数を増加する仕様の様で非常にフレキシブルに対応します。

Columnsレイアウトのオプション

Columnsレイアウトの場合、各段落の間隔は自動で適切なサイズになります。font-sizeを変更すると比例して変化しますので、感覚的には一文字分かなと思います。
とはいううものの、段落間隔も当然自由に指定できます。
column-gapで間隔を指定します。marginなどで指定するより効率よく設定できるので、自動でできる間隔が気に入らない場合は、こちらを使うべきでしょう。