リスト
目次
使い方
参考：
HTML で箇条書き ul・ol・li タグの使い方まとめ | サルワカ
ul タグ
項目に黒丸や白丸を付けた順序なしリストを作成する。
参考：
ol タグ
項目に 1, 2, 3, … あるいは a, b, c, … など順に数字やアルファベットを振った順序付きリストを作成する。
start 属性で開始番号を設定する。
<ol start="0">
参考：
li タグ
参考：
li タグとは｜コーディングのプロが作る HTML タグ辞典
value 属性
ol タグ内で li タグに value を指定すると、番号付きリストの番号を指定できる。
<ol> <li value="2">This is the "2nd" item.</li> </ol>
参考：
番号付きのリストの途中から番号を変える | HTML タグボード
list-style-type
マーカーの種類を指定する。
disc：黒丸circle：白丸square：黒四角decimal：算用数字 (1, 2, 3, ...)cjk-decimal：漢数字 (一, 二, 三, ...)decimal-leading-zero：ゼロを付けた数字 (01, 02, 03, ...)lower-roman：小文字のローマ数字 (i, ii, iii, ...)upper-roman：大文字のローマ数字 (I, II, III, ...)lower-alpha：小文字のアルファベット (a, b, c, ...)upper-alpha：大文字のアルファベット (A, B, C, ...)
項目のマーカーを表示しない場合は、list-style-type に none を指定する。
list-style-type: none;
参考：
list-style-type | スタイルシートリファレンス (htmq.com)
括弧付き数字リスト
参考：
HTML の <ol> で 1. ではなく (1) とか 2) とか括弧付きで表示したい場合のメモ | 牌語備忘録
list 要素の marker を括弧付きの数字にする | 株式会社コニファ
段組み／2列に表示する
フレックスボックスを使う。親要素に display: flex; と flex-wrap: wrap; を指定する。2段組みにする場合、子要素の幅を 50% に指定する。
.list-two-colomns {
display: flex;
flex-wrap: wrap;
}
.list-two-colomns li {
width: 50%;
min-width: 15rem;
}
参考：