リスト（箇条書き）

■ リスト（箇条書き）

■ リスト（箇条書き）について

【メニュー項目】　次の各項目についての解説を参照してください。

リスト（箇条書き）の種類
番号なしリスト（箇条書き）を書くには
番号付きリスト（箇条書き）を書くには
定義リストを書くには
番号なしリストのマーカーを変更するには
画像をリストマーカーにするには
番号付きリストのマーカー書式を変更するには（HTML）
番号付きリストのマーカー書式を変更するには　（CSS）
リスト項目の中にリストを入れる（入れ子にする）には
番号付きリストで指定した番号から開始するには
逆順の番号付きリストを表示するには
リストの前後左右や項目間のスペースを調整するには
番号付きリストのマーカー書式を任意に変更するには

■ リスト（箇条書き）の種類

通常の文書でもWebページでも、リスト（箇条書き） は、読みやすく、見やすくするのに有効です。

HTMLのリストには、大きく分けて、<ul>要素、<ol>要素、<dt>要素のそれぞれにより作成する、つぎの３種類があります。

番号なしリスト
番号付きリスト
定義リスト

つまり、汎用の 番号なしリスト と 番号付きリスト の他に、特定の用途をもつ 定義リスト があります。　これらの 使い方の要点 を以下にまとめておきます。

番号なしリスト

HTMLソース　（<body> ～ </body> の間）
番号なしリスト <ul> <li>りんご <li>すいか <li>ぶどう </ul>

ブラウザー表示例
番号なしリストりんごすいかぶどう

番号付きリスト

HTMLソース　（<body> ～ </body> の間）
番号付きリスト <ol> <li>みかん <li>いちご <li>メロン </ol>

ブラウザー表示例
番号付きリストみかんいちごメロン

定義リスト

HTMLソース　（<body> ～ </body> の間）
定義リスト <dl> <dt>HTML</dt> <dd>自由に飛び回りながら参照できる形式の文書</dd> <dt>タグ</dt> <dd><p>や<a> のように "<"と">" で囲まれた表記</dd> <dt>要素</dt> <dd>タグを用いて記述された HTML文書の構成単位</dd> <dt>属性</dt> <dd>要素の機能、内容、名前、処理対象などを指定</dd> </dl>

HTMLソース　（<body> ～ </body> の間）

定義リスト
<dl>
  <dt>HTML</dt>
    <dd>自由に飛び回りながら
        参照できる形式の文書</dd>
  <dt>タグ</dt>
    <dd>&lt;p&gt;や&lt;a&gt; のように
        &quot;&lt;&quot;と&quot;&gt;&quot;
        で囲まれた表記</dd>
  <dt>要素</dt>
    <dd>タグを用いて記述された
        HTML文書の構成単位</dd>
  <dt>属性</dt>
    <dd>要素の機能、内容、名前、
        処理対象などを指定</dd>
</dl>

ブラウザー表示例
定義リスト HTML 自由に飛び回りながら参照できる形式の文書タグ <p> や <a> のように "<" と ">" で囲まれた表記要素タグを用いて記述された HTML文書の構成単位属性要素の機能、内容、名前、処理対象などを指定

なお、定義リスト はその名前のとおり 「用語とその定義」をまとめるためのもの で、その他のレイアウト用途に使用することは 非推奨 となっています。

また、リストの種類と組合せを問わず、リストの中にリストを含める、いわゆる、入れ子（ネスト）が可能です。　このネストの階層数にとくに制限はありません。

番号なしリスト，番号付きリスト，定義リスト の詳細については、それぞれ、<ul>要素、<ol>要素、<dt>要素の解説ページを参照してください。

■ リスト項目の中にリストを入れる（入れ子にする）には

<ul>要素と <ol>要素による 番号なしリスト と 番号付きリスト は任意に組み合わせて、リストの中にリストを含める、いわゆる、入れ子（ネスト）が可能です。　このネストの階層数にとくに制限はありません。

たとえば、入れ子を含んだリスト：

HTMLソース
HTML <body> ～ </body>	<ol> <li>フォント <ol> <li>サイズ <li>カラー <li>種類 </ol> <li>テーブル <ol> <li>背景色 <li>背景画像 <li>境界線 <ol> <li>スタイル <li>線幅 <li>カラー </ol> </ol> </ol>

HTMLソース

HTML
<body> ～ </body>

<ol>
   <li>フォント
    <ol>
      <li>サイズ
      <li>カラー
      <li>種類
    </ol>
   <li>テーブル
    <ol>
      <li>背景色
      <li>背景画像
      <li>境界線
      <ol>
        <li>スタイル
        <li>線幅
        <li>カラー
      </ol>
    </ol>
</ol>

を <body> ～ </body> 間に記入してみましょう。　ブラウザーで表示すると、

ブラウザー表示例
フォントサイズカラー種類テーブル背景色背景画像境界線スタイル線幅カラー

のようになります。

■ リストの前後左右や項目間のスペースを調整するには

基本的な書式は、

   ol.クラス名 { 
      margin: 上余白 右余白 下余白 左余白; 
      line-height: 行の高さ; 
   }
   ol.クラス名 > li {
      position: relative; 
      top: 0; left: 左端オフセット !important;
      text-indent: 文字列インデント !important;
    }

という形式です。　ここで、

文字列インデントでは、<li>要素の場合、マーカーを除いた長方形領域が要素の占める範囲 となることに注意が必要です（以下の例を参照）。　つまり、通常の段落では負の値でぶら下がりインデントを指定しますが、<li>要素では、"0" としたときに、マーカーを含めた範囲が ぶら下がりインデント の表示になります。

左余白と左端オフセットは、リスト項目の表示開始位置（左端）を決めます。　左端オフセットは、<ol>要素の左端位置からのリスト項目の <li>要素（マーカーも含む）の先頭とのオフセット（相対値）です。　この値で、リスト項目を表示する際の 直前の段落からのインデント幅 が決まります。　

なお、<li>要素の leftプロパティによる左端オフセットは負の値も指定できますが、<ol>要素の marginプロパティ（margin-leftプロパティ）による左余白は正の値しか指定できません。

なお、ここではクラスセレクタで示していますが、型セレクタや IDセレクタの場合も同様です。

たとえば、CSS の設定を、<head>～</head> 間に、

HTMLソース（CSS）
CSS <head> ～ </head>	<style type="text/css"> <!-- ol.sample1, ol.sample4, ol.sample5 { margin: 0.5em 0; } ol.sample2 { margin: 0.5em 0 0.5em 1em;} ol.sample3 { margin: 0.5em 0 0.5em 2em;} ol.sample1 > li, ol.sample2 > li, ol.sample3 > li { position: relative; top: 0; left: 0em !important; text-indent: 0em !important; } ol.sample4 > li { position: relative; top: 0; left: 1em !important; text-indent: 1em !important; } ol.sample5 > li { position: relative; top: 0; left: 2em !important; text-indent: 1em !important; } --> </style>

HTMLソース（CSS）

CSS
<head> ～ </head>

<style type="text/css">
<!--
   ol.sample1, ol.sample4, ol.sample5 { margin: 0.5em 0; }
   ol.sample2 { margin: 0.5em 0 0.5em 1em;}
   ol.sample3 { margin: 0.5em 0 0.5em 2em;}

   ol.sample1 > li, ol.sample2 > li, ol.sample3 > li {
      position: relative; 
      top: 0; left: 0em !important; 
      text-indent: 0em !important;
   }
   ol.sample4 > li {
      position: relative; 
      top: 0; left: 1em !important; 
      text-indent: 1em !important;
   }
   ol.sample5 > li {
      position: relative; 
      top: 0; left: 2em !important; 
      text-indent: 1em !important;
   }
-->
</style>

のように書いて、　

HTMLソース
HTML <body> ～ </body>	<ol class="sample1"> <li>リスト項目１ <li>リスト項目２ <li>リスト項目３ </ol> <ol class="sample2"> <li>リスト項目１ <li>リスト項目２ <li>リスト項目３ </ol> <ol class="sample3"> <li>リスト項目１ <li>リスト項目２ <li>リスト項目３ </ol> <ol class="sample4"> <li>リスト項目１ <li>リスト項目２ <li>リスト項目３ </ol> <ol class="sample5"> <li>リスト項目１ <li>リスト項目２ <li>リスト項目３ </ol>

HTMLソース

HTML
<body> ～ </body>

<ol class="sample1">
   <li>リスト項目１
   <li>リスト項目２
   <li>リスト項目３
</ol>
<ol class="sample2">
   <li>リスト項目１
   <li>リスト項目２
   <li>リスト項目３
</ol>
<ol class="sample3">
   <li>リスト項目１
   <li>リスト項目２
   <li>リスト項目３
</ol>
<ol class="sample4">
   <li>リスト項目１
   <li>リスト項目２
   <li>リスト項目３
</ol>
<ol class="sample5">
   <li>リスト項目１
   <li>リスト項目２
   <li>リスト項目３
</ol>

を <body> ～ </body> 間に記入してみましょう。　ブラウザーで表示する（配置状態をわかり易くするために、<ol>要素と最初の <li>要素の境界線を表示するようにしてあります）と、

ブラウザー表示例
ol { margin-left:0em;} li { left:0em; text-indent: 0em; } リスト項目１リスト項目２リスト項目３ ol { margin-left:1em;} li { left:0em; text-indent: 0em; } リスト項目１リスト項目２リスト項目３ ol { margin-left:2em;} li { left:0em; text-indent: 0em; } リスト項目１リスト項目２リスト項目３ ol { margin-left:0em;} li { left:1em; text-indent: 1em; } リスト項目１リスト項目２リスト項目３ ol { margin-left:0em;} li { left:2em; text-indent: 1em; } リスト項目１リスト項目２リスト項目３

ブラウザー表示例

ol { margin-left:0em;} li { left:0em; text-indent: 0em; }

リスト項目１
リスト項目２
リスト項目３

ol { margin-left:1em;} li { left:0em; text-indent: 0em; }

リスト項目１
リスト項目２
リスト項目３

ol { margin-left:2em;} li { left:0em; text-indent: 0em; }

リスト項目１
リスト項目２
リスト項目３

ol { margin-left:0em;} li { left:1em; text-indent: 1em; }

リスト項目１
リスト項目２
リスト項目３

ol { margin-left:0em;} li { left:2em; text-indent: 1em; }

リスト項目１
リスト項目２
リスト項目３

のようになります。

■ 番号付きリストのマーカー書式を任意に変更するには

W3C の｢CSS Lists and Counters Module Level 3｣ワーキンググループの 2014年3月20日付草稿の｢6 Markers: The '::marker' pseudo-element（'::marker'擬似要素）｣には、<li>要素に、この新規導入の擬似要素を使用したリスト・マーカーの自在な記入方法と例が示されています。　これが使用できれば、以下に示す方法より簡単にマーカー書式を任意に変更できます。　しかし、大変残念なことに、現状では、まだ対応しているブラウザーは見つかりません。（サンプルを表示して見てください。）　また、W3C の｢Selectors Level 3｣ワーキンググループの 2011年9月29日付勧告、および、2015年1月15日に公開されたW3C の｢CSS Pseudo-Elements Module Level 4｣ワーキンググループの最初の草稿には、ともに '::marker' pseudo-element（'::marker'擬似要素）の記載はありませんので、最終的に採用されるかどうかは不明です。

CSS の解説の擬似要素～子供結合子（子供セレクタ）のところには、これらのセレクタの使用例として、数字に "( )" や "[ ]" を付けたマーカーを表示する番号付きリストが示されています。　ここでは、さらに手を入れて、リスト項目の表示位置やぶら下がりインデントなども通常の <ol>要素と同様のスタイルとなり、かつ、これら２つと通常の番号付きリストを組み合わせて任意の複数回の入れ子を行っても整然と表示できるものを紹介します。

まず、番号付きリストのマーカー書式の例として、(1)，(2)，(3)，... のような "( )" 付きのリストマーカーを表示する方法について書きます。　CSS の設定を、あらかじめ <head>～</head> 間に、

HTMLソース（CSS）
CSS <head> ～ </head>	<style type="text/css"> <!-- ol.parenth0 { margin: 0.5em 0; } ol.parenth1 { margin: 0.5em 0 0.5em 1em;} ol.parenth0, ol.parenth1 { counter-reset: itemp; } ol.parenth0 * li, ol.parenth1 * li { position: relative; top: 0; left: -1em; text-indent: 0em; } ol.parenth0 > li, ol.parenth1 > li { display: block; position: relative; top: 0; left: -1em !important; text-indent: -1.45em !important; } ol.parenth0 > li::before, ol.parenth1 > li::before { content:"(" counter(itemp) ") "; counter-increment: itemp; } --> </style>

HTMLソース（CSS）

CSS
<head> ～ </head>

<style type="text/css">
<!--
   ol.parenth0 { margin: 0.5em 0; }
   ol.parenth1 { margin: 0.5em 0 0.5em 1em;}
   ol.parenth0, ol.parenth1 { 
      counter-reset: itemp; 
   }
   ol.parenth0 * li, ol.parenth1 * li {
      position: relative; 
      top: 0; left: -1em; 
      text-indent: 0em;
   }
   ol.parenth0 > li, ol.parenth1 > li {
      display: block; position: relative; 
      top: 0; left: -1em !important; 
      text-indent: -1.45em !important;
   }
   ol.parenth0 > li::before, ol.parenth1 > li::before { 
      content:"(" counter(itemp) ") "; 
      counter-increment: itemp; 
   }
-->
</style>

のように書き込んでおきます。　これで、 "( )" 付きの番号がリストマーカーとして表示される２つの番号付きリストのクラス： parenth0 と parenth1 が使えるようになります。　そこで、たとえば、

HTMLソース
HTML <body> ～ </body>	<p><b>parenth1</b>クラス番号付きリスト表示テスト：</p> <ol class="parenth1"> <li>表示テスト（１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ <li>表示テスト（２項目目） <li>表示テスト（３項目目） </ol>

HTMLソース

HTML
<body> ～ </body>

<p><b>parenth1</b>クラス 番号付きリスト 表示テスト：</p>
<ol class="parenth1">
   <li>表示テスト（１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳ
       ＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷ
       ＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
   <li>表示テスト（２項目目）
   <li>表示テスト（３項目目）
</ol>

と <body> ～ </body> 間に記入すると、

ブラウザー表示例
parenth1クラス番号付きリスト表示テスト：表示テスト（１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ表示テスト（２項目目）表示テスト（３項目目）

ブラウザー表示例

parenth1クラス番号付きリスト表示テスト：

表示テスト（１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
表示テスト（２項目目）
表示テスト（３項目目）

のような "( )" 付き番号をもつリストが表示できます。

では、もう一方の parenth0クラスがなぜあるのかといいますと、既定の <ol>要素による番号付きリストに parenth1クラスのものを入れ子にした場合、たとえば、

HTMLソース
HTML <body> ～ </body>	<b>parenth1</b>クラス番号付きリスト表示テスト：</p> <ol> <li>表示テスト（１項目目） <ol class="parenth1"> <li>表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ <li>表示テスト（１－２項目目） <li>表示テスト（１－３項目目） </ol> <li>表示テスト（２項目目） <ol class="parenth1"> <li>表示テスト（２－１項目目） <li>表示テスト（２－２項目目） </ol> </ol>

HTMLソース

HTML
<body> ～ </body>

<b>parenth1</b>クラス 番号付きリスト 表示テスト：</p>
<ol>
   <li>表示テスト（１項目目）
     <ol class="parenth1">
        <li>表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳ
       ＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷ
       ＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
        <li>表示テスト（１－２項目目）
        <li>表示テスト（１－３項目目）
     </ol>
   <li>表示テスト（２項目目）
     <ol class="parenth1">
        <li>表示テスト（２－１項目目）
        <li>表示テスト（２－２項目目）
     </ol>
</ol>

を <body> ～ </body> 間に記入すると、

ブラウザー表示例
parenth1クラス番号付きリスト表示テスト：表示テスト（１項目目）表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ表示テスト（１－２項目目）表示テスト（１－３項目目）表示テスト（２項目目）表示テスト（２－１項目目）表示テスト（２－２項目目）

ブラウザー表示例

parenth1クラス番号付きリスト表示テスト：

表示テスト（１項目目）
1. 表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
2. 表示テスト（１－２項目目）
3. 表示テスト（１－３項目目）
表示テスト（２項目目）
1. 表示テスト（２－１項目目）
2. 表示テスト（２－２項目目）

のような表示となり、parenth1クラスでは、内側のリストのインデントがやや大きすぎるからです。

実際、parenth0クラスのものに置き換えて、

HTMLソース
HTML <body> ～ </body>	<b>parenth0</b>クラス番号付きリスト表示テスト：</p> <ol> <li>表示テスト（１項目目） <ol class="parenth0"> <li>表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ <li>表示テスト（１－２項目目） <li>表示テスト（１－３項目目） </ol> <li>表示テスト（２項目目） <ol class="parenth0"> <li>表示テスト（２－１項目目） <li>表示テスト（２－２項目目） </ol> </ol>

HTMLソース

HTML
<body> ～ </body>

<b>parenth0</b>クラス 番号付きリスト 表示テスト：</p>
<ol>
   <li>表示テスト（１項目目）
     <ol class="parenth0">
        <li>表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳ
       ＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷ
       ＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
        <li>表示テスト（１－２項目目）
        <li>表示テスト（１－３項目目）
     </ol>
   <li>表示テスト（２項目目）
     <ol class="parenth0">
        <li>表示テスト（２－１項目目）
        <li>表示テスト（２－２項目目）
     </ol>
</ol>

と <body> ～ </body> 間に記入すると、

ブラウザー表示例
parenth0クラス番号付きリスト表示テスト：表示テスト（１項目目）表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ表示テスト（１－２項目目）表示テスト（１－３項目目）表示テスト（２項目目）表示テスト（２－１項目目）表示テスト（２－２項目目）

ブラウザー表示例

parenth0クラス番号付きリスト表示テスト：

表示テスト（１項目目）
1. 表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
2. 表示テスト（１－２項目目）
3. 表示テスト（１－３項目目）
表示テスト（２項目目）
1. 表示テスト（２－１項目目）
2. 表示テスト（２－２項目目）

のような適切なインデントサイズの表示となります。

つまり、parenth0 クラスは入れ子になって含まれた下位リストの場合に使用 します。

上と同様にして、[1]，[2]，[3]，... のような "[ ]" 付きのリストマーカーを表示することも、当然可能です。　先の、 "( )" 付きのものの指定に加えて "[ ]" 付きのものを、 <head>～</head> 間に、

HTMLソース（CSS）
CSS <head> ～ </head>	<style type="text/css"> <!-- ol.bracket0 { margin: 0.5em 0;} ol.bracket1 { margin: 0.5em 0 0.5em 1em; } ol.bracket0, ol.bracket1 { counter-reset: itemb; } ol.bracket0 * li, ol.bracket1 * li { position: relative; top: 0; left: -1em; text-indent: 0em; } ol.bracket0 > li, ol.bracket1 > li { display: block; position: relative; top: 0; left: -1em !important; text-indent: -1.45em !important; } ol.bracket0 > li::before, ol.bracket1 > li::before { content:"[" counter(itemb) "] "; counter-increment: itemb; } --> </style>

HTMLソース（CSS）

CSS
<head> ～ </head>

<style type="text/css">
<!--
   ol.bracket0 { margin: 0.5em 0;}
   ol.bracket1 { margin: 0.5em 0 0.5em 1em; }
   ol.bracket0, ol.bracket1 { 
      counter-reset: itemb;
   }
   ol.bracket0 * li, ol.bracket1 * li {
      position: relative;
      top: 0; left: -1em;
      text-indent: 0em;
   }
   ol.bracket0 > li, ol.bracket1 > li { 
      display: block; position: relative;
      top: 0; left: -1em !important;
      text-indent: -1.45em !important;
   }
   ol.bracket0 > li::before, ol.bracket1 > li::before {
      content:"[" counter(itemb) "] ";
      counter-increment: itemb; 
   }
-->
</style>

のように追加しておきましょう。　そして、これら "( )" 付きのもの、"[ ]" 付きのもの、通常のものを組み合わせて、複雑な入れ子状態のリスト：

HTMLソース
HTML <body> ～ </body>	<ol class="bracket1"> <li>表示テスト（１項目目） <ol class="parenth0"> <li>表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ <li>表示テスト（１－２項目目） <li>表示テスト（１－３項目目） </ol> <li>表示テスト（２項目目） <ol class="parenth0"> <li>表示テスト（２－１項目目） <li>表示テスト（２－２項目目） <ol> <li>表示テスト（２－２－１項目目） <li>表示テスト（２－２－２項目目） <li>表示テスト（２－２－３項目目） </ol> <li>表示テスト（２－３項目目） </ol> </ol>

HTMLソース

HTML
<body> ～ </body>

<ol class="bracket1">
   <li>表示テスト（１項目目）
    <ol class="parenth0">
      <li>表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱ
       ＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶ
       ＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
      <li>表示テスト（１－２項目目）
      <li>表示テスト（１－３項目目）
    </ol>
   <li>表示テスト（２項目目）
    <ol class="parenth0">
      <li>表示テスト（２－１項目目）
      <li>表示テスト（２－２項目目）
      <ol>
        <li>表示テスト（２－２－１項目目）
        <li>表示テスト（２－２－２項目目）
        <li>表示テスト（２－２－３項目目）
      </ol>
      <li>表示テスト（２－３項目目）
    </ol>
</ol>

を <body> ～ </body> 間に記入してみましょう。　この場合でも、ブラウザーの表示は、

ブラウザー表示例
番号付きリスト表示テスト：表示テスト（１項目目）表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ表示テスト（１－２項目目）表示テスト（１－３項目目）表示テスト（２項目目）表示テスト（２－１項目目）表示テスト（２－２項目目）表示テスト（２－２－１項目目）表示テスト（２－２－２項目目）表示テスト（２－２－３項目目）表示テスト（２－３項目目）

ブラウザー表示例

番号付きリスト表示テスト：

表示テスト（１項目目）
1. 表示テスト（１－１項目目）ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＱＸＹＺ
2. 表示テスト（１－２項目目）
3. 表示テスト（１－３項目目）
表示テスト（２項目目）
1. 表示テスト（２－１項目目）
2. 表示テスト（２－２項目目）
  1. 表示テスト（２－２－１項目目）
  2. 表示テスト（２－２－２項目目）
  3. 表示テスト（２－２－３項目目）
3. 表示テスト（２－３項目目）

のようになり、インデントがきれいに揃った表示ができます。

なお、別項に示したとおり、インデントの大きさは、上のCSSの指定で、<ol>要素に対する margin-leftプロパティと <li>要素に対する text-indentプロパティの値を調節することにより、変更することができます。

【参考ページ】

W3C の｢CSS Lists and Counters Module Level 3｣ワーキンググループの 2014年3月20日付草稿
W3C の｢CSS Lists and Counters Module Level 3｣ワーキンググループの｢6 Markers: The '::marker' pseudo-element（'::marker'擬似要素）｣のセクション
W3C の｢Selectors Level 3｣ワーキンググループの 2011年9月29日付勧告
W3C の｢CSS Pseudo-Elements Module Level 4｣ワーキンググループの 2015年1月15日付草稿
CSS4.biz まじめなCSS4情報発信サイトの「CSS Pseudo-Elements Module Level 4の草案が公開になりました。」のページ