次の手順を試す前に、HTMLでマルチレベルリストを作成するには、そのリストを別のリスト項目にネストする必要があることに注意してください。 また、HTMLには箇条書きリストまたは番号リストしかないため、リストの種類を変更する場合は、CSSを使用して新しいスタイルの種類を作成する必要があります。
HTMLの例
以下は、HTMLとHTMLタグで定義されたCSSスタイルを使用してHTMLでマルチレベルリストを作成する方法の例です。 この例では、2つのリスト項目があり、2番目のリスト項目には、a、bなどのリストスタイルを作成するための、アルファベット順の低いリストスタイルタイプの別の順序付きリストがあります。
- 最初
- 第二
- 秒のサブ
- 他の潜水艦
- 三番
- 第4
注：上の例では、グローバルCSS値に適応し、スペースとインデントを追加または削減する方法の例を示すために、いくつかの追加のパディングスタイルとマージンスタイルを使用しています。
出力例
- 最初
- 第二
- 秒のサブ
- 他の潜水艦
- 三番
- 第4
CSSとHTMLの例
上記の解決策は、マルチレベルリストを数回作成するだけでよい場合に最適です。 ただし、サイト全体に複数のマルチレベルリストを作成する場合は、次の例のように、CSSファイルにCSSコードを含めることをお勧めします。 この例では、 "roman"と "square"という2つのクラスを作成し、それらをHTMLコードで呼び出します。
CSSコード
.roman {list-style-type：lower-roman;}。square {list-style-type：square;}; マージン左：-2em;} HTMLコード
- 最初
- 第二
- 秒のサブ
- 他の潜水艦
- 三番
- 第4
出力例
- 最初
- 第二
- 秒のサブ
- 他の潜水艦
- 三番
- 第4
利用可能なCSSリストスタイルタイプの値
以下は、前に示した例の代わりに使用できる他のCSS list-style-type値のリストです。 各値の簡単な説明も含めました。
注：これらの値のすべてがすべてのブラウザで機能したり、同じように表示されるわけではありません。
disc - 小さな黒丸（上図）
circle - 小さな白丸（上図）
square - 黒い四角形
decimal - "1"で始まる10進数 （上に示しました）。
decimal-leading-zero - 0で始まる10進数（例：01、02、03など）。
lower-roman - "i"で始まる小文字のローマ数字。
upper-roman - "I."で始まる大文字のローマ数字。
lower-greek - ギリシャ文字の小文字。
小文字 - ラテン文字
大文字 - ラテン文字
アルメニア語 - 伝統的なアルメニア語の番号
ジョージアン - 伝統的なジョージ王朝の番号
lower-alpha - "a"で始まる小文字のアルファベット文字。 （上に示しました）。
upper-alpha - "A"で始まる大文字のアルファベット文字。
none - 何も表示しません。