list-style-type

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

CSSレイアウト実践講座

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

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

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト
サンプル(B)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

  1. テキストテキストテキスト
  2. テキストテキストテキスト
  3. テキストテキストテキスト