◀ 3.

HTML li要素 完全ガイド（ul / ol との関係 / value属性 / ネスト / アクセシビリティ）

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

li 要素とは

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

基本構文



    
  
  • りんご
    • 
  
  • みかん
    • 
  
  • ぶどう
    • 





    
  
  1. 朝起きる
    2. 
  
  2. 顔を洗う
    3. 
  
  3. 朝食を食べる
    4.

使える属性

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

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

value 属性で番号を任意指定

    
  
  1. 1番目
    2. 
  
  2. 5番目（飛ばし）
    3. 
  
  3. 6番目（連番継続）
    4. 
  
  4. 7番目
    5.

歴史的に「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" を指定するか、
      1. で個別指定。

        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 を当てる
        編集
        Post Share
        子ページ

        子ページはありません

        同階層のページ
        1. ul要素
        2. ol要素
        3. li要素
        4. dl要素
        5. dt要素
        6. dd要素
    • 2026-06-11 05:39:14 guest 192

    人気ページ

    最近更新/作成されたページ