CSSのColumnsで
最適な段落カラムを
自動生成。
メディアクエリを使わずに適切なカラムレイアウトを
自動生成するCSSプロパティ『Columns』

image: CSSのColumnsで最適な段落カラムを自動生成。
Toplabo
Paragraph Column Automatic Generation

コンテンツを最適なコラム数に均等に自動分割するCSS

 | 2024/04/18

特徴

Columnsレイアウトの特徴
  • 柔軟な仕様。

    columnsは、CSSの一括指定プロパティです。
    そのレイアウトの特徴は、コラムの分量にかかわらず適切な配分で段組みを構築してくれることです。
    例えば、3コラムの文章を作成する場合それぞれの文字量を同等な分量にしないと綺麗な3コラムにならないものです。
    ところがcolumnsプロパティを使うと、それぞれの段落の分量の大小にかかわらず均一な3コラムにしてくれます。
    また、コラム数ではなく横幅を設定するだけでもは自動でコラム数を調整してくれます。
    これまでのレスポンシブデザインでは横幅に応じたコラム幅を指定する必要がありましたが、もうcolumnsを使えば横幅を指定するだけで済むようになりました。
    Columnsを使用したデモ:https://labo.studio-happyvalley.com/columns/

指定 方法

Columnsの指定方法と種類
  • 二つの指定方法。

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

オプ ション

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

『CSSのColumnsで最適な段落カラムを自動生成。』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら