HTML Living Standard/li
li 要素
[編集]<li> 要素は、リスト項目（list item）を表すために使用されます。主に <ul>（順序なしリスト）または <ol>（順序ありリスト）要素内で使用され、リストの内容を定義します。
基本構造
[編集]以下は、<li> 要素の基本的な使用例です：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List Item Example</title> </head> <body> <ul> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ul> </body> </html>
この例では、<ul> 要素の中に3つの <li> 要素が含まれています。
使用できる親要素
[編集]<li> 要素は、以下の親要素内で使用されることを想定しています：
ただし、ほとんどの場合 <ul> または <ol> の中で使用されるのが一般的です。
属性
[編集]<li> 要素は以下の属性をサポートしています。
value 属性（順序付きリストのみ）
[編集]<ol> 要素内で使用する場合、value 属性を指定することで、リスト項目の番号を明示的に設定できます。
- 例：
<ol> <li value="10">第10項</li> <li>第11項</li> <li>第12項</li> </ol>
この例では、最初の項目が「10」として開始され、続く項目はそれに応じて順番が付けられます。
ネストされたリスト
[編集]<li> 要素内には、他のリスト要素（<ul> や <ol>）を含めることができます。これにより、ネストされたリストを作成できます。
- 例：
<ul> <li>果物 <ul> <li>りんご</li> <li>みかん</li> </ul> </li> <li>野菜 <ul> <li>にんじん</li> <li>キャベツ</li> </ul> </li> </ul>
アクセシビリティ
[編集]<li> 要素はリストの構造を正確に表現するため、スクリーンリーダーなどの支援技術で正しく解釈されます。リスト項目の内容がわかりやすいように記述してください。
CSSを使用したスタイリング
[編集]<li> 要素は通常、親要素（<ul> または <ol>）のスタイルに従いますが、独自のスタイルを適用することもできます。
- 例：
<ul> <li style="color: red;">りんご</li> <li style="color: orange;">みかん</li> <li style="color: yellow;">バナナ</li> </ul>
この例では、それぞれのリスト項目が異なる色で表示されます。
使用例
[編集]順序なしリスト
[編集]<ul> <li>サッカー</li> <li>野球</li> <li>バスケットボール</li> </ul>
順序付きリスト
[編集]<ol> <li>最初のステップ</li> <li>次のステップ</li> <li>最後のステップ</li> </ol>
value 属性の使用例
[編集]<ol> <li value="100">100点</li> <li>101点</li> <li>102点</li> </ol>
注意点
[編集]- 正しい親要素の使用:
- リストの意味を考慮:
- スタイリングの調整:
- 必要に応じて CSS で見た目を調整してください。
関連仕様
[編集]- [HTML Living Standard – The li element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element)