<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 |