HTML => リスト

前書き

HTMLは、順序付きリスト、順序付けられていないリスト、および記述リストの3つの方法でリストを指定します。順序付きリストは、リスト要素の順序を示す序数列を使用し、順序付けられていないリストは、指定された順序で要素をリストするための箇条書きなどの定義済みシンボルを使用し、記述リストは、子で要素をリストするためにインデントを使用します。このトピックでは、HTMLマークアップでのこれらのリストの実装と組み合わせについて説明します。

構文

<ol> ordered list items </ol>
<ul> unordered list items </ul>
<li> list item (ordered and not) </li>
<dl> description list items </dl>
<dt> description list title </dt>
<dd> description list description </dd>

備考

関連項目

<ul style="list-style-type:disc">ように、リストスタイルのCSSプロパティを<ul>タグに追加して、各リストアイテムのマークに使用するアイコンの種類を変更することができます。以下のlist-style-typesが許可されています：

"list-style-type：disc"はデフォルトのドットです。
"list-style-type：circle"は塗りつぶされていない円です。
"list-style-type：square"は塗りつぶされた正方形です。
"list-style-type：none"は全くマークを使用しません。

また、 <ol> <ol type="1">ように、番号付けの方法を変更するために、 <ol>タグにタイプ属性を追加することもできます。以下のタイプが許可されています：

type = "1"がデフォルトの形式です。
type = "A"は大文字をアルファベット順に使用します
type = "a"は小文字をアルファベット順に使用します
type = "I"は大文字のローマ数字を使用します
type = "i"は小文字のローマ数字を使用します

順序付けられていないリスト

順序付けられていないリストは<ul>タグで作成でき、各リスト項目は<li>タグで作成できます（下の例を参照）。

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

これにより、箇条書きのリストが生成されます（デフォルトスタイル）。

項目
別のアイテム
もう一つのアイテム

項目の順序が重要でない項目のリストを表示するには、 ulを使用する必要があります。項目の順序を変更するとリストが正しくない場合は、 <ol>を使用する必要があります。

オーダーリスト

<ol>タグを使用して順序付きリストを作成することができ、各リスト項目は<li>タグを使用して以下の例のように作成できます。

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

これにより番号付きのリストが生成されます（デフォルトのスタイルです）。

項目
別のアイテム
もう一つのアイテム

手動で数値を変更する

順序付きリストのリスト項目に表示される数字を再生するには、いくつかの方法があります。最初の方法は、 start属性を使用してstart番号を設定するstartです。リストはこの定義された番号から開始し、通常どおり1ずつ増加し続けます。

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

これにより番号付きのリストが生成されます（デフォルトのスタイルです）。

項目
その他のアイテム
もう一つのアイテム

特定のリスト項目を特定の番号に明示的に設定することもできます。指定された値を持つものより後のリスト項目は、親リストがどこにあったかを無視して、その項目項目の値から1ずつインクリメントし続けます。

<li value="7"></li>

また、リスト項目のvalue属性を直接使用することで、より低い値で番号付けを再開することで、順序付きリストの既存の番号システムを上書きすることもできます。したがって、親リストがすでに値7に達していて、値4でリスト項目が見つかった場合、そのリスト項目は4として表示され、その点から再びカウントを続けます。

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

したがって、上記の例では、5,6,4,5,6の番号パターンに従うリストが生成されます。これは、前の数字よりも小さい数字から始めて、リスト内の数字6を複製します。

注： startおよびvalue属性は、順序付きリストがローマ数字または文字として表示されるように設定されていても、数字のみを受け入れます。

あなたは、 ol要素にreversedを追加することで番号を逆にすることができます：

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

番号の逆順は、新しいポッドキャストのエピソードやプレゼンテーションなど、継続的にリストに追加している場合に、最も新しい項目を最初に表示する場合に役立ちます。

数字のタイプを変更する

リスト項目マーカーに表示される数字のタイプは、 type属性を使用して簡単に変更できます

<ol type="1|a|A|i|I">

タイプ	説明	例
`1`	デフォルト値 - 10進数	1,2,3,4
`a`	アルファベット順（小文字）	あいうえお
`A`	アルファベット順（大文字）	あいうえお
`i`	ローマ数字（小文字）	i、ii、iii、iv
`I`	ローマ数字（大文字）	I、II、III、IV

アイテムのリストを表示するには、 olを使用してください。アイテムが意図的に順序付けされ、順序を強調する必要があります。項目の順序を変更してもリストが正しくない場合は、 <ul>を使用する必要があります。

説明リスト

記述リスト（またはHTML5より前に呼び出された定義リスト ）は、 dl要素で作成できます。これは、名前と値のグループで構成され、 dt要素に名前が与えられ、値はdd要素に与えられます。

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

ライブデモ

名前 - 値グループには、複数の名前や複数の値（代替案を表す）を持つことができます。

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

ライブデモ

ネストされたリスト

リストをネストすると、リスト項目のサブ項目を表すことができます。

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

アイテム1
項目2
サブアイテム2.1
サブアイテム2.2
アイテム3

ネストされたリストは、 li要素の子でなければなりません。

さまざまな種類のリストを入れ子にすることもできます：

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

HTML
リスト

サーチ…

前書き

構文

備考