リスト

  • ul順序なしリスト要素
  • ol順序付きリスト要素
  • liリスト項目要素

使い方

参考:

HTML で箇条書き ul・ol・li タグの使い方まとめ | サルワカ

Lists | W3Schools

ul タグ

項目に黒丸や白丸を付けた順序なしリストを作成する。

参考:

UL | HTML クイックリファレンス

ul – 順序なしリスト要素 | MDN

ol タグ

項目に 1, 2, 3, … あるいは a, b, c, … など順に数字やアルファベットを振った順序付きリストを作成する。

start 属性で開始番号を設定する。

<ol start="0">

参考:

OL | HTML クイックリファレンス

順序付きのリストを作る | TAG index

開始番号を変更する | TAG index

数字を使ったリスト | Web ページ作りのお勉強

ol – 順序付きリスト要素 | MDN

li タグ

参考:

LI | HTML クイックリファレンス

li タグとは|コーディングのプロが作る HTML タグ辞典

li Tag | W3Schools

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-typenone を指定する。

list-style-type: none;

参考:

list-style-type | スタイルシートリファレンス (htmq.com)

list-style-type | MDN

括弧付き数字リスト

参考:

ol タグのナンバリングをカッコつきにする – Qiita

リストで括弧付の数字を作る方法 | Web お役立ちネタ帳

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;
}

参考:

箇条書き (ul タグ・li タグ) を横2列で並べる方法! | Qumeru マガジン

ul のリストを見やすく2列にする | cocotiie

2列のリンクリストで最後が1つの場合は幅 100% にする | cly7796.net

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA