箇条書き(ulタグ・liタグ)を横2列で並べる方法!

箇条書きのタグのul・liタグは通常縦に並びます。この箇条書きのタグを横2列で並べる方法についてサンプルコードとプレビュー付きで解説していきます。

コンテンツ [表示]

  1. 1箇条書き(ulタグ・liタグ)を横2列で並べたい
  2. 2箇条書き(ulタグ・liタグ)を横2列で並べる方法
  3. 2.1floatを使う方法
  4. 2.2flexboxを使い方法
  5. 3まとめ

箇条書き(ulタグ・liタグ)を横2列で並べたい

箇条書きのulタグ・liタグはCSSで何の設定もしないと、通常縦に並びます。

さて、この縦に並んだ箇条書きを2列で並べようと思うと少し工夫が必要になります。

横2列に並べた例

箇条書き(ulタグ・liタグ)を横2列で並べる方法

さて、箇条書きのタグを横2列で並べる方法ですが、やり方は複数あります。ぜひやりやすいやり方を採用してみて下さい。

floatを使う方法

floatを使い、横にならべwidth50%にすることで、横2列を実現しています。
※下記例題ではmarginを入れたため横幅はcalc(50% - 左右のmargin)としています。

あわせて読みたい
float
CSSのfloatプロパティは指定した要素をブロック内の左右のどちらに寄せるかを制御するプロパティです。floatプロパティの構文や使い方をサンプルコード付きで解説します。

flexboxを使い方法

flexboxを使って横に並べる方法でも可能です。

width50%として、flex-wrap: wrapを指定することで複数行で表示すりょうにしています。
※下記例題ではmarginを入れたため横幅はcalc(50% - 左右のmargin)としています。

まとめ

いかがでしたでしょうか。通常は縦に並ぶ箇条書きを横2列で表示する方法を紹介してきました。

今回いずれの方法も横幅は50%としましたが、20%を指定すれば5列、10%では10列と横幅を調整することで列数を変更することが出来ます。

floatflexboxどちらのやり方でも実現可能です。ぜひやりやすい方で実装してみて下さい!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次