HTML <li>タグの使い方：リストやメニューの項目を作成する要素

取り扱い	標準仕様
カテゴリー	なし
親にできる要素	`<ol>`、`<ul>`、`<menu>`
子にできる要素	フロー・コンテンツ
対応ブラウザ	caniuseで確認

<li>タグの解説

<li>は、リストやメニューの項目を表します。「li」とは、英語で「list item」の頭文字を取った略語です。この要素はリストやメニュー自体を表す親要素の子要素として配置できます。順序つきのリストの親要素は<ol>、順序なしのリストは<ul>、操作可能な機能の集合を表すメニューの場合は<menu>を用います。

リストの中で各項目は箇条書きとなり、先頭にマーカーが追加されます。マーカーの種類は親要素の既定値で表示されます。マーカーの種類を選択したい場合はCSS（スタイルシート）で変更して下さい。

<li>タグの特徴

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

<li>要素に指定できる属性

value: 順序つきのリストを表す<ol>の場合に、最初のマーカーの起点となる順序を整数で指定できます。通常１から順に始まる並びを途中から変えることができます。
type（非推奨）: リスト項目の先頭に置かれるマーカーを指定します。代わりにCSSのlist-style-typeプロパティを使用することが推奨されています。

disc：黒丸

circle：白丸

square：四角
グローバル属性: 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ: 全てのHTML要素に指定できるコンテンツ属性です。

<li>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。<li>要素は単体では配置できません。必ずリストやメニューを作成する<ol>、<ul>、<menu>の子要素として配置します。


<ol>
	<li>ol item</li>
	<li>ol item</li>
	<li>ol item</li>
</ol>

<ul>
	<li>ul item</li>
	<li>ul item</li>
	<li>ul item</li>
</ul>

<menu>
	<li>menu item</li>
	<li>menu item</li>
	<li>menu item</li>
</menu>

リスト項目のマーカーを変更する場合は、CSSのlist-style-typeプロパティを使います。特別なマーカーを表示させたい場合は、画像やアイコン・フォントを指定します。


<ul class="list-block">
	<li class="item1">item1</li>
	<li class="item2">item2</li>
	<li class="item3">item3</li>
</ul>


.list-block {
	padding-inline: 1.5rem 0;
	margin-block: 1rem 0;
}
.list-block .item1 {
	list-style-type: disc;
}
.list-block .item2 {
	list-style-type: circle;
}
.list-block .item3 {
	list-style-type: square;
}

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


<ol class="list-block">
	<li value="5">item</li>
	<li>item</li>
	<li>item</li>
</ol>

リスト項目の中に子要素を配置する

liはあらゆるフロー・コンテンツを子要素に配置できます。最も多く見られるパターンは、<a>要素のdisplayプロパティをblockにして、項目全体をリンクにしたリストです。


<ul class="list-block">
	<li><a href="/">リンクつきのリスト項目</a></li>
	<li><a href="/">リンクつきのリスト項目</a></li>
	<li><a href="/">リンクつきのリスト項目</a></li>
</ul>


.list-block {
	padding: 0;
	margin-block: 1rem 0;
	list-style-type: "";
}
.list-block a {
	display: block;
	padding: 0.5em;
	background-color:
		var(--hover-off, inherit)
		var(--hover-on, rgb(0 0 0 / 0.1));
}
@media (any-hover: hover) {
	:where(:any-link):hover {
		--hover-on: initial;
		--hover-off: ;
	}
}

リスト項目の中にリストを配置して入れ子にする

リスト項目の中にリストを配置すれば、多重構造のリストを作成できます。<ol>と<ul>を混合することも可能なので、順序なしの大カテゴリーの中に順序ありの小カテゴリーを並べることもできます。


<ul class="list-block">
	<li>大カテゴリー</li>
		<ol class="list-block">
			<li>小カテゴリー</li>
			<li>小カテゴリー</li>
			<li>小カテゴリー</li>
		</ol>
	</li>
	<li>大カテゴリー</li>
		<ol class="list-block">
			<li>小カテゴリー</li>
			<li>小カテゴリー</li>
			<li>小カテゴリー</li>
		</ol>
	</li>
	<li>大カテゴリー</li>
		<ol class="list-block">
			<li>小カテゴリー</li>
			<li>小カテゴリー</li>
			<li>小カテゴリー</li>
		</ol>
	</li>
</ul>


.list-block {
	padding-inline: 1.5rem 0;
	margin-block: 1rem;
}
.list-block .list-block li {
	padding-inline-start: 0.5rem;
	border-inline-start: 1px solid;
}