リストを表すol要素・ul要素・li要素について【HTML】

HTMLでリストを表すときにはol要素やul要素を使います。

ol要素とul要素の大きな違いは、リスト項目の順番に意味があるかどうか。

順番に意味があるリストを表すときにはol要素を使い、順番不同でリストを表すときにはul要素を使うのが一般的です。

また、ol要素とul要素として使い、リストの項目を表すのはli要素です。

ol（オーダード・リスト）

最初に簡単にol要素とul要素の違いについていいましたが、ol要素はオーダード・リストといって、項目の順番に意味がある序列リストを表す要素です。

たとえば、ランキングリストや作業手順などのこと。

ol要素の直下に別のol要素を使うことはできないので、もし入れ子構造にするなら、後で説明するli要素の子要素として使う必要があります。

ol要素で使用できる属性

ol要素にはいくつか指定できる属性があります。

reversed（リバースド）

reversed属性はリストマーカーの順番を逆にするためのものです。

たとえば項目番号が初期値では昇順（小さい数から大きい数へ）になっているのを、reversed属性を使うことによって降順（大きい数から小さい数へ）にすることができます。

ちなみにreversed属性は論理属性なので、値を指定しなくてもいいです。

start（スタート）

start属性は、最初の項目につける番号を指定するときに使います。

たとえば、上のように「4」と指定すると、項目の番号が4からはじまります。

もしreversed属性が指定されていて降順になっていれば、4・3・2という順番で番号が与えられます。

値には半角の算用数字で指定します。

type（タイプ）

type属性でリストマーカーの形式を指定できます。

指定できる値は以下の通り。

こういった値を指定することができます。小文字と大文字の半角アルファベットで表すときに、a〜zまでいったら、「ba」〜「bz」、「ca」〜「cz」、「BA」〜「BZ」、「CA」〜「CZ」というような感じで続きます。

ul（アンオーダード・リスト）

ol要素とは違って、ul要素は項目の順番を特に気にしなくてもいい順不同のリストを表す要素です。

たとえば「〜一覧」とか「〜の条件」、「持ち物リスト」、「〜まとめ」みたいなリストですね。

ol要素と同じく、ul要素の直下に別のul要素を置くことはできません。そのため階層構造をもつリストを作成したい場合は、li要素の子要素として使う必要があります。

li（リスト・アイテム）

ol要素やul要素でつくるリストの項目を表すのがli要素です。

li要素の子要素としてだったら、ol要素やul要素を置くことができるので、階層構造を持つリストをつくる場合はol要素もしくはul要素の下にli要素を置き、さらにその下にol要素もしくはul要素を置くという形になります。

言葉で説明すると難しいですが、要するに下のような感じです。

li要素で使用できる属性value（バリュー）

ol要素の子要素としてli要素を使う場合、valueという属性を使うことができます。

value属性はリストマーカーに表示する数字を指定することができます。

指定する数値は半角の算用数字を使ってください。