リストタグ

リストは、一連の項目を順番に並べたもので、主に2つの種類に分けられます。順序付きリストと順序なしリストです。

順序付きリストは、各リスト項目の前に番号が付き、順番が明確に表示されます。例えば、次のようになります。

1. リスト項目 A
2. リスト項目 B
3. リスト項目 C

順序なしリストは、リスト項目の前に番号がなく、リスト記号のみが表示されます。デフォルトでは、丸印が使われます。

・ リスト項目 A
・ リスト項目 B
・ リスト項目 C

`<ol>`

<ol> タグは、順序付きリストのコンテナ（ordered list）であり、内部のリスト項目の前に数字の番号を生成します。リスト項目の順番に意味がある場合、例えばランキングなどに、このタグを使用します。

<ol>
  <li>リスト項目 A</li>
  <li>リスト項目 B</li>
  <li>リスト項目 C</li>
</ol>

上記のコードは、リスト項目 A、B、C の前に、それぞれ 1、2、3 の番号を生成します。

<ol> タグの内部には、 <ol> タグまたは <ul> タグをネストして、多階層リストを作成することができます。

<ol>
  <li>リスト項目 A</li>
  <li>リスト項目 B
    <ol>
      <li>リスト項目 B1</li>
      <li>リスト項目 B2</li>
      <li>リスト項目 B3</li>
    </ol>
  </li>
  <li>リスト項目 C</li>
</ol>

上記のコードでは、順序付きリストの中に別の順序付きリストがネストされており、レンダリング結果は次のようになります。

1. リスト項目 A
2. リスト項目 B
  1. リスト項目 B1
  2. リスト項目 B2
  3. リスト項目 B3
3. リスト項目 C

このタグには、以下の属性があります。

（1）reversed

reversed 属性は、降順の数字リストを生成します。

<ol reversed>
  <li>リスト項目 A</li>
  <li>リスト項目 B</li>
  <li>リスト項目 C</li>
</ol>

上記のコードでは、リスト項目 A、B、C の前に生成される番号は 3、2、1 となります。

（2）start

start 属性の値は整数で、数字リストの開始番号を表します。

<ol start="5">
  <li>リスト項目 A</li>
  <li>リスト項目 B</li>
  <li>リスト項目 C</li>
</ol>

上記のコードでは、リスト項目 A、B、C の前に生成される番号は 5、6、7 となります。

（3）type

type 属性は、数字番号のスタイルを指定します。現在、ブラウザは次のスタイルをサポートしています。

a：小文字
A：大文字
i：小文字のローマ数字
I：大文字のローマ数字
1：整数（デフォルト値）

<ol type="a">
  <li>リスト項目 A</li>
  <li>リスト項目 B</li>
  <li>リスト項目 C</li>
</ol>

上記のコードでは、リスト項目 A、B、C の前の番号は、それぞれ英語の小文字 a、b、c となります。

番号が文字であっても、 start 属性は依然として整数を使用することに注意してください。

<ol type="a" start="3">
  <li>リスト項目 A</li>
  <li>リスト項目 B</li>
  <li>リスト項目 C</li>
</ol>

上記のコードでは、 type 属性は番号に小文字の英文字母を使用することを指定し、 start 属性は 3 であるため、 c から番号付けを開始します。

`<ul>`

<ul> タグは、順序なしリストのコンテナ（unordered list）であり、内部のリスト項目の前に塗りつぶされた小円をリスト記号として生成します。リスト項目の順番に意味がない場合に、このタグを使用します。

<ul>
  <li>リスト項目 A</li>
  <li>リスト項目 B</li>
  <li>リスト項目 C</li>
</ul>

上記のコードのレンダリング結果は、リスト項目 A、B、C の前に、それぞれ塗りつぶされた小円がリスト記号として生成されます。

<ul> タグの内部には、 <ul> または <ol> をネストして、多階層リストを作成することができます。

`<li>`

<li> はリスト項目を表し、 <ol> または <ul> コンテナ内で使用されます。

順序付きリスト <ol> 内では、 <li> には value 属性があり、現在のリスト項目の番号を定義します。後続のリスト項目はこの値から番号付けを開始します。

<ol>
  <li>リスト項目 A</li>
  <li value="4">リスト項目 B</li>
  <li>リスト項目 C</li>
</ol>

上記のコードでは、 value 属性は2番目のリスト項目の番号を 4 に指定しているため、3つのリスト項目の番号はそれぞれ 1、4、5 となります。

`<dl>`、`<dt>`、`<dd>`

<dl> タグはブロックレベル要素で、用語のリスト（description list）を表します。用語名（description term）は <dt> タグで定義し、用語の説明（description detail）は <dd> タグで定義します。 <dl> は、用語集の定義によく使用されます。

<dl>
  <dt>CPU</dt>
  <dd>中央処理装置</dd>

  <dt>Memory</dt>
  <dd>メモリ</dd>

  <dt>Hard Disk</dt>
  <dd>ハードディスク</dd>
</dl>

<dt> と <dd> はどちらもブロックレベル要素で、 <dd> はデフォルトで <dt> の下でインデントされて表示されます。上記のコードのデフォルトのレンダリング結果は次のようになります。

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>

<dt>和<dd>都是块级元素，<dd>默认会在<dt>下方缩进显示。上面代码的默认渲染结果如下。

CPU
  中央処理装置

Memory
  メモリ

Hard Disk
  ハードディスク

複数の用語（ <dt> ）が1つの説明（ <dd> ）に対応したり、複数の説明（ <dd> ）が1つの用語（ <dt> ）に対応したりすることも有効です。

<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>

  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>

上記のコードでは、 A と B は共通の説明 C を持ち、 D は2つの説明 E と F を持っています。

リストタグ

<ol>

<ul>

<li>

<dl>、<dt>、<dd>

`<ol>`

`<ul>`

`<li>`

`<dl>`、`<dt>`、`<dd>`