HTML

The li element is used in HTML to create lists and is placed within either an <ol> element for ordered lists or a <ul> element for unordered lists.

li 要素

　li要素は HTMLのリストを作成するために使用される要素です。li は list item の略で、<ul>要素または <ol>要素の中に配置され、順序がない場合は <ul>要素、順序がある場合は <ol>要素に配置されます。

　li要素には、以下のような特徴があります。

1. li要素は、親要素の <ol>要素または <ul>要素に直接配置する必要があります。
2. li要素は、番号付きのリスト（<ol>）と順序のないリスト（<ul>）の両方に使用できます。
3. li要素の内容は、テキスト、画像、または他のHTML要素で構成できます。
4. li要素は、<ol>要素や<ul>要素内で、複数のli要素を配置することでリストを作成します。

　例えば、以下のようなコードは順序のないリストを作成します。

<ul>
	<li>りんご</li>
	<li>バナナ</li>
	<li>オレンジ</li>
</ul>

　この場合、<ul>要素がリストの開始を表し、<li>要素が各項目を表します。それぞれの項目は、箇条書きのポイントとして表示されます。

　また、以下のようなコードは番号付きのリストを作成します。

<ol>
	<li>朝食</li>
	<li>昼食</li>
	<li>夕食</li>
</ol>

この場合、<ol>要素がリストの開始を表し、<li>要素が各項目を表します。それぞれの項目は、数字付きのポイントとして表示されます。

value 属性

　li要素の value属性は、HTMLのリスト項目（li要素）に数値を関連付けるための属性です。この属性を使用することで、項目の値を指定することができます。ただし、value属性は ol要素（順序付きリスト）でのみ使用可能であり、ul要素（順序なしリスト）では無効です。

　具体的には、ol要素内の li要素に対して value属性を設定することで、リスト項目の表示される数値をカスタマイズすることができます。通常、順序付きリストは自動的に 1 から始まる連番が表示されますが、value属性を使用すると、任意の数値から始まる連番を指定できます。

<ol>
	<li value="3">項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ol>

　この例では、順序付きリスト内の項目の値が 3から始まるように指定しています。

<ol>
	<li value="5">項目1</li>
	<li value="10">項目2</li>
	<li value="15">項目3</li>
</ol>

　この例では、順序付きリスト内の各項目の値を 5から始めて、5ずつ増加させています。

<ol>
	<li value="1">項目1</li>
	<li value="3">項目2</li>
	<li value="6">項目3</li>
</ol>

　この例では、順序付きリスト内の項目2の値を 3に設定し、項目3の値を 6に設定しています。このように value属性を使うことで、連番をスキップしたり、間隔を設定することもできます。

<p>ゴルフ・コンペの順位発表</p>
<ol>
	<li>山田賢治</li>
	<li value="1">佐藤祥子</li>
	<li value="3">田中謙太郎</li>
	<li>榊原莉子</li>
	<li value="4">奥田太郎</li>
	<li value="6">安部聡史</li>
	<li>竹下四郎</li>
</ol>

　ol要素は、通常、1 から順にリスト番号を割り振ります。しかし、value属性を指定すると、それまでの順番とは関係なしに、該当の項目のリスト番号が、value属性に指定された番号になります。その次の項目には、value属性が指定されていない限り、その前のリスト番号に 1 を加えた番号が割り振られます。

reversed 属性

　reversed属性は、HTMLの li要素に対して使用される属性です。この属性を使用すると、リスト項目の値が逆順に表示されます。

<ol reversed>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ol>

li要素の概要

カテゴリー

なし

コンテンツ･モデル

フロー・コンテンツ

利用可能な場所

ol要素の中

ul要素の中

開始タグ

必須

終了タグ

該当の li要素の次に別の li要素が続く場合、または、該当の li要素が、その親要素の最後の子要素となる場合に、省略する事が出来ます。

要素固有の属性

この要素が ol要素の中にある場合のみ、以下の属性が利用できます。

value

項目のリスト番号

標準的なスタイル

ul {
	display: list-item;
}