タイトル: li要素
SEOタイトル: HTML li要素 完全ガイド（ul / ol との関係 / value属性 / ネスト / アクセシビリティ）
| この記事の要点 |
|
li 要素とは
li 要素 (list item) は HTML でリストの各項目を表す要素です。必ず親要素として ul (順序なしリスト) / ol (順序付きリスト) / menu のいずれかが必要で、単独では使えません。
基本構文
- りんご
- みかん
- ぶどう
- 朝起きる
- 顔を洗う
- 朝食を食べる
使える属性
| 属性 | 用途 | 備考 |
|---|---|---|
value | その項目の番号を指定 (ol内のみ) | 以降の番号もここから連番 |
| グローバル属性 | id / class / style など | 全要素共通 |
HTML4 にあった type 属性はHTML5 で廃止。番号スタイルは CSS の list-style-type で指定します。
value 属性で番号を任意指定
- 1番目
- 5番目（飛ばし）
- 6番目（連番継続）
- 7番目
歴史的に「3位は同点で2人いる」表現や、章を飛ばしてランキングを出したい場面で便利です。
ネストして階層リストを作る
- 果物
- りんご
- みかん
- 野菜
- きゃべつ
- レタス
ネストした ul / ol は必ず li の内側に置きます。ul の直下にさらに ul を置くのは仕様違反です。
CSS でマーカーをコントロール
/* マーカー種別を変更 */
ul { list-style-type: square; } /* 黒い四角 */
ul.circle { list-style-type: circle; } /* 白丸 */
ol.roman { list-style-type: upper-roman; } /* I, II, III */
ol.alpha { list-style-type: lower-alpha; } /* a, b, c */
/* マーカーを完全に消す（ナビメニュー作成時の定番） */
ul.nav {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav li {
display: inline-block;
margin-right: 1em;
}
/* マーカーを画像にする */
ul.icon {
list-style-image: url('check.png');
}
/* ::marker で色や書体を変える (モダンブラウザ) */
li::marker {
color: #e74c3c;
font-weight: bold;
}定番パターン: ナビゲーションメニュー
.navbar {
list-style: none;
display: flex;
gap: 1em;
padding: 0;
}
.navbar a {
text-decoration: none;
color: #333;
}セマンティックには「項目の集まり」なのでメニューはリストでマークアップするのが推奨されています。スクリーンリーダーが「3項目のリスト」と読み上げてくれます。
終了タグの省略
HTML5 では は次の や親要素の閉じタグの直前なら省略可能ですが、可読性とパース安定性のため明示するのが推奨です。
- 項目1
- 項目2
- 項目3
- 項目1
- 項目2
- 項目3
アクセシビリティ
- スクリーンリーダーは「リスト、3項目」のように項目数を読み上げるので、リストには必ず
ul/ol+liを使う list-style: noneを使う場合、Safari/VoiceOver ではリスト扱いされなくなるバグあり。role="list"を付けて回避できる- div の羅列より、適切なリストの方が SEO 的にも構造が明確
FAQ
Q: li の中に div や p を入れていい？
A: フローコンテンツなら何でも入れられる。div / p / img / さらに ul もOK。
Q: 番号を逆順 (3→2→1) にしたい
A: ol 側に reversed 属性を指定。
Q: 段落毎に番号付けたい (1-1, 1-2 のような)
A: ネストした ol + CSS カウンタ。counter-reset と counter-increment で階層番号を生成可能。
Q: 同じ番号付きリストを途中で中断して再開したい
A: 中断後の start="5" を指定するか、 で個別指定。
Q: li 直下に display: flex を当てたい
A: 可能。マーカーが消える場合は list-style-position: inside や ::marker 調整、もしくは擬似要素で代用する。
CSS カウンタで階層番号を作る
ol.chapter {
counter-reset: section;
list-style: none;
padding-left: 0;
}
ol.chapter > li {
counter-increment: section;
}
ol.chapter > li::before {
content: counters(section, ".") " ";
font-weight: bold;
margin-right: 0.5em;
}
/* ネストしたリストも同じパターンを継承 */
ol.chapter ol {
counter-reset: section;
list-style: none;
}
ol.chapter ol > li {
counter-increment: section;
}
ol.chapter ol > li::before {
content: counters(section, ".") " ";
margin-right: 0.5em;
}この CSS で 1., 1.1, 1.2, 2. のような階層番号がリストから自動生成できます。章番号付きの目次や仕様書スタイルの文書に重宝します。
関連プロパティ
| プロパティ | 用途 |
|---|---|
list-style-type | マーカー種別 (disc/circle/square/decimal/lower-alpha など) |
list-style-position | マーカー位置 (inside/outside) |
list-style-image | マーカーに画像を使う |
list-style | 上記の一括指定 |
::marker | マーカー自体に CSS を当てる |