last modified 20th/Oct. 2000
HTML 4 では、箇条書きを表す要素が幾つか用意されています。これらの要素は何れもブロック要素です。
<!ENTITY % list "UL | OL | DIR | MENU">
DIR 要素、 MENU 要素は廃止予定の非推奨要素なのでここでは扱いません。
ここで扱うのは、 OL, UL 要素です。
<!ELEMENT OL - - (LI)+ -- ordered list --> <!ATTLIST OL %attrs; -- %coreattrs, %i18n, %events -- type %OLStyle; #IMPLIED -- numbering style -- compact (compact) #IMPLIED -- reduced interitem spacing -- start NUMBER #IMPLIED -- starting sequence number -- > <!ELEMENT UL - - (LI)+ -- unordered list --> <!ATTLIST UL %attrs; -- %coreattrs, %i18n, %events -- type %ULStyle; #IMPLIED -- bullet style -- compact (compact) #IMPLIED -- reduced interitem spacing -- > <!ELEMENT LI - O (%flow;)* -- list item --> <!ATTLIST LI %attrs; -- %coreattrs, %i18n, %events -- type %LIStyle; #IMPLIED -- list item style -- value NUMBER #IMPLIED -- reset sequence number -- >
順番付きリストは OL 要素で表します;
<ol> <li>平均場を仮定する <li>Fermi エネルギーを求める <li>平均場を求める <li> '2.' に戻る </ol>
LI 要素の終了タグは省略可能です。XHTMLへの対応を考えると、省略しない方が良いかもしれません。
LI 要素の内容は任意の要素を持ち得ますが、 OL 要素は LI 要素以外を直接子供要素には持てません。
順番無しリストを UL 要素で表します;
<ul> <li>平均場近似 <li>DMRG <li>QMCL </ul>
LI 要素の内容は任意の要素を持ち得ますが、 UL 要素は LI 要素以外を直接子供要素には持てません。
リストを入れ子にして重層的なリストを作れます;
<ul>
<li>大項目一</li>
<li>大項目二
<ol>
<li>中項目一</li>
<li>中項目ニ</li>
</ol>
</li> <!--大項目二の終了タグ;省略可-->
<li>大項目三</li>
</ul>
入れ子されたリスト項目は、親リストの LI 要素の子供要素であることに注意してください。UL, OL 要素は何れも LI 要素しか子供要素に持てませんので、リストを入れ子にする場合は、或る LI 要素の子供要素として現れます。
UL, OL 要素には見栄えを指定するための属性が用意されています。これから紹介する属性は何れも非推奨属性ですので、出来るだけスタイル・シートで実現するように心掛けましょう。
UL...% ULStyle; (disc|square|circle)
OL...% OLStyle; (1|a|A|i|I)
LI...% LIStyle; (%ULStyle;|%OLStyle;)
非推奨属性を利用した例
<ul compact="compact"> <li>list1 <li>list2 </ul>
<ol compact="compact">
は、属性値を省略して、単に次のようにも書けます; <ol compact>
。一部のブラウザは、むしろ省略しない形を解釈できませんが、XHTMLでは属性値の省略は認められません。
非推奨属性を利用した例
<ol type="A"> <li>list item 1 <li>list item 2 <li>list item 3 </ol>
非推奨属性を利用した例
<ol type="I" start="10"> <li>list item 1 <li>list item 2 <li>list item 3 <li value="20">list item 4 <li>list item 5 <li>list item 6 </ol>
これらの見栄えの指定は、廃止予定の非推奨属性を利用しています。CSSでは、より木目細かく柔軟に指定できます;CSS解説