＜li要素＞ - リストの項目

公開日: 2017/02/09

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

概要

名前

li (List item)

カテゴリー

なし。

配置できる場所

ol要素、ul要素、または、type属性がtoolbarのmenu要素。

コンテンツモデル

Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLLIElement

デフォルトのスタイル

li {
	display: list-item;
	text-align: -webkit-match-parent;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-li-element

属性

value

ol要素の子要素である場合にだけ指定可。数値を指定すると、その番号になる。後続するli要素にも影響がある。

デモを見る

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜li要素＞ - リストの項目</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/li/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<h1>リスト</h1>
<p>li要素は、リストの各項目をマークアップする要素です。</p>

<h2>ol要素</h2>
<ol>
	<li>福島県</li>
	<li>大分県</li>
	<li>沖縄県</li>
	<li>栃木県</li>
	<li>山梨県</li>
</ol>

<h2>ul要素</h2>
<ul>
	<li>福島県</li>
	<li>大分県</li>
	<li>沖縄県</li>
	<li>栃木県</li>
	<li>山梨県</li>
</ul>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/591/"> <meta charset="utf-8"> <title>【デモ】＜li要素＞ - リストの項目</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/li/"> </head> <body>

<h1>リスト</h1> <p>li要素は、リストの各項目をマークアップする要素です。</p> <h2>ol要素</h2> <ol> <li>福島県</li> <li>大分県</li> <li>沖縄県</li> <li>栃木県</li> <li>山梨県</li> </ol> <h2>ul要素</h2> <ul> <li>福島県</li> <li>大分県</li> <li>沖縄県</li> <li>栃木県</li> <li>山梨県</li> </ul>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>