ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

CSSで縦並びリストを折り返して複数列にする方法を解説

CSSで縦並びリストを折り返して複数列にする方法を解説

「CSSで縦並びリストを折り返す方法を知りたい」

「リストのアイテムが増減しても対応できるようにする方法はないの?」

悩み

こんな悩みにお答えします。

CSSで縦並びリストを折り返すには「column-count」「display:flex;」を使う方法があります。

CSSだけで増減に対応するのは難しく、JavaScript(jQuery)を使う必要があります。

私は、2015年からWeb制作の仕事をはじめて、170件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

この記事では以下のことがわかります。

  • HTMLタグによる方法
  • column-countを使う方法
  • display:flex;を使う方法
  • JavaScript・jQueryを使う方法

記事を読み終えると、CSSで縦並びリストを折り返す方法がわかり、効率のよいコーディングをすることができるようになります。

目次
  1. その縦並びリストは横並びリストではいけない?
    1. 横並びリスト
  2. 縦並びリスト (CSSのみ)
    1. HTMLタグによる方法
    2. column-countを使う方法
    3. display:flex;を使う方法
  3. 縦並びリスト (jQueryを使う)
    1. JavaScript・jQueryを使う方法
  4. まとめ

その縦並びリストは横並びリストではいけない?

リストをコーディングするときは、そのリストの並びにどんな意味があるかが大事です。

リストは横並びであればアイテムの増減にもかんたんに対応できるようになります。

縦並びのデザインに対して横並びではいけない理由があるか、縦並びにどんな理由があるかを考えたほうが運用後の管理・修正がしやすくなる可能性が高くなります。

まずデザイナーがある程度HTMLを理解し意識することで、制作しやすく保守管理しやすいWebサイトを構築することができます。

横並びリスト

例として都道府県のリストを使います。

<ul class="list list--0">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>

都道府県に上下関係はないので、すべて同列のリストになります。

.list--0{
  display: flex;
  flex-flow: row wrap;
}
.list--0 > li{
  width: 150px;
}

横並びであればアイテムが増えても無限大に対応することが可能です。

縦を揃える必要があれば横幅を指定する必要があります。

縦並びリスト (CSSのみ)

HTMLタグによる方法

折り返しをしたいところまでをHTMLタグで区切ります。

これがいちばん手っ取り早い方法ではありますが、レスポンシブ対応で折り返し位置が変わる場合には対応できないデメリットがあります。

<ul class="list list--1">
  <ul class="list__list">
    <li>北海道</li>
    <li>青森県</li>
    <li>岩手県</li>
    <li>宮城県</li>
    <li>秋田県</li>
    <li>山形県</li>
    <li>福島県</li>
    <li>茨城県</li>
    <li>栃木県</li>
    <li>群馬県</li>
    <li>埼玉県</li>
    <li>千葉県</li>
    <li>東京都</li>
    <li>神奈川県</li>
    <li>山梨県</li>
    <li>新潟県</li>
  </ul>
  <ul class="list__list">
    <li>富山県</li>
    <li>石川県</li>
    <li>福井県</li>
    <li>長野県</li>
    <li>岐阜県</li>
    <li>静岡県</li>
    <li>愛知県</li>
    <li>三重県</li>
    <li>滋賀県</li>
    <li>京都府</li>
    <li>大阪府</li>
    <li>兵庫県</li>
    <li>奈良県</li>
    <li>和歌山県</li>
    <li>鳥取県</li>
    <li>島根県</li>
  </ul>
  <ul class="list__list">
    <li>岡山県</li>
    <li>広島県</li>
    <li>山口県</li>
    <li>徳島県</li>
    <li>香川県</li>
    <li>愛媛県</li>
    <li>高知県</li>
    <li>福岡県</li>
    <li>佐賀県</li>
    <li>長崎県</li>
    <li>熊本県</li>
    <li>大分県</li>
    <li>宮崎県</li>
    <li>鹿児島県</li>
    <li>沖縄県</li>
  </ul>
</ul>

仮に都道府県を3列にして並べたいという場合だと、このように3つにリストを分割してタグに囲めばかんたんだと思いつきます。

しかし、レスポンシブに対応する場合に「2列にしたい」という場合にはうまく対応することができず、PCとスマホでソースを別にするということをしてしまいます。
これはスマートではないですし、更新管理が難しくなります。
例が増減の無いであろう都道府県なのでピンとこないかもしれませんが。

デザインに依存した3列ありきのタグの使い方はよくないですが、地方ごとに区切るタグの使い方であれば問題ありません。

この方法はあまりおすすめしませんが、もしこの方法を使う場合はレスポンシブのイメージを持ってコーディングする必要があります。

.list--1{
  display: flex;
  flex-flow: row wrap;
}
.list--1 > .list__list{
  width: 150px;
}

column-countを使う方法

区切りの無い都道府県のリストを使います。

<ul class="list list--2">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>
.list--2{
  column-count: 3;
}

column-countだと列の数を指定するだけですべてのアイテムを均等に配置してくれます。

column-countはそもそもが文章の段組みのためのCSSです。
リストの折り返しのためのCSSではないため1列の幅が固定されるなどのデメリットがあります。

display:flex;を使う方法

区切りの無い都道府県のリストを使います。

<ul class="list list--3">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>
.list--3{
  display: flex;
  flex-flow: column wrap;
  height: 400px;
}

通常、display: flex;だと横並びになりますが、flex-direction:column;にすることで縦並びにすることができます。
また、flex-wrap: wrap;にすることで折り返しが可能になります。
flex-flow: column wrap;にすることで一括指定ができます。

しかし、折り返しポイントがなければただ縦に並ぶだけなので、高さ指定をしないといけません。
このため、アイテム数が増減しないとわかっているリストでないといつか表示エリアを超えてしまう可能性があり実質使うことができない、または、増減するたびに修正が必要になってしまいます。

縦並びリスト (jQueryを使う)

JavaScript・jQueryを使う方法

区切りの無い都道府県のリストを使います。

基本的には、 display:flex;を使う方法 を使いますが、CSSで高さ指定をせず、jQueryで高さを動的に取得、指定します。

<ul class="list list--4">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>
.list--4{
  display: flex;
  flex-flow: column wrap;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function(){
    // 列の数を指定
    var column = 3;

    // すべての要素数を取得
    var num = $(".list--4 > li").length;

    // 1要素の高さを取得
    var height = $(".list--4 > li").outerHeight();

    // 1列の要素数を計算 小数点は切り上げ
    var column_num = Math.ceil(num / column);

    // 1列の要素数 * 1列の高さ
    var column_height = column_num * height;

    $(".list--4").height( column_height );
  });
</script>

実際の案件次第でやり方はいろいろあると思います

ここでは列の数を指定して、アイテム総数から1列のアイテム数を動的に指定する方法をプログラムします。

リストのアイテム総数を指定した列数で割り算します。
例の都道府県では、 3列 / 47都道府県 の計算をすることになります。

割り切れず小数点以下が発生した場合は切り上げます。
切り捨てたり、四捨五入だと指定した3列を超えてしまう可能性があるため小数点切り上げします。
JavaScriptで小数点切り上げをするにはMath.ceil() 関数を使います。

1要素の高さもJavaScript(jQuery)で取得し、1列のアイテム数と掛け算します。
これで高さを動的に指定することができアイテムの増減に対応することができます。

まとめ

CSSで縦並びリストを折り返す方法を解説しました。

  • 折り返しのためだけにHTMLタグで区切るのは避ける (レスポンシブ対応が難しくなる)
  • column-countを使う (文章に使うものなのでうまくいかないときがある)
  • display:flex;を使う (増減に対応するには高さ指定変更が必要になる)
  • CSSだけでは対応できない (JavaScript・jQueryを使って動的に高さ指定する)

2021年時点では縦並びリストを複数列にするCSSはありませんが、JavaScript・jQueryを使うことでアイテムの増減に対応することができます。