◀ 4.

HTML リスト (ul/ol/dl) 完全ガイド

▶
編集
この記事の要点
  • HTML のリスト要素は
      (順序なし)・
        (順序あり)・
        (定義リスト) の 3 種
      1. 項目は
          /
            の直下に
          1. 、
            の直下に
            +
          2. マーカー (・ や 1. 2. 3.) の見た目は HTML の type 属性ではなく CSS の list-style で制御するのが現代流
          3. ネストすると階層構造を表現できる。リストインリスト (li の中に ul) は OK
          4. Tailwind / Material UI などの CSS フレームワークはリストをデフォルトでリセットし、独自スタイルを当てる

3 種類のリスト要素

要素用途マーカー (既定)
    (Unordered List)
順序の無い箇条書き・(disc)
    (Ordered List)
順序が意味を持つ手順・ランキング1. 2. 3. (decimal)
(Description List)
用語と説明のペアなし

    順序なしリスト

    
  
  • りんご
    • 
  
  • みかん
    • 
  
  • バナナ
    •

順序が意味を持たない箇条書き全般に使います。買い物リスト・メニュー・ナビゲーションメニューなど。

    順序ありリスト

    
  
  1. ログイン画面を開く
    2. 
  
  2. ID とパスワードを入力
    3. 
  
  3. 「ログイン」ボタンをクリック
    4. 





    
  
  1. 5 番目から始まる
    2. 
  
  2. 6
    3. 





    
  
  1. 3 として表示
    2. 
  
  2. 2
    3. 
  
  3. 1
    4.

手順・ランキング・章番号など、順序が意味を持つケースで使います。start / reversed 属性で番号を制御できます。

定義リスト


  
HTML

  
HyperText Markup Language の略。Web ページの構造を記述する言語。


  
CSS

  
Cascading Style Sheets の略。HTML 文書の見た目を指定する言語。


  
JavaScript

  
Web ブラウザで動的な処理を実現するプログラミング言語。

用語集・FAQ・メタデータ (著者・公開日・カテゴリ) など「キーと値のペア」を意味的に表すときに使います。1 つの

に対し複数の
、また逆も可能です。

type 属性は廃止 → CSS で制御

古い HTML では

    や
      といったマーカー指定が可能でしたが、HTML5 では非推奨です。CSS の list-style-type を使います。

      /* マーカーの形状 */
ul.disc    { list-style-type: disc; }       /* ● */
ul.circle  { list-style-type: circle; }     /* ○ */
ul.square  { list-style-type: square; }     /* ■ */
ul.none    { list-style-type: none; }       /* なし */

ol.decimal       { list-style-type: decimal; }       /* 1.2.3. */
ol.lower-alpha   { list-style-type: lower-alpha; }   /* a.b.c. */
ol.upper-alpha   { list-style-type: upper-alpha; }   /* A.B.C. */
ol.lower-roman   { list-style-type: lower-roman; }   /* i.ii.iii. */
ol.upper-roman   { list-style-type: upper-roman; }   /* I.II.III. */
ol.cjk-ideographic { list-style-type: cjk-ideographic; } /* 一二三 */
ol.katakana      { list-style-type: katakana; }      /* ア.イ.ウ. */
ol.hiragana      { list-style-type: hiragana; }      /* あ.い.う. */

/* マーカー位置 */
ul.inside  { list-style-position: inside; }   /* 文字に重なる */
ul.outside { list-style-position: outside; }  /* 既定: 外側 */

/* 画像マーカー */
ul.custom {
  list-style-image: url('/img/bullet.png');
}

/* ショートハンド */
ul { list-style: square inside; }

      counter-reset / counter-increment でカスタム番号

      CSS カウンターを使うと、複雑な番号付け (1.1 / 1.2 / 1.2.1 のような節番号) も実現できます:

      ol.toc {
  counter-reset: section;
  list-style: none;
}
ol.toc > li {
  counter-increment: section;
}
ol.toc > li::before {
  content: counter(section) ". ";
  font-weight: bold;
}

ol.toc ol {
  counter-reset: subsection;
  list-style: none;
}
ol.toc ol > li {
  counter-increment: subsection;
}
ol.toc ol > li::before {
  content: counter(section) "." counter(subsection) " ";
}

      ネストしたリスト

        
  
      • フロントエンド
    
          
      
        • HTML
          • 
      
        • CSS
          • 
      
        • JavaScript
        
            
          
          • React
            • 
          
          • Vue
            • 
        
          
      
          • 
    
        
  
        • 
  
      • バックエンド
    
          
      
        • PHP
          • 
      
        • Python
          • 
    
        
  
        •

      ネストは

    1. の中に
2026-06-11 01:08:59 guest 220

人気ページ

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