CSS

The list-style-type property is a CSS property used to specify the style of markers (bullets or numbering) for list items.

list-style-type

About list-style-type

　list-style-typeプロパティは、リストの先頭に表示するマーカー文字の種類を指定する際に使用します。閲覧環境により、本来の仕様の通りに表示されない値もあるので注意してください。

　尚、list-style-typeと、list-style-imageの値を同時に指定した場合には、list-style-imageの値が優先されます。

　ul要素で入れ子にした場合、マーカーは list.3（３階層目）以降では同じマーカーとなるようです。

  1. list.1
    1. list.2
      1. list.3
        1. list.4
          1. list.5

　ちなみに、ol要素で入れ子にした場合は特に変化がないようです。

　次に、ul要素の入れ子（ネスト）で、１階層目のみに list-style-type: none; （マーカーを表示しない）を使ってみます。

HTML

<ul style="list-style-type: none;">
	<li>list.1
		<ul>
			<li>list.2
				<ul>
					<li>list.3</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

　当たり前かもしれませんが、１階層目のみのマーカーが表示されていません。

　下記「 list-style-type の概要」において、「値の継承をする」となっていましたので、試してみましたが、各階層ごとに list-style-type を指定するか、すべての ul 要素に対して指定する必要があるようです。

Overview of list-style-type

list-style-typeの概要。

書式
list-style-type: 値;
適用対象
li 要素
初期値
disc
値の継承
する
指定できる値
none
マーカーを表示しません。
disc
塗りつぶされた丸にします。
circle
塗りつぶされない丸にします。
square
黒い四角にします。
decimal
算用数字にします。
decimal-leading-zero
算用数字にします。ただし、1桁の数字の先頭には 0 がつけられます。
lower-roman
ローマ数字の小文字にします。
upper-roman
ローマ数字の大文字にします。
lower-greek
ギリシャ文字の小文字にします。
lower-latin
アルファベットの小文字にします。
lower-alpha
アルファベットの小文字にします。
upper-latin
アルファベットの大文字にします。
upper-alpha
アルファベットの大文字にします。
cjk-ideographic
漢数字にします。
hiragana
ひらがな（あ、い、う...）にします。
hiragana-iroha
ひらがな（い、ろ、は...）にします。
katakana
カタカナ（ア、イ、ウ...）にします。
katakana-iroha
カタカナ（イ、ロ、ハ...）にします。
hebrew
ヘブライ数字にします。
armenian
アルメニア数字にします。
georgian
グルジア数字にします。

使用例

マーカーを表示しない

　番号やマーカーを消したいときは list-style-type:none; を指定します。これは ol要素でも ul要素でも同じです。

CSS

ol { list-style-type: none; }

HTML

<ol>
	<li>none</li>
	<li>none</li>
	<li>none</li>
</ol>
  1. none
  2. none
  3. none

黒丸（初期値）

　ul要素の箇条書きではこの黒丸が初期値です。何も指定しなければこの黒丸になっていますが、他の値になっていて戻したい場合などに使用します。

　ちなみに、黒丸と呼んでいますが、丸の色は基本的に文字色と同じになります。

CSS

ul { list-style-type: disc; }

HTML

<ul>
	<li>disc</li>
	<li>disc</li>
	<li>disc</li>
</ul>

白丸

　中が塗られていない白丸にしたいときには circle を指定します。

CSS

ul { list-style-type: circle; }

HTML

<ul>
	<li>circle</li>
	<li>circle</li>
	<li>circle</li>
</ul>

黒四角

　square を指定すると、四角いマーカーになります。色は文字色と同じになります。

CSS

ul { list-style-type: square; }

HTML

<ul>
	<li>square</li>
	<li>square</li>
	<li>square</li>
</ul>

算用数字

　ol要素の箇条書きの初期値はこれです。

CSS

ol { list-style-type: decimal; }

HTML

<ol>
	<li>decimal</li>
	<li>decimal</li>
	<li>decimal</li>
</ol>
  1. decimal
  2. decimal
  3. decimal

先頭に0をつけた算用数字

　先頭に 0 を付けて二桁の数字の連番にすることができます。01、02、…10、11というように表示されます。

CSS

ol { list-style-type: decimal-leading-zero; }

HTML

<ol>
	<li>decimal-leading-zero</li>
	<li>decimal-leading-zero</li>
	<li>decimal-leading-zero</li>
</ol>
  1. decimal-leading-zero
  2. decimal-leading-zero
  3. decimal-leading-zero

小文字のローマ数字

　ol要素に対して lower-roman を指定するとローマ数字で ⅰ、ⅱ、ⅲ、ⅳ…と表示させることができます。

CSS

ol { list-style-type: lower-roman; }

HTML

<ol>
	<li>lower-roman</li>
	<li>lower-roman</li>
	<li>lower-roman</li>
</ol>
  1. lower-roman
  2. lower-roman
  3. lower-roman

大文字のローマ数字

　もし大文字のローマ数字にしたいときは upper-roman と指定します。

CSS

ol { list-style-type: upper-roman; }

HTML

<ol>
	<li>upper-roman</li>
	<li>upper-roman</li>
	<li>upper-roman</li>
</ol>
  1. upper-roman
  2. upper-roman
  3. upper-roman

小文字のギリシャ文字

　少しマニアックですがギリシャ文字をマーカーにする指定もあります。

CSS

ol { list-style-type: lower-greek; }

HTML

<ol>
	<li>lower-greek</li>
	<li>lower-greek</li>
	<li>lower-greek</li>
</ol>
  1. lower-greek
  2. lower-greek
  3. lower-greek

小文字のアルファベット

　数字ではなく a、b、c、d、e…というようにアルファベットをマーカーとして使いたいときは lower-latin または、lower-alpha を指定します。

CSS

.c1 { list-style-type: lower-latin; }
.c2 { list-style-type: lower-alpha; }

HTML

<ol class="c1">
	<li>lower-latin</li>
	<li>lower-latin</li>
	<li>lower-latin</li>
</ol>

<ol class="c2">
	<li>lower-alpha</li>
	<li>lower-alpha</li>
	<li>lower-alpha</li>
</ol>
  1. lower-latin
  2. lower-latin
  3. lower-latin
  1. lower-alpha
  2. lower-alpha
  3. lower-alpha

大文字のアルファベット

　A、B、C、D、E…というように大文字のアルファベットにしたいときは upper-latin または、upper-alpha を指定します。

CSS

.c1 { list-style-type: upper-latin; }
.c2 { list-style-type: upper-alpha; }

HTML

<ol class="c1">
	<li>upper-latin</li>
	<li>upper-latin</li>
	<li>upper-latin</li>
</ol>

<ol class="c2">
	<li>upper-alpha</li>
	<li>upper-alpha</li>
	<li>upper-alpha</li>
</ol>
  1. upper-latin
  2. upper-latin
  3. upper-latin
  1. upper-alpha
  2. upper-alpha
  3. upper-alpha

漢数字

　一、二、三、四…と漢数字の連番にするなんてこともできます。[cjk-ideographic , cjk-decimal ] (trad-chinese-informal (日常的な繁体字中国語の数値表記) と同じ表記になります。歴史的な理由で存在しています。)

CSS

.c1 { list-style-type: cjk-ideographic; }
.c2 { list-style-type: cjk-decimal; }

HTML

<ol class="c1">
	<li>cjk-ideographic</li>
	<li>cjk-ideographic</li>
	<li>cjk-ideographic</li>
</ol>

<ol class="c2">
	<li>cjk-decimal</li>
	<li>cjk-decimal</li>
	<li>cjk-decimal</li>
</ol>
  1. cjk-ideographic
  2. cjk-ideographic
  3. cjk-ideographic
  1. cjk-decimal
  2. cjk-decimal
  3. cjk-decimal

日本の公的な数値表記

　法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。

CSS

ol { list-style-type: japanese-formal; }

HTML

<ol>
	<li>japanese-formal</li>
	<li>japanese-formal</li>
	<li>japanese-formal</li>
</ol>
  1. japanese-formal
  2. japanese-formal
  3. japanese-formal

日本語の日常的な数値表記

　法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。

CSS

ol { list-style-type: japanese-informal; }

HTML

<ol>
	<li>japanese-informal</li>
	<li>japanese-informal</li>
	<li>japanese-informal</li>
</ol>
  1. japanese-informal
  2. japanese-informal
  3. japanese-informal

漢字の「十二支」順

　漢字の「十二支」順です。[cjk-earthly-branch, -moz-cjk-earthly-branch]

CSS

ol { list-style-type: cjk-earthly-branch; }

HTML

<ol>
	<li>cjk-earthly-branch</li>
	<li>cjk-earthly-branch</li>
	<li>cjk-earthly-branch</li>
</ol>
  1. cjk-earthly-branch
  2. cjk-earthly-branch
  3. cjk-earthly-branch

漢字の「十干」順

　漢字の「十干」順です。[cjk-heavenly-stem, -moz-cjk-heavenly-stem]

CSS

ol { list-style-type: cjk-heavenly-stem; }

HTML

<ol>
	<li>cjk-heavenly-stem</li>
	<li>cjk-heavenly-stem</li>
	<li>cjk-heavenly-stem</li>
</ol>
  1. cjk-heavenly-stem
  2. cjk-heavenly-stem
  3. cjk-heavenly-stem

ひらがなのあいうえお順

　ひらがなのあいうえお順で表示させるという便利なこともできます。これはけっこう使えそうですね。

CSS

ol { list-style-type: hiragana; }

HTML

<ol>
	<li>hiragana</li>
	<li>hiragana</li>
	<li>hiragana</li>
</ol>
  1. hiragana
  2. hiragana
  3. hiragana

ひらがなのいろは順

　ひらがなで「いろはにほへと」を使うこともできます。

CSS

ol { list-style-type: hiragana-iroha; }

HTML

<ol>
	<li>hiragana-iroha</li>
	<li>hiragana-iroha</li>
	<li>hiragana-iroha</li>
</ol>
  1. hiragana-iroha
  2. hiragana-iroha
  3. hiragana-iroha

カタカナのアイウエオ順

　カタカナを使うこともできます。list-style-type名は katakana とそのままなので覚えやすいですね。

CSS

ol { list-style-type: katakana; }

HTML

<ol>
	<li>katakana</li>
	<li>katakana</li>
	<li>katakana</li>
</ol>
  1. katakana
  2. katakana
  3. katakana

カタカナのイロハ順

　カタカナで「イロハニホヘト」を使うこともできます。

CSS

ol { list-style-type: katakana-iroha; }

HTML

<ol>
	<li>katakana-iroha</li>
	<li>katakana-iroha</li>
	<li>katakana-iroha</li>
</ol>
  1. katakana-iroha
  2. katakana-iroha
  3. katakana-iroha

ヘブライ数字

CSS

ol { list-style-type: hebrew; }

HTML

<ol>
	<li>hebrew</li>
	<li>hebrew</li>
	<li>hebrew</li>
</ol>
  1. hebrew
  2. hebrew
  3. hebrew

アルメニア数字

CSS

ol { list-style-type: armenian; }

HTML

<ol>
	<li>armenian</li>
	<li>armenian</li>
	<li>armenian</li>
</ol>
  1. armenian
  2. armenian
  3. armenian

アルメニア語の小文字の数値表記

　アルメニア語の小文字の数値表記です。

CSS

ol { list-style-type: lower-armenian; }

HTML

<ol>
	<li>lower-armenian</li>
	<li>lower-armenian</li>
	<li>lower-armenian</li>
</ol>
  1. lower-armenian
  2. lower-armenian
  3. lower-armenian

伝統的なアルメニア語の大文字の数値表記

　伝統的なアルメニア語の大文字の数値表記です。

CSS

ol { list-style-type: upper-armenian; }

HTML

<ol>
	<li>upper-armenian</li>
	<li>upper-armenian</li>
	<li>upper-armenian</li>
</ol>
  1. upper-armenian
  2. upper-armenian
  3. upper-armenian

ジョージア語の数値表記

　伝統的なジョージア語の数値表記です。

CSS

ol { list-style-type: georgian; }

HTML

<ol>
	<li>georgian</li>
	<li>georgian</li>
	<li>georgian</li>
</ol>
  1. georgian
  2. georgian
  3. georgian

アラビア－インド数字

　アラビア－インド数字です。[arabic-indic, -moz-arabic-indic]

CSS

ol { list-style-type: arabic-indic; }

HTML

<ol>
	<li>arabic-indic</li>
	<li>arabic-indic</li>
	<li>arabic-indic</li>
</ol>
  1. arabic-indic
  2. arabic-indic
  3. arabic-indic

ベンガル語の数値表記

　ベンガル語の数値表記です。[bengali, -moz-bengali]

CSS

ol { list-style-type: bengali; }

HTML

<ol>
	<li>bengali</li>
	<li>bengali</li>
	<li>bengali</li>
</ol>
  1. bengali
  2. bengali
  3. bengali

カンボジア語／クメール語の数値表記

　カンボジア語、クメール語の数値表記です。

CSS

.c1 { list-style-type: cambodian; }
.c2 { list-style-type: khmer; }

HTML

<ol class="c1">
	<li>cambodian</li>
	<li>cambodian</li>
	<li>cambodian</li>
</ol>

<ol class="c2">
	<li>khmer</li>
	<li>khmer</li>
	<li>khmer</li>
</ol>
  1. cambodian
  2. cambodian
  3. cambodian
  1. khmer
  2. khmer
  3. khmer

デーヴァナーガリーの数値表記

　デーヴァナーガリーの数値表記です。[devanagari, -moz-devanagari]

CSS

ol { list-style-type: devanagari; }

HTML

<ol>
	<li>devanagari</li>
	<li>devanagari</li>
	<li>devanagari</li>
</ol>
  1. devanagari
  2. devanagari
  3. devanagari

エチオピア語の数値表記

　エチオピア語の数値表記です。

CSS

ol { list-style-type: ethiopic-numeric; }

HTML

<ol>
	<li>ethiopic-numeric</li>
	<li>ethiopic-numeric</li>
	<li>ethiopic-numeric</li>
</ol>
  1. ethiopic-numeric
  2. ethiopic-numeric
  3. ethiopic-numeric

グジャラート語の数値表記

　グジャラート語の数値表記です。[gujarati, -moz-gujarati]

CSS

ol { list-style-type: gujarati; }

HTML

<ol>
	<li>gujarati</li>
	<li>gujarati</li>
	<li>gujarati</li>
</ol>
  1. gujarati
  2. gujarati
  3. gujarati

グルムキー語の数値表記

　グルムキー語の数値表記です。[gurmukhi, -moz-gurmukhi]

CSS

ol { list-style-type: gurmukhi; }

HTML

<ol>
	<li>gurmukhi</li>
	<li>gurmukhi</li>
	<li>gurmukhi</li>
</ol>
  1. gurmukhi
  2. gurmukhi
  3. gurmukhi

カンナダ語の数値表記

　カンナダ語の数値表記です。[kannada, -moz-kannada]

CSS

ol { list-style-type: kannada; }

HTML

<ol>
	<li>kannada</li>
	<li>kannada</li>
	<li>kannada</li>
</ol>
  1. kannada
  2. kannada
  3. kannada

韓国語のハングルの数値表記

　韓国語のハングルの数値表記です。

CSS

ol { list-style-type: korean-hangul-formal; }

HTML

<ol>
	<li>korean-hangul-formal</li>
	<li>korean-hangul-formal</li>
	<li>korean-hangul-formal</li>
</ol>
  1. korean-hangul-formal
  2. korean-hangul-formal
  3. korean-hangul-formal

韓国語の公的な漢数字

　韓国語の公的な漢数字です。

CSS

ol { list-style-type: korean-hanja-formal; }

HTML

<ol>
	<li>korean-hanja-formal</li>
	<li>korean-hanja-formal</li>
	<li>korean-hanja-formal</li>
</ol>
  1. korean-hanja-formal
  2. korean-hanja-formal
  3. korean-hanja-formal

韓国語の漢数字

　韓国語の漢数字です。

CSS

ol { list-style-type: korean-hanja-informal; }

HTML

<ol>
	<li>korean-hanja-informal</li>
	<li>korean-hanja-informal</li>
	<li>korean-hanja-informal</li>
</ol>
  1. korean-hanja-informal
  2. korean-hanja-informal
  3. korean-hanja-informal

ラオス語の数値表記

　ラオス語の数値表記です。[lao, -moz-lao]

CSS

ol { list-style-type: lao; }

HTML

<ol>
	<li>lao</li>
	<li>lao</li>
	<li>lao</li>
</ol>
  1. lao
  2. lao
  3. lao

マラヤーラム語の数値表記

　マラヤーラム語の数値表記です。[malayalam, -moz-malayalam]

CSS

ol { list-style-type: malayalam; }

HTML

<ol>
	<li>malayalam</li>
	<li>malayalam</li>
	<li>malayalam</li>
</ol>
  1. malayalam
  2. malayalam
  3. malayalam

モンゴル語の数値表記

　モンゴル語の数値表記です。

CSS

ol { list-style-type: mongolian; }

HTML

<ol>
	<li>mongolian</li>
	<li>mongolian</li>
	<li>mongolian</li>
</ol>
  1. mongolian
  2. mongolian
  3. mongolian

ミャンマー語（ビルマ語）の数値表記

　ミャンマー語（ビルマ語）の数値表記です。[myanmar, -moz-myanmar]

CSS

ol { list-style-type: myanmar; }

HTML

<ol>
	<li>myanmar</li>
	<li>myanmar</li>
	<li>myanmar</li>
</ol>
  1. myanmar
  2. myanmar
  3. myanmar

オリヤー語の数値表記

　オリヤー語の数値表記です。[oriya, -moz-oriya]

CSS

ol { list-style-type: oriya; }

HTML

<ol>
	<li>oriya</li>
	<li>oriya</li>
	<li>oriya</li>
</ol>
  1. oriya
  2. oriya
  3. oriya

ペルシャ語の数値表記

　ペルシャ語の数値表記です。[persian, -moz-persian]

CSS

ol { list-style-type: persian; }

HTML

<ol>
	<li>persian</li>
	<li>persian</li>
	<li>persian</li>
</ol>
  1. persian
  2. persian
  3. persian

公的な簡体字中国語の数値表記

　公的な簡体字中国語の数値表記です。

CSS

ol { list-style-type: simp-chinese-formal; }

HTML

<ol>
	<li>simp-chinese-formal</li>
	<li>simp-chinese-formal</li>
	<li>simp-chinese-formal</li>
</ol>
  1. simp-chinese-formal
  2. simp-chinese-formal
  3. simp-chinese-formal

日常的な簡体字中国語の数値表記

　日常的な簡体字中国語の数値表記です。

CSS

ol { list-style-type: simp-chinese-informal; }

HTML

<ol>
	<li>simp-chinese-informal</li>
	<li>simp-chinese-informal</li>
	<li>simp-chinese-informal</li>
</ol>
  1. simp-chinese-informal
  2. simp-chinese-informal
  3. simp-chinese-informal

公的な繁体字中国語の数値表記

　公的な繁体字中国語の数値表記です。

CSS

ol { list-style-type: trad-chinese-formal; }

HTML

<ol>
	<li>trad-chinese-formal</li>
	<li>trad-chinese-formal</li>
	<li>trad-chinese-formal</li>
</ol>
  1. trad-chinese-formal
  2. trad-chinese-formal
  3. trad-chinese-formal

日常的な繁体字中国語の数値表記

　日常的な繁体字中国語の数値表記です。

CSS

ol { list-style-type: trad-chinese-informal; }

HTML

<ol>
	<li>trad-chinese-informal</li>
	<li>trad-chinese-informal</li>
	<li>trad-chinese-informal</li>
</ol>
  1. trad-chinese-informal
  2. trad-chinese-informal
  3. trad-chinese-informal

タミル語の数値表記

　タミル語の数値表記です。[tamil, -moz-tamil]

CSS

ol { list-style-type: tamil; }

HTML

<ol>
	<li>tamil</li>
	<li>tamil</li>
	<li>tamil</li>
</ol>
  1. tamil
  2. tamil
  3. tamil

テルグ語の数値表記

　テルグ語の数値表記です。[telugu, -moz-telugu]

CSS

ol { list-style-type: telugu; }

HTML

<ol>
	<li>telugu</li>
	<li>telugu</li>
	<li>telugu</li>
</ol>
  1. telugu
  2. telugu
  3. telugu

タイ語の数値表記

　タイ語の数値表記です。[thai, -moz-thai]

CSS

ol { list-style-type: thai; }

HTML

<ol>
	<li>thai</li>
	<li>thai</li>
	<li>thai</li>
</ol>
  1. thai
  2. thai
  3. thai

チベット語の数値表記

　チベット語の数値表記です。

CSS

ol { list-style-type: tibetan; }

HTML

<ol>
	<li>tibetan</li>
	<li>tibetan</li>
	<li>tibetan</li>
</ol>
  1. tibetan
  2. tibetan
  3. tibetan