list-style-type

CSSプロパティ「list-style-type」の解説とサンプル。

リストマークの種類を指定するプロパティ。

ulタグ、olタグで囲まれたliタグのマークの種類を指定することができる。

丸	disc（●）、circle（○）
四角	square（■）
算用数字	decimal（1、2、3）、decimal-leading-zero（01、02、03）
漢数字	cjk-ideographic（一、二、三）
ローマ数字	lower-roman（ⅰ、ⅱ、ⅲ）、upper-roman（Ⅰ、Ⅱ、Ⅲ）
ギリシャ文字	lower-greek（α、β、γ）
アルファベット	lower-alpha（a、b、c）、upper-alpha（A、B、C）
仮名	hiragana（あ、い、う）、katakana（ア、イ、ウ）
イロハ	hiragana-iroha（い、ろ、は）、katakana-iroha（イ、ロ、ハ）
マークなし	none

ブラウザによって表示されないことがあるので注意が必要。

[CSSの記述]

.sampleA { list-style-type:square; }

[HTMLの記述]

<ul class="sampleA">
	<li>テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
</ul>

[ブラウザ上の表示]

[CSSの記述]

.sampleB { list-style-type:decimal-leading-zero; }

[HTMLの記述]

<ol class="sampleB">
	<li>テキストテキスト<br />テキスト</li>
	<li>テキストテキスト<br />テキスト</li>
	<li>テキストテキスト<br />テキスト</li>
</ol>

[ブラウザ上の表示]

CSSレイアウト実践講座カテゴリ