Last Update : 03/13/2003
HTML基礎講座 :: リストを使う
マークつきリスト
基本の形
<ul>
<li> リスト1 </li>
<li> リスト2 </li>
<li> リスト3 </li>
</ul>
「<li> </li>」の数は、自由に増減できる。
あと、右のサンプルは、リストの前に黒丸がついてるじゃん。これを、白丸にしたり、四角にしたりするには、「<ul type="マーク">」のように、type属性を入れる。“マーク”の部分には、disc(黒丸)、circle(白丸)、square(四角)のどれかを入れればオッケー。
あと、終了タグ「</li>」は、いちおう省略可能ってことになってるけど、出来るだけ省略しないようにしよう。
リストを入れ子にする
<ul>
<li> リスト1 </li>
<li> リスト2
<ul>
<li> リスト2.1 </li>
<li> リスト2.2 </li>
</ul>
</li>
<li> リスト3 </li>
</ul>
リストを入れ子にするには、上みたいに、「<li> </li>」の中に、また「<ul> </ul>」を書いてやればイイぜ。
番号つきリスト
ul を ol に変えるだけ
<ol>
<li> リスト1 </li>
<li> リスト2 </li>
<li> リスト3 </li>
</ol>
リストの先頭につくマークを、通しの番号に変えたい場合、「<ul>」じゃなくて「<ol>」に変えてやるだけでいい。
番号の種類や開始番号を変える
<ol type="a">
<li type="I"> リスト1 </li>
<li> リスト2 </li>
<li> リスト3 </li>
</ol>
OLリストの番号の種類を変えるには、「<ol>」か「<li>」に type属性を入れるぞ。OL要素に入れた場合は、そのリスト全部の番号種類が変更されて、LI要素に入れた場合、そのリストだけ番号種類が変わる。どんなのがあんのかは、下を見てくれよな。
- type="A"
- アルファベット大文字。最後の Z. まで番号が振られた後どうなるかはブラウザによって違う。一般的なブラウザだと、AA. としてくれる。
- type="a"
- アルファベット小文字。同じく、最後の z. まで番号が振られた後どうなるかはブラウザのみぞ知る。
- type="I"
- ローマ数字大文字。桁数が多くなると、長くなるから止めた方がいいかもな。(例えば、123 は、CXXIII )
- type="i"
- ローマ数字小文字。同じく、桁数が多くなると長くなる。
- type="1"
- デフォルトのアラビア数字。
<ol start="5">
<li> リスト1 </li>
<li value="10"> リスト2 </li>
<li> リスト3 </li>
</ol>
ふつうは、1. 2. 3. と、1から番号が割り振られるけど、それを途中からはじめたい場合、「<ol>」に start属性を入れるぞ。例えば「start="5"」ってしたら、5. 6. 7. と割り振られる。
リストの途中で番号を飛ばしたい場合、その「<li>」に value属性を入れる。上の例だと、5. 10. 11. と割り振られるぞ。
定義型リスト
項目とその説明に使う
<dl>
<dt> 項目1 </dt>
<dd> 項目1の説明 </dd>
<dt> 項目2 </dt>
<dd> 項目2の説明 </dd>
</dl>
こんな風に、「<dt> </dt>」に項目を入れて、「<dd> </dd>」の中に、その説明を入れるんだ。リストの数は自由に増減可能だぜ。
あと、「<dt>」「<dd>」の終了タグ「</dt>」「</dd>」は省略可能で、省略してる人も結構いるみたいだけど、できるだけ省略しないようにしよう。
