list-style-type
リストマークの指定

unknown

list-style-typeプロパティは、リストマークの種類を指定します。

• デフォルト値：disc
• 適用：display:list-itemが指定されている全要素
• 継承：する

値

ブラウザによってサポートされていないリストマークがあります。 Firefoxは順序ありリスト（ol要素）のキーワードに全て対応していますが、IEは「decimal」、「decimal-leading-zero」、「lower-roman」、「upper-roman」の4種類しか対応していません。

ul要素（順序なしリスト）のキーワード

値	説明
disc	●（デフォルト値）
circle	○
square	■

　

ol要素（順序ありリスト）のキーワード

値	説明
decimal	1. 2. 3. ...
decimal-leading-zero	01. 02. 03. ...
lower-roman	i. ii. iii. ...
upper-roman	Ⅰ. Ⅱ. Ⅲ. ...
lower-alpha	a. b. c. ...
upper-alpha	A. B. C. ...
lower-greek	α. β. γ. ...
lower-latin	a. b. c. ...
upper-latin	A. B. C. ...
hebrew	...
armenian	...
gerorgian	1. 2. 3. ...
cjk-ideographic	1. 2. 3. ...
hiragana	あ. い. う. ...
katakana	ア. イ. ウ. ...
hiragana-iroha	い. ろ. は. ...
katakana-iroha	イ. ロ. ハ. ...

設置サンプル

キーワード指定による表示のされ方（ul要素の場合）

<style type="text/css">
	div#list_ul ul {
		margin-left:20px; padding-left:0;
	}
</style>

<div id="list_ul">
	<ul style="list-style-type:desc">
		<li>disc-1</li>
		<li>disc-2</li>
		<li>disc-3</li>
	</ul>
	<hr />
	<ul style="list-style-type:circle">
		<li>circle-1</li>
		<li>circle-2</li>
		<li>circle-3</li>
	</ul>
	<hr />
	<ul style="list-style-type:square">
		<li>square-1</li>
		<li>square-2</li>
		<li>square-3</li>
	</ul>
</div>

キーワード指定による表示のされ方（ol要素の場合）

<style type="text/css">
	div#list_ol ul { 
		margin-left:20px; padding-left:0;
	}
</style>

<div id="list_ol">
	<ol style="list-style-type:decimal;">
		<li>decimal-1</li>
		<li>decimal-2</li>
		<li>decimal-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:decimal-leading-zero;">
		<li>decimal-leading-zero-1　※IE未対応</li>
		<li>decimal-leading-zero-2</li>
		<li>decimal-leading-zero-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:lower-roman;">
		<li>lower-roman-1</li>
		<li>lower-roman-2</li>
		<li>lower-roman-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:upper-roman;">
		<li>upper-roman-1</li>
		<li>upper-roman-2</li>
		<li>upper-roman-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:lower-alpha;">
		<li>lower-alpha-1</li>
		<li>lower-alpha-2</li>
		<li>lower-alpha-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:upper-alpha;">
		<li>upper-alpha-1</li>
		<li>upper-alpha-2</li>
		<li>upper-alpha-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:lower-greek;">
		<li>lower-greek-1　※IE未対応</li>
		<li>lower-greek-2</li>
		<li>lower-greek-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:lower-latin;">
		<li>lower-latin-1　※IE未対応</li>
		<li>lower-latin-2</li>
		<li>lower-latin-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:upper-latin;">
		<li>upper-latin-1　※IE未対応</li>
		<li>upper-latin-2</li>
		<li>upper-latin-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:hebrew;">
		<li>hebrew-1　※IE未対応</li>
		<li>hebrew-2</li>
		<li>hebrew-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:armenian;">
		<li>armenian-1　※IE未対応</li>
		<li>armenian-2</li>
		<li>armenian-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:gerorgian;">
		<li>gerorgian-1　※IE未対応</li>
		<li>gerorgian-2</li>
		<li>gerorgian-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:cjk-ideographic;">
		<li>cjk-ideographic-1　※IE未対応</li>
		<li>cjk-ideographic-2</li>
		<li>cjk-ideographic-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:hiragana;">
		<li>hiragana-1　※IE未対応</li>
		<li>hiragana-2</li>
		<li>hiragana-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:katakana;">
		<li>katakana-1　※IE未対応</li>
		<li>katakana-2</li>
		<li>katakana-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:hiragana-iroha;">
		<li>hiragana-iroha-1　※IE未対応</li>
		<li>hiragana-iroha-2</li>
		<li>hiragana-iroha-3</li>
	</ol>
	<hr />
	<ol style="list-style-type:katakana-iroha;">
		<li>katakana-iroha-1　※IE未対応</li>
		<li>katakana-iroha-2</li>
		<li>katakana-iroha-3</li>
	</ol>
</div>