<li>:リストやメニューの項目を作成する要素・HTMLタグの解説

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

<li>タグの解説

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

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

<li>タグの特徴

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

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

value
順序つきのリストを表す<ol>の場合に、最初のマーカーの起点となる順序を整数で指定できます。通常1から順に始まる並びを途中から変えることができます。
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;
}

<li>に関連するHTMLタグ

リストを作成する要素
<ul> 順序のないリストを作成する
<ol> 順序のあるリストを作成する
<dl> 定義リストを作成する
<dt> 定義リストの用語を指定する
<dd> 定義リストの説明文を記載する
<li> リストの項目を作成する
<menu> ユーザーが操作可能なメニューを提供する
<menuitem> コンテキストメニューの項目を作成する