メインコンテンツへスキップ

一覧表(リスト)

1.一覧表関連の要素

HTML文書の
一覧表(リスト)に
関わる要素を
まとめました。

目録, 表記, 名鑑, 列記, 一覧 など、リストを表す要素があります。

一覧表(リスト)に関わる要素は、以下の各要素です。

要素
メタ
フロー
フレー
埋込
区分化
見出し
起源
対話型
メタ
メタデータコンテンツ
スク
スクリプトをサポートする要素
フロー
フローコンテンツ
区分化
セクショニングコンテンツ
起源
セクショニングルート(廃止)
見出し
ヘディングコンテンツ
フレー
フレージングコンテンツ
埋込
エンベデッドコンテンツ
対話型
インタラクティブコンテンツ
要素 種類 メ
タ 		流
れ 		文
節 		埋
込 		対
話 		知
覚 		区
分 		見
出 		ス
ク
ol 通常要素 － 〇 － － － ※ － － －
ul 通常要素 － 〇 － － － ※ － － －
menu 通常要素 － 〇 － － － ※ － － －
dir 通常要素 － 〇 － － － ※ － － －
li 通常要素 － － － － － － － － －
dl 通常要素 － 〇 － － － ※ － － －
dt 通常要素 － － － － － － － － －
dd 通常要素 － － － － － － － － －

※ 上記での 知覚(パルパブルコンテンツ・Palpable content.) は、条件付きでそのカテゴリとなります。

2.リストとは

リストとは、
目録, 表記, 名鑑,
列記, 一覧 などの
意味を持つ英単語です。

リストとは、目録, 表記, 名鑑, 列記, 一覧 などの意味を持つ list英単語です。
一覧とは、全体の内容がわかるように簡明に記したもの。一覧表。
目録とは、書物の内容の見出しをまとめて記録したもの。目次。
列記とは、並べて書きしるすこと。

外来語としては、同じ種類の情報を羅列した一覧の事。
ここで着目すべきは、何について種類分けするかでどの要素で表記するかになると思います。

3.順序に意味がある

順序に意味がある場合は、
ol要素を用います。

「同じ種類の情報」を羅列という事で、階層構造だとリストの入れ子が必要だと思います。
そのうえで順序に意味がある場合は、ol要素を用います。

信号機の色

  1. 赤色
  2. 黄色
  3. 青色
  1. <h4>信号機の色</h4>
  2. <ol>
  3. <li>赤色</li>
  4. <li>黄色</li>
  5. <li>青色</li>
  6. </ol>

信号機の色は、信号機での並び順を意識すると順序に意味があります。ただ色の列記の場合は、順序に意味はありません。

  1. 疑似要素
  2. 疑似要素
  1. <ol class="colXHSample301">
  2. <li>疑似要素</li>
  3. <li>疑似要素</li>
  4. </ol>
  1. .colXHSample301 { counter-reset: nolDemo031; padding-left: 1.5em; list-style: none; }
  2. .colXHSample301 > li { position: relative; margin-bottom: 0.5em; }
  3. .colXHSample301 > li:before { position: absolute; counter-increment: nolDemo031; content: counter(nolDemo031); display: inline-block; border: solid 1px Background; border-radius: 50%; top: 50%; left: -2.0em; width: 23px; height: 23px; color: #000000; background: #ffffff; font-family: 'Avenir','Arial Black','Arial',sans-serif; font-weight: bold; font-size: 15px; text-align: center; line-height: 23px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

疑似要素を用いて、CSSでマーカーを装飾しています。

  1. c = a + b;
  2. c2 = a2 + 1;
  1. <ol class="colXHSample302">
  2. <li>c = a + b;</li>
  3. <li>c2 = a2 + 1;</li>
  4. </ol>
  1. .colXHSample302 { padding-left: 1.5em; }
  2. .colXHSample302 > li { margin: 0; padding: 0.2em 0.2em 0.1em 0.2em; border-style: none none dotted solid; border-width: 0 0 2px 1px; font-family: monospace, monospace; white-space: pre; }
  3. .colXHSample302 > li::after { display: inline-block; content: ' '; width: 1em; line-height: 1.0; background-color: #ccffff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M19%2C8%20L19%2C11%20C19%2C12.1045695%2018.1045695%2C13%2017%2C13%20L6%2C13%22%3E%3C%2Fpath%3E%0A%3Cpolyline%20points%3D%228%2016%205%2013%208%2010%22%3E%3C%2Fpolyline%3E%0A%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%3E%3C%2Frect%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-origin: content-box; background-position: bottom; }

ソースコード用の例として、色々盛り込みました。

リストとは、一覧 などの意味を持つ list英単語です。

テーブルとは、表, 一覧表 などの意味を持つ table英単語です。

  1. <div class="colXHSample303">
  2. <p><dfn>リスト</dfn>とは、一覧 などの意味を持つ list英単語です。</p>
  3. <p><dfn>テーブル</dfn>とは、表, 一覧表 などの意味を持つ table英単語です。</p>
  4. </div>
  1. .colXHSample303 { padding-left: 1.5em; list-style: decimal; }
  2. .colXHSample303 > * { display: list-item; margin-bottom: 0; }

スタイルシートにて装飾をリスト風にする例です。

装飾だけならこの様に、ol要素を用いなくても表せます。その上で、番号を振りたいだけならこの様に。番号を振りたいけど項目の順番自体に意味はない場合は、ul要素を用いてこの様な装飾をすれば良いです。

dfn要素を用いて、用語の定義インスタンスを表しています。

4.関連付け

グループで構成される場合は
dl要素を用います。

「用語と定義」, 「名前と値」とグループで構成される場合は、dl要素を用います。

Term10
Description11
Description12
Term20
Description21
  1. <dl>
  2. <dt><dfn>Term10</dfn></dt>
  3. <dd>Description11</dd>
  4. <dd>Description12</dd>
  5. <dt><dfn>Term20</dfn></dt>
  6. <dd>Description21</dd>
  7. </dl>

dfn要素を用いて、用語と定義の一覧として表しています。

Title10
Data11
Data12
Title20
Data21
  1. <dl class="cdlXHSample401">
  2. <div>
  3. <dt>Title10</dt>
  4. <dd>Data11</dd>
  5. <dd>Data12</dd>
  6. </div>
  7. <div>
  8. <dt>Title20</dt>
  9. <dd>Data21</dd>
  10. </div>
  11. </dl>
  1. .cdlXHSample401 { padding-left: 1.5em; list-style: decimal; }
  2. .cdlXHSample401 > div { display: list-item; }

順序に意味がある事を明示(マークアップ)するところまではしないで、スタイルシートでの装飾で見た目だけ順序付けした例です。

  1. Term10 Description11
  2. Term20 Description21
  1. <ol class="colXHSample402">
  2. <li>
  3. <dfn>Term10</dfn>
  4. <span>Description11</span>
  5. </li>
  6. <li>
  7. <dfn>Term20</dfn>
  8. <span>Description21</span>
  9. </li>
  10. </ol>
  1. .colXHSample402 { padding-left: 1.5em; }
  2. .colXHSample402 dfn { display: block; }
  3. .colXHSample402 span { display: block; margin-left: 40px; }

dfn要素を用いて、用語と定義の一覧として表しています。用語の順序に意味がある例として ol要素を用いています。

リストとは、一覧 などの意味を持つ list英単語です。

テーブルとは、表, 一覧表 などの意味を持つ table英単語です。

  1. <div class="cdvXHSample403">
  2. <p><dfn>リスト</dfn><span>とは、</span>一覧 などの意味を持つ list英単語です。</p>
  3. <p><dfn>テーブル</dfn><span>とは、</span>表, 一覧表 などの意味を持つ table英単語です。</p>
  4. </div>
  1. .cdvXHSample403 { padding-left: 1.5em; list-style: decimal; }
  2. .cdvXHSample403 > p { display: list-item; padding-left: 1.5em; text-indent: -1.5em; }
  3. .cdvXHSample403 > p > dfn { display: block; }
  4. .cdvXHSample403 > p > dfn + span { display: none; }

スタイルシートにて装飾を関連付けリスト風にする例です。

装飾だけならこの様に、ol要素を用いなくても表せます。その上で、番号を振りたいだけならこの様に。番号を振りたいけど項目の順番自体に意味はない場合は、ul要素を用いてこの様な装飾をすれば良いです。

dfn要素を用いて、用語の定義インスタンスを表しています。

5.順不同

関連付けリストでない
順不同の列記の場合は
ul要素を用います。

関連付けリストでない順不同の列記の場合は、ul要素を用います。

  • List
  • List
  1. <ul>
  2. <li>List</li>
  3. <li>List</li>
  4. </ul>

順不同の項目を列記しています。

リストとは、一覧 などの意味を持つ list英単語です。

テーブルとは、表, 一覧表 などの意味を持つ table英単語です。

  1. <div class="cdvXHSample501">
  2. <p><dfn>リスト</dfn>とは、一覧 などの意味を持つ list英単語です。</p>
  3. <p><dfn>テーブル</dfn>とは、表, 一覧表 などの意味を持つ table英単語です。</p>
  4. </div>
  1. .cdvXHSample501 { padding-left: 1.5em; list-style: disc; }
  2. .cdvXHSample501 > p { display: list-item; }

スタイルシートにて装飾を順不同のリスト風にする例です。

装飾だけならこの様に、ul要素を用いなくても表せます。その上で、マーカーを振りたいだけならこの様にすれば良いです。

dfn要素を用いて、用語の定義インスタンスを表しています。

6.menu要素

その内容で構成される
ツールバーを表す場合は
menu要素を用います。

menu要素は、その内容で構成されるツールバーを、順序付けのない項目(アイテム)の一覧(リスト)の形式で表します。

ブラウザの対応状況から、menu要素本来の機能が対応してないので、ul要素と効果が同じです。現状では ul要素の使用をお奨めします。

  • List
  • List
    •
    1. <menu>
    2. <li>List</li>
    3. <li>List</li>
    4. </menu>

    ブラウザの対応状況から、menu要素本来の機能が対応してないようです。