<li> リストの項目を作成する

<li>タグの説明

<li>は、リストを作成する祭に項目を表すために使用します。この要素には、必ずリスト自体を構成する親要素が必要となります。

順序つきのリストを表す<ol>、または順序なしのリストを表す<ul>のパーツとして機能します。対応しているブラウザでは、<menu>の項目としても有効となります。

リストの各項目は箇条書きとなり、先頭にマーカーが追加されます。マーカーはtype属性で変更が可能です。各項目ごとにマーカーの種類を選択したい場合は<li>、一括で変更したい場合は親要素の<ol>や<ul>で変更を行います。

いずれの装飾もCSS（スタイルシート）で管理することをお勧めします。

<li>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• この要素のdisplayの値は、list-itemとなります。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。更に、この要素の中にリストを入れることもできます。

<li>に指定できる主な属性

type（非推奨）

リスト項目の先頭に置かれるマーカーを指定します。代わりにCSSのlist-style-typeプロパティを使用することが推奨されています。

• disc：黒丸
• circle：白丸
• square：四角

value

順序つきのリストを表す<ol>の場合に、項目のマーカーに示される順序を整数で指定できます。通常１から順に始まる並びを途中から変えることができます。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<li>の使い方とサンプル

リストの基本的な構造は以下の通りになります。

<ul>
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
</ul>

<ol>
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
</ol>

リストのマーカーを変更する場合は、list-style-typeプロパティを使います。

<ul class="list_sample">
	<li class="item1">リスト項目</li>
	<li class="item2">リスト項目</li>
	<li class="item3">リスト項目</li>
</ul>

.list_sample {
	margin-top: 10px;
}
.list_sample .item1 {
	list-style-type: disc;
}
.list_sample .item2 {
	list-style-type: circle;
}
.list_sample .item3 {
	list-style-type: square;
}

順序のあるリストの場合、value属性を使って項目の順序マーカーを操作することができます。指定された項目以降の並びは、value属性の値を起点としたものに変わります。

<ol>
	<li value="5">リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
</ol>