ul 要素
順序のないリストを表示する。
ul 要素は、0個以上の li 要素を持つ。つまり、li 要素以外を直接の子要素とすることはできないので、ul 要素を入れ子にする場合でも、ul 要素の直下に別の ul 要素を置くことはできない。必ず、li 要素の子要素として使用する必要がある。
リストの先頭記号(リストマーカー)は、スタイルシートの list-style-type プロパティで指定する。
属性
なし
基本的には本文は見出しと段落だけで構成できるはずです。しかし、一連の並列される情報や、順序立ててステップを説明するような内容は、リストとして表現する方が分かりやすいことがあります。
適当にリストを交えてメリハリをつけるのも、読みやすく理解しやすい文章を書く上では大切な工夫です。情報の種類に応じて、次の3つのリストを使い分けてください。
ul 要素は、項目の順序があまり大きな意味を持たず、並列的に列挙する際に使用します。それぞれの項目は li 要素で示します。
順序のないリストを表示する。
ul 要素は、0個以上の li 要素を持つ。つまり、li 要素以外を直接の子要素とすることはできないので、ul 要素を入れ子にする場合でも、ul 要素の直下に別の ul 要素を置くことはできない。必ず、li 要素の子要素として使用する必要がある。
リストの先頭記号(リストマーカー)は、スタイルシートの list-style-type プロパティで指定する。
なし
リストの項目を表す。ul 要素と ol 要素の中にのみ指定できる。
<ul> <li>リスト項目A</li> <li>リスト項目B</li> <li>リスト項目C</li> </ul>
リストに階層を持たせたい場合は、次のように li 要素の中に別の ul 要素などを配置します。
このとき、リストの先頭記号(リストマーカー)は、 黒丸(disc)・白丸(circle)・黒い四角(square)の順に表示されます。
<ul> <li>リスト項目A</li> <li>リスト項目B <ul> <li>リスト項目B-1</li> <li>リスト項目B-2</li> </ul> </li> <li>リスト項目C</li> </ul>
ol 要素は、順序のあるリストを表示する際に使用します。それぞれの項目は li 要素で示します。
意図的に順序づけされたリストを表示する。
ol 要素は、0個以上の li 要素を持つ。つまり、li 要素以外を直接の子要素とすることはできないので、ol 要素を入れ子にする場合でも、ol 要素の直下に別の ol 要素を置くことはできない。必ず、li 要素の子要素として使用する必要がある。
属性名 | 属性値 | 説明 | 必須 |
---|---|---|---|
type | 1 | 算用数字(規定値) | × |
a | 小文字、半角アルファベット(z の次は aa になる) | ||
A | 大文字、半角アルファベット(Z の次は AA になる) | ||
i | 小文字、ローマ数字 | ||
I | 大文字、ローマ数字 | ||
start | 半角の算用数字 | 一番最初の項目に付ける番号(規定値:1) | × |
reversed | 論理値 | 降順にするかどうか(type="1" のときのみ有効)(規定値:false) | × |
リストの項目を表す。ul 要素と ol 要素の中にのみ指定できる。
属性名 | 属性値 | 説明 | 必須 |
---|---|---|---|
value | 整数 | 指定されている li 要素以降がこの数字からの連番になる ただし、ol 要素の子要素のときのみ指定できる | × |
<ol> <li>リスト項目1</li> <li>リスト項目2</li> <li value="8">リスト項目3</li> <li>リスト項目4</li> </ol>
リストの先頭の数字(リストマーカー)をアルファベットやローマ数字に変更することもできます。
<ol type="a"> <li>リスト項目1</li> <li>リスト項目2</li> <li value="8">リスト項目3</li> <li>リスト項目4</li> </ol>
また、開始番号を変更することもできます。
<ol start="9"> <li>リスト項目1</li> <li>リスト項目2</li> <li value="8">リスト項目3</li> <li>リスト項目4</li> </ol>
type="1" のときは数字を降順することもできます。このとき、0 にも負数にもなります。
<ol reversed> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> <li value="8">リスト項目5</li> <li>リスト項目6</li> </ol>
dl 要素は、定義・説明リストを表す際に使用します。 <dl>~</dl>の中に、 <dt>タグで定義・説明される言葉を、 <dd>タグでそれに対応する説明を配置してリストを作成します。
<dt>と<dd>は、必ずしも一対一である必要はありません。 一つの定義(dt)に対して複数の説明(dd)をしたり、 複数の定義(dt)に対して一つの説明(dd)をすることもできます。
例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。
dl 要素は、用語(1 個以上の dt 要素)と説明(dt 要素に続いて 0 個以上の dd 要素)を組み合わせたリストを表す。
例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用する。
なし
dt 要素は、dl 要素内で用語を指定する。これに続いて 0 個以上の dd 要素を記述する。
用語を定義語として表したい場合には、dt 要素として dfn 要素を使用する。
なし
dd 要素は、dl 要素内で説明を指定する。dt 要素に続いて 0 個以上記述する。
説明が複数の段落にわたる場合でも、同一の dd 要素内に記述する必要がある。段落を分ける目的で異なる dd 要素内に記述すべきではない。
なし
dt 要素が太字になるかどうか、dd 要素がインデントされるかどうかはブラウザによります。
<dl> <dt>用語1</dt> <dd>用語1の説明1</dd> <dd>用語1の説明2</dd> <dt>用語2</dt> <dt>用語3</dt> <dd>用語2と用語3の説明</dd> </dl>