【CSS】 リストを複数列にして表示する方法

こんにちは、さち です。

今回は、HTML のリスト <li> を縦に並べた状態で複数列にする方法について書いていきます。

リストを複数列にする

HTML で「リスト」を作りました。例えば、このリストを縦2列で表示してみます。

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
</ul>

実現するには、CSS で ul に column-count: 2; を設定します。もちろん、「数値」を変えることで列数を変更できます。（初期値は auto）

ul {
  column-count: 2;
}

上記の CSS を適用した結果がこちら。ちゃんと 333 で折り返して、2列になっているのが分かります。

狭くなったら1列に戻す

レスポンシブデザインのサイトでは、ウィンドウ幅が狭いときに、リストを1列に戻したいこともあります。

その場合の対処法を考えていきます。

【方法1】 メディアクエリを使う

「メディアクエリ」を使って、特定のウィンドウ幅で column-count: auto; に切り替えます。

例えば、ウィンドウ幅が 300px 以下で切り替えるには、こんな感じの CSS にします。

ul {
  column-count: 2;
}

@media screen and (max-width: 300px) {
  ul {
    column-count: auto;
  }
}

結果がこちら。ウィンドウ幅の変化をアニメーションで再現しています。

【方法2】 column-width を使う

初期値の column-count: auto; は変えないまま column-width を指定することで、「画面」の幅が「列」の幅よりも広いときに自動的に列数を増減させます。

ul {
  column-width: 100px;
}

結果がこちら。ウィンドウ幅の変化をアニメーションで再現しています。

メディアクエリを使わないので管理が楽ですが、列の数は指定できません。

表示する環境によっては、想定よりも列の数が多くなってしまう可能性があるので、注意して下さい。

役に立つかもしれない情報

その他のタグにも使える

今回は、 column-count を <ul> タグに適用しましたが、その他のタグにも使えます。

例えば、<div> や <p> に対して使うと、文章を複数列にできます。

まとめて指定できる

column-count と column-width は、columns というプロパティでまとめて指定できます。

例えば、column-count: auto; と column-count: 100px; をまとめて書くと columns: auto 100px; になります。