liタグを、縦並びで、複数カラムで表示したいときの方法です。
言葉だけではうまく伝えられないので、さっそく紹介していきます。
方法1、2とも、HTMLは共通です。
山のラインナップの偏りはスルーしてください。。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p>登山・トレッキングで行きたいところ</p> <ul class="column"> <li>長瀞</li> <li>高尾山</li> <li>筑波山</li> <li>阿蘇山</li> <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> |
【方法1】column-count
CSS
|
1 2 3 |
.column{ column-count: 2; } |
プレビュー
登山・トレッキングで行きたいところ
- 長瀞
- 高尾山
- 筑波山
- 阿蘇山
- 屋久島
- 箱根山
- 日光白根山
- 御嶽山
- 高水三山
- 大山
- 金時山
- 尾瀬
- 乗鞍岳
- 谷川岳
- 富士山
- いつかはマッターホルン…！
CSSはたった1行だけ！
お手軽ですね。
【方法2】flexbox
CSS
|
1 2 3 4 5 6 |
.column{ display: flex; flex-wrap: wrap; flex-direction: column; height: ○○px; } |
プレビュー
登山・トレッキングで行きたいところ
- 長瀞
- 高尾山
- 筑波山
- 阿蘇山
- 屋久島
- 箱根山
- 日光白根山
- 御嶽山
- 高水三山
- 大山
- 金時山
- 尾瀬
- 乗鞍岳
- 谷川岳
- 富士山
- いつかはマッターホルン…！
親要素（.column）の高さを調整しないと
折り返ってくれないのが引っかかりつつ、
他に良い方法もなかったので
当初はflexboxを使ってました。
が、column-countを知ると
CSS1行だけで折り返してくれて最高！
使わない理由が見つからないです。
2020.08.11追記
リストを縦並びで複数カラム表示したいときはcolumn-count１択だよね〜、と思って書いたこの記事でした。
リストの中のテキスト量が違うとき、
この方法だと自動的にいい感じの場所で折り返ってくれるのですが、
ここで折り返したい！という指定があるときは、flexboxの方が調整しやすいかもです。
リストの中のテキスト量が全部同じくらいの場合はcolumn-countでいいのですが、
左右n個ずつにして〜、と指定され、
それが右の方が圧倒的にテキスト量多かったりして……あああ！！！となったので、、
その場に応じて、臨機応変に使い分けてみてください。
2023.03.14追記
gridを使った方法を別記事でアップしました！
こちらも是非参考にしてみてください↓↓
gridを使って要素を縦並びで複数カラムにする簡単な方法｜nico MEMO
コメント