ホーム > HTMLサンプル

2013/12-2018/05/19

ul,ol,li タグ

目次
  1. HTMLサンプル
  2. CSSサンプル
  3. CSS display, focus など
  4. 関連

HTMLサンプル

TestHTML_ul_ol_02.html
装飾なしのデフォルトの表示。編集シミュレーション。
TestHTML_ul_li_nest01.html
ul のネスト。編集シミュレーション。

CSSサンプル

TestHTML_ul_li_nest02.html
CSSの編集シミュレーション。

TestHTML_ul_li_line_style_type01.html
list-style-typeのサンプル。箇条書きのマーク。
TestHTML_ul_li_index01.html
目次のサンプル。箇条書きマーク、インデント、下線、リンクのブロック要素化など。
TestHTML_ul_li_index04.html
目次のサンプル。
TestHTML_ul_li_index02.html
目次のサンプル。float:left で画像と説明文を横に並べる。

TestHTML_ul_li_index03.html
文章の領域を可変幅にしたサンプル。

float:left;で並べる

TestHTML_ul_li_float_left01.html
float:left で li を横に並べる。

ツリー風の表示

TestHTML_SGFTree_ul_li_nest_css_...
CSS でアイコン画像をつけるなど装飾。
(2018/05) IE11で CSS に関する注意点あり。

ul,liタグ その3,ツリービュー
SGFツリービュー
CSS いろいろ

CSS display, focus など


TestHTML_css_display_visibility01.html
li:hover のサンプル。li 内の div を表示・非表示。
visibility と display の違い。

TestHTML_ul_li_div_focus03.html
li:focus のサンプル。li 内の div をポップアップ表示。
div を position:absolute; にして li に対して重ねて表示。
div の表示・非表示のサンプル

関連

目次
gorogoronyan@gmail.com
inserted by FC2 system