gorogoronyan FC2

HTML: ul,ol,li タグ

概略

HTML サンプル

TestHTML_ul_ol_li01.html
HTML のみのサンプル。CSS 装飾なしのときの初期表示です。
TestJS_edit_html01.html
編集シミュレーション。

CSS サンプル (2024)

TestJS_edit_html01.html
CSS の編集シミュレーション。
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.html
li 要素に a リンクを付けるサンプル。 a を block 要素 (display: block;) にする。
CSS float
HTML: a タグ

flex で画像と説明文を左右に並べる (2023)

TestHTML_layout_index01.html
CSS 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 ツリービュー

関連

inserted by FC2 system