<li>: リストアイテム要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<li> は HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (<ol>)、順序なしリスト (<ul>)、メニュー (<menu>) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字を伴って表示されます。順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。
試してみましょう
<p>アポロ宇宙飛行士:</p>
<ul>
<li>Neil Armstrong</li>
<li>Alan Bean</li>
<li>Peter Conrad</li>
<li>Edgar Mitchell</li>
<li>Alan Shepard</li>
</ul>
p,
li {
font:
1rem "Fira Sans",
sans-serif;
}
p {
font-weight: bold;
}
属性
この要素にはグローバル属性があります。
value-
これは整数値の属性で、
<ol>要素で定義されたリストアイテムの序数値を示します。リストがローマ数字や文字で表示される場合であっても、この属性は数値のみが指定できます。続くリストアイテムは、その番号から続いて採番されます。この属性は順序なしリスト (<ul>) やメニュー (<menu>) では意味を持ちません。 type非推奨;-
文字の属性で、表示するリストマーカーの種類を指定します。
a: 小文字A: 大文字i: 小文字のローマ数字I: 大文字のローマ数字1: 数字
もし親の
<ol>要素で使用されていた場合は、それよりも優先されます。メモ: この属性は非推奨になっています。代わりに CSS の
list-style-typeプロパティを使用してください。
例
番号付きリスト
html
<ol>
<li>最初のアイテム</li>
<li>2 番目のアイテム</li>
<li>3 番目のアイテム</li>
</ol>
結果
カスタム値の付いた番号付きリスト
html
<ol type="I">
<li value="3">3 番目のアイテム</li>
<li>4 番目のアイテム</li>
<li>5 番目のアイテム</li>
</ol>
結果
順序なしリスト
html
<ul>
<li>最初のアイテム</li>
<li>2 番目のアイテム</li>
<li>3 番目のアイテム</li>
</ul>
結果
技術的概要
| コンテンツカテゴリー | なし |
|---|---|
| 許可されている内容 | フローコンテンツ |
| タグの省略 |
直後に別の <li> 要素が続く場合、または他のアイテムが続くことなく親要素が閉じられた場合は、終了タグが省略可能です。
|
| 許可されている親要素 |
<ul>、<ol>、<menu>。すでに廃止されていますが、<dir> の子要素としても配置可能でした。
|
| 暗黙の ARIA ロール |
listitem
（ol, ul,
menu の子要素の場合）
|
| 許可されている ARIA ロール |
menuitem,
menuitemcheckbox,
menuitemradio, option,
none, presentation,
radio, separator,
tab, treeitem
|
| DOM インターフェイス | HTMLLIElement |
仕様書
| Specification |
|---|
| HTML # the-li-element |
ブラウザーの互換性
Loading…