BLOG

リストの縦並びで2列にする

| HTML / CSS

2列にするときって普通にすると
flexとかflowとか使って、2列にするんですが
それだと
- list01 - list02
- list03 - list04
- list05

って感じに横になるんですがね。
そうじゃなくて今回は

- list01 - list04
- list02 - list05
- list03

こういう感じにしたいのです。
ってことで簡単に、

/// HTML
<ul>
  <li>list 01</li>
  <li>list 02</li>
  <li>list 03</li>
  <li>list 04</li>
  <li>list 05</li>
</ul>

HTMLはこんな感じ

ul{
  column-count: 2;
}

cssはこんな感じです。
でもね、これだと左3右2とかで数があってないと
左右が縦センターに揃っちゃうんですよね。
面がずれるんです。

li{
  display: inline-block;
}

なので中のに上記を追加したら面そろいます。
ってなわけでいちいち枠で囲って並べたりしなくてもよくなりました。
すごくありがたいですね!

あと、カラム間の距離は

ul{
  column-count: 2;
  column-gap: 10px;
}

って感じで、「column-gap」でできます。
以前記事を書いたのですが、こっちのがわかりやすくかけたと思うのでこっち残しにします。

一応、flexとか使ってもできますが、それだと高さを指定しないとだめなので、
中身(数)が増えたり、2行になったりとかね、そういうので使えないので
上記が一番フレキシブルにつかえると思います。
※ JSとか使ったらいけるんだろうけど面倒なのでしないです

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP