BLOG

リストの縦並びの折返しをcssだけでする

| HTML / CSS

デザイン上縦並びでの折返しをしないとだめなとき、以前はJavascriptを使って何かしらで囲って折り返したりしてたんですが、ちょっと目からウロコのようなものを発見。
それが「column-count」っていうやつ。
以前もこりゃ便利と思ってたんですが、まぁ対応してるブラウザがその当時は少なかったことから今は使うの無理ねーって勝手に思ってたのか、文章の段落的なのにしか使えない的におもってたのか!
すごい、気が付かなかったことに大変残念な感じですw

ってことでサンプルをば

// CSS
ul{
  column-count: 2;
  column-fill: auto;
  column-gap: 0;
}
li{}

// html
<ul>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山</li>
</ul>

単純ですが「column-count」の値でカラムの数を指定します。
ulに高さを指定すると、その高さで折り返します。
高さを指定しないとリストが、等分されます。
カラム同時の間隔を開けたければ「column-gap」で指定すれば良しです。

CSS3が出た当時にいろいろと嬉しくて確認しましたが、使えないと思い込むのは今回のような残念な結果がでるということですね。思い込みは捨てていきます(´・ω・`)

PAGE TOP