HTML: ul,ol,li タグ
概略
-
MDN: ul: 順序なしリスト (Unordered List) 要素
li 要素に箇条書きのマークが付きます。 -
MDN: ol: 順序付きリスト (Ordered List) 要素
li 要素の箇条書きのマークが通し番号になります。 -
MDN: li: リスト項目 (List Item) 要素
箇条書きの個々の項目を入れるタグです。 - HTML: 文章レイアウト: 箇条書き、目次、表など
HTML サンプル
TestHTML_ul_ol_li01.htmlHTML のみのサンプル。CSS 装飾なしのときの初期表示です。
TestJS_edit_html01.html
編集シミュレーション。
- TestJS_edit_html01.html
ul のネスト。編集シミュレーション。
CSS サンプル (2024)
TestJS_edit_html01.htmlCSS の編集シミュレーション。 TestCSS_ul_li_marker_indent01.html
自前の箇条書きマークを付ける。CSS ::before のサンプル。
左の余白の調整。
CSS content
TestHTML_ul_li_line_style_type01.html
list-style-type のサンプル。箇条書きのマーク。
TestHTML_ul_li_index01.html
目次のサンプル。箇条書きマーク、インデント、 下線、リンクのブロック要素化など。
TestHTML_ul_li_index04.html
目次のサンプル。
float: left; で li 要素を左右に並べる
TestHTML_ul_li_float_left01.htmlli 要素に a リンクを付けるサンプル。 a を block 要素 (display: block;) にする。
CSS float
HTML: a タグ
flex で画像と説明文を左右に並べる (2023)
TestHTML_layout_index01.htmlCSS flex で画像と説明文を左右に並べるサンプル。 画像は figure, img で固定幅、説明文は dl, dt, dd で可変幅です。
CSS: flex
figure タグ
dl, dt, dd タグ
タブパネル
HTML: タブパネルTestHTML_tabpanel_input_ul01.html
JavaScript を使用しないサンプルです。 input タグのラジオボタン (type="radio") を組み合わせます。
ツリー風の表示
TestHTML_SGFTree_ul_li_nest_css_icon02.html
CSS でアイコン画像をつけるなど装飾のサンプル。 こちらは見た目のサンプルで、実際の処理は JavaScript で行います。
ul,liタグ (3),ツリービュー
SGF ツリービュー
CSS でアイコン画像をつけるなど装飾のサンプル。 こちらは見た目のサンプルで、実際の処理は JavaScript で行います。
ul,liタグ (3),ツリービュー
SGF ツリービュー