HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<li>
リストアイテム（List Item）要素。リスト（<ul>, <ol>, <menu>）の個々の項目を定義します。
info
概要
<li> 要素（リストアイテム要素）は、**順序付きリスト** (<ol>)、**順序なしリスト** (<ul>)、または **メニューリスト** (<menu>) の中の個々の項目（アイテム）を表します。
リスト構造を意味的に定義するために不可欠な要素です。
play_circle
デモ (静的表示)
HTML (Source)
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
<ol>
<li value="3">3番目のタスク</li>
<li>4番目のタスク</li>
</ol>
Preview (Result)
- りんご
- バナナ
- オレンジ
- 3番目のタスク
- 4番目のタスク
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| value | 順序付きリスト (<ol>) のアイテムにのみ適用されます。この項目から始まるリストの連番を、指定した整数値に変更します。 **注意:** <ul> では無効です。
|
code
実用例
1. 順序なしリスト (Unordered List) の作成
<ul>
<li>コーヒー</li>
<li>紅茶</li>
<li>ミルク</li>
</ul>
2. 順序付きリスト (Ordered List) で途中から番号を指定
<!-- 1, 2, 3 の連番になる -->
<ol>
<li>ステップ1</li>
<li value="5">ステップ5 (番号をリセット)</li>
<li>ステップ6</li>
</ol>
3. リストアイテム内にブロック要素（リンクや段落）を配置
<ul>
<li>
<h3>主要サービス</h3>
<p>最新技術を用いたWeb開発を専門としています。</p>
<a href="/service">詳細はこちら</a>
</li>
</ul>
lightbulb
知っておくべき重要事項
assignment
適切な親要素
<li> 要素は、**必ず** <ul>, <ol>, または <menu> の子要素として使用しなければなりません。これらの要素の外部に単独で配置すると、HTMLのセマンティクス（意味構造）が崩壊します。
accessibility_new
アクセシビリティ
リストはスクリーンリーダーにとって重要なナビゲーション要素です。リスト構造を使用することで、ユーザーは項目数やリストの範囲を把握しやすくなります。マークアップはCSSで装飾するのではなく、常にセマンティックなリスト要素 (
リストはスクリーンリーダーにとって重要なナビゲーション要素です。リスト構造を使用することで、ユーザーは項目数やリストの範囲を把握しやすくなります。マークアップはCSSで装飾するのではなく、常にセマンティックなリスト要素 (
<ul> / <ol> と <li>) を使用してください。