縦並びのリストなどをCSSで希望の列数に整列させる方法

HTML/CSS

今回は、縦方向に並べた要素を希望の数の列数にレイアウトする方法について紹介していきます。
方法としては色々あると思いますが、今回はCSSのプロパティcolumn-countを利用して、縦並びのリストなどを指定した列数に整列させるという方法を紹介します。

“column-count”のブラウザ対応状況

下の図のようにほとんどのブラウザが、CSSのプロパティcolumn-countに対応しています。

Can I use による各ブラウザの”column-count”対応状況

Can I use による各ブラウザのcolumn-count対応状況

“column-count”の使用方法

それでは、CSSのプロパティcolumn-countの使い方について紹介していきます。
column-countは、整列させたいHTML要素に対して列数を指定することで、その要素を希望の列数に整列させることができます。
例えば、リストアイテム <li>…</li> を希望の列数に整列させたい場合は、その親要素である <ul>…</ul> などに対して、CSSでcolumn-countの値を指定します。
column-countを利用すると、子要素の数が変化した場合でも、指定した列数に子要素を整列させることができます。
次の項目で具体的な記述例を紹介していきます。

“column-count”の使用例

CSSのプロパティcolumn-countの使用例をいくつか紹介していきます。

リストを3列に並べる

下の例では、ulタグを利用して東京都の23区の名称のリストを設置しています。
liタグで囲んだ各区の名称を縦3列にレイアウトするために、親要素であるul(クラス名:list)に対するCSSのプロパティcolumn-countに”3″を指定することで、リストを3列に並べることができます。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

リストを2列に並べる

CSSのプロパティcolumn-countに”2″を指定することで、上の例と同じリストを2列に並べることができます。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

リスト以外の要素の整列

ここまでリストの整列について紹介してきましたが、column-countはリスト用のプロパティというわけではなく、他の要素を整列させたいときにも利用できます。
長い文章をCSSのプロパティcolumn-countで整列させる場合の例を紹介しておきます。

See the Pen
Untitled
by saku (@web-saku)
on CodePen.

“column-count”の関連プロパティ

column-countに関連して使用できる主なCSSのプロパティには、以下のようなものがあります。

  • column-width : カラムの幅を指定する。
  • column-gap : カラムの間隔を指定する。
  • column-rule : カラムの区切り線を指定する。

まとめ

以上、CSSのプロパティcolumn-countを利用して縦並びの要素を指定した数の列数にレイアウトする方法について紹介してきました。
column-countプロパティについて、もっと詳しく知りたい方は下記の参考ページも見てみてください。

[参考] column-count – CSS: カスケーディングスタイルシート | MDN

関連記事

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください