CSS3

プロパティ

list-style-type

→●、mdn

テキストに基づくリスト用マーカー指定。

マーカー文字列 を指定する。それは、リスト アイテム の マーカー を埋めるときに ― リスト アイテムの content が normal、かつマーカー画像は無いときに限り ― 利用される。

<counter-style>

＝<counter-style-name> | <symbols()>

要素のマーカー文字列を［指定された <counter-style> を利用して表現される list-item カウンターの値］として指定する

具体的には、マーカー文字列は、［指定された <counter-style> を利用して list-item カウンター値用のカウンター表現を生成した結果］の先頭に <counter-style> の prefix を、末尾に <counter-style> の suffix を付け加えたものになる。指定された <counter-style> が存在しない場合、decimal と見なされる。

<counter-style-name>

ASCII 大小無視で none に合致しない <custom-ident> であり、カウンター スタイルの 名前 を与える。<counter-style-name> は、ツリー視野な名前を与える。

キーワードは、妥当な <counter-style-name> ではあるが， ここでカウンター スタイル規則を命名するために利用された場合は妥当でない ― その場合、当の規則は無効になる（ extends システムなど、他の文脈においては利用できる）：

decimal、disc、square、circle、disclosure-open、disclosure-closed。

decimal

西欧十進数

1、2、3、...、98、99、100

<UL style="list-style-type:decimal;
 border:1px solid red;
">UL要素
 <LI>LI要素
 <LI>LI要素
 <LI>LI要素
</UL>

<UL>UL要素
 <LI style="list-style-type:decimal; border:1px solid red;">LI要素
 <LI style="list-style-type:decimal; border:1px solid red;">LI要素
 <LI>LI要素
</UL>

disc

次に似たベタ塗りの丸：「•」U+2022 BULLET 。

<UL style="list-style-type:disc;
 border:1px solid red;
">UL要素
 <LI>LI要素
   <UL>UL要素
    <LI>LI要素
    <LI>LI要素
   </UL>
 <LI>LI要素
 <LI>LI要素
</UL>

circle

次に似た中空の丸：「◦」U+25E6 WHITE BULLET 。

<UL style="list-style-type:circle;
 border:1px solid red;
">UL要素
 <LI>LI要素
   <UL>UL要素
    <LI>LI要素
    <LI>LI要素
   </UL>
 <LI>LI要素
 <LI>LI要素
</UL>

square

次に似たベタ塗りの方形：「▪」U+25AA BLACK SMALL SQUARE 。

<UL style="list-style-type:square;
 border:1px solid red;
">UL要素
 <LI>LI要素
   <UL>UL要素
    <LI>LI要素
    <LI>LI要素
   </UL>
 <LI>LI要素
 <LI>LI要素
</UL>

disclosure-open、
disclosure-closed

details 要素などの、開／閉状態をとり得る開閉式ウィジェットを指示するために適切な記号。

<UL>UL要素
 <LI style=" list-style-type:disclosure-open; border:1px solid red;">LI要素
 <LI style=" list-style-type:disclosure-closed; border:1px solid red;">LI要素
 <LI>LI要素
</UL>

symbols() ○

<UL>UL要素
 <LI style="list-style-type:symbols(cyclic '✖' '○'); border:1px solid red;">LI要素
 <LI style="list-style-type:symbols(cyclic '✖' '○'); border:1px solid red;">LI要素
 <LI>LI要素
</UL>

¶

<UL style="list-style-type:symbols(cyclic '✖' '○');
 border:1px solid red;
">UL要素
 <LI>LI要素
 <LI>LI要素
</UL>

¶

<string> ○

要素のマーカー文字列は、指定された <string> になる。

<UL>UL要素
 <LI style=" list-style-type:'★'; border:1px solid red;">LI要素
 <LI style=" list-style-type:'★ '; border:1px solid red;">LI要素
 <LI>LI要素
</UL>

none

要素にはマーカー文字列は無い。

<UL>UL要素
 <LI style=" list-style-type:none; border:1px solid red;">LI要素
 <LI>LI要素
 <LI>LI要素
</UL>

<UL style=" list-style-type:none; border:1px solid red;">UL要素
 <LI>LI要素
  <UL>
   <LI>LI要素
  </UL>
 <LI>LI要素
 <LI>LI要素
</UL>

ul { list-style-type: "★"; }
/*  マーカを “星印” に設定する  */

ul { list-style-type: symbols(cyclic '○' '●'); }
/*  すべての無順序リストアイテムのマーカに［ 中空の丸, ベタの丸 ］を交替的に設定する。  */

ul { list-style-type: none; }
/*  マーカをまるごと抑止する — list-style-image に妥当な画像が指定されていない限り。  */

関連

@counter-style。

テスト