リストに使うタグは ul ol li があります。
リストは「ul と li」または「ol と li」の組み合わせで作ります。
ulとliを使ったリスト
先頭に黒丸が付いた箇条書きのリストを作ることができます。
ul の開始タグと終了タグで li を挟みます。
li は基本的にはいくつ作っても構いません。
See the Pen リストタグ1 by Hitoshi Matsumoto (@aether14) on CodePen.
olとliを使ったリスト
先頭に番号が付いた順序型の箇条書きリストを作ることができます。
ol の開始タグと終了タグで li を挟みます。
li は基本的にはいくつ作っても構いません。
See the Pen qBBQqBd by Hitoshi Matsumoto (@aether14) on CodePen.
CSSでマークを変える方法
CSSを使ってulの黒丸やolの数字以外のマークに変えることもできます。
See the Pen リスト｜リストスタイル by Hitoshi Matsumoto (@aether14) on CodePen.
マークを消す方法
ulの黒丸やolの数字などのマークを消すには以下をCSSに記述します。
ul {
list-style: none;
}olの場合も同じやり方です。liに対してlist-style: none;を入れることも可能です。
リストを入れ子にする
リストの中にリストを入れることもできます。これを入れ子と呼びます。
See the Pen リスト｜入れ子 by Hitoshi Matsumoto (@aether14) on CodePen.
リストのレッスン
リストを使ったレッスンをしてみましょう。出来上がるかギブアップしたら完成ページをデベロッパーツールで確認し答え合わせしてください。
完成ページ https://smartpocke.com/sample/list/ レッスンをダウンロード https://smartpocke.com/sample/list/lesson_list.zip