hp-design.Net :: geoCities

First Update : 02/04/2003
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>」は省略可能で、省略してる人も結構いるみたいだけど、できるだけ省略しないようにしよう。

[ back ] [ page top ]