この記事の要点

li 要素はリスト項目 (list item) を表す。必ず ul / ol / menu の子要素として配置 番号付きリスト (ol) の中では value 属性で番号を任意指定できる 終了タグ </li> は HTML5 では省略可能だが、可読性のため明示推奨 ネスト OK — li の中に別の ul / ol を入れて階層リストを作る マーカー（•・数字）は list-style-type CSS で変更、list-style: none でナビメニュー化

li 要素とは

li 要素 (list item) は HTML でリストの各項目を表す要素です。必ず親要素として ul (順序なしリスト) / ol (順序付きリスト) / menu のいずれかが必要で、単独では使えません。

基本構文

<!-- 順序なしリスト (Unordered List) -->
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

<!-- 順序付きリスト (Ordered List) -->
<ol>
  <li>朝起きる</li>
  <li>顔を洗う</li>
  <li>朝食を食べる</li>
</ol>

使える属性

属性	用途	備考
value	その項目の番号を指定 (ol内のみ)	以降の番号もここから連番
グローバル属性	id / class / style など	全要素共通

HTML4 にあった type 属性はHTML5 で廃止。番号スタイルは CSS の list-style-type で指定します。

value 属性で番号を任意指定

<ol>
  <li>1番目</li>
  <li value="5">5番目（飛ばし）</li>
  <li>6番目（連番継続）</li>
  <li>7番目</li>
</ol>

歴史的に「3位は同点で2人いる」表現や、章を飛ばしてランキングを出したい場面で便利です。

ネストして階層リストを作る

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>みかん</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>きゃべつ</li>
      <li>レタス</li>
    </ul>
  </li>
</ul>

ネストした 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;
}

定番パターン: ナビゲーションメニュー

<nav>
  <ul class="navbar">
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社情報</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

.navbar {
    list-style: none;
    display: flex;
    gap: 1em;
    padding: 0;
}
.navbar a {
    text-decoration: none;
    color: #333;
}

セマンティックには「項目の集まり」なのでメニューはリストでマークアップするのが推奨されています。スクリーンリーダーが「3項目のリスト」と読み上げてくれます。

終了タグの省略

HTML5 では </li> は次の <li> や親要素の閉じタグの直前なら省略可能ですが、可読性とパース安定性のため明示するのが推奨です。

<!-- 仕様上 OK だが推奨されない -->
<ul>
  <li>項目1
  <li>項目2
  <li>項目3
</ul>

<!-- 推奨 -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

アクセシビリティ

• スクリーンリーダーは「リスト、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 属性を指定。<ol reversed> で降順番号になる。

Q: 段落毎に番号付けたい (1-1, 1-2 のような)
A: ネストした ol + CSS カウンタ。counter-reset と counter-increment で階層番号を生成可能。

Q: 同じ番号付きリストを途中で中断して再開したい
A: 中断後の <ol> に start="5" を指定するか、<li value="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 を当てる