list-style-type

概要

list-style-type は li 要素の外観を設定する CSS プロパティです。厳密には、display:list-item の CSS スタイルを持つ要素を対象とするものであり、これをデフォルトスタイルとして持つ要素は <li> 要素のみです。しかし、display プロパティの値を操作すれば、全ての可視要素にこのスタイルを適用する事が可能となります。

ビュレット及びマーカーの色には、リストアイテムの color プロパティの計算値が適用されます。

構文

/* マーカーのタイプの一例 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* <string> */
list-style-type: '-';

/* @counter-style 規則にマッチする識別子 */
list-style-type: custom-counter-style;

list-style-type: none;

/* グローバル値 */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

値

symbols()

無名のリストスタイルを定義します。

none

マーカーは表示されません。

<string>

特定の文字列を、リストのマーカーとして使用します。

<custom-ident>

@counter-style の値またはあらかじめ定義されたスタイルにマッチする識別子です:

disc

• 塗りつぶされた円形 (初期値)

circle

• 中空円

square

• 塗りつぶされた四角形

decimal

• 数値
• デフォルトでは 1. から始まります

cjk-decimal

• 漢数字
• (一, 二, 三, ..., 九八, 九九, 一〇〇)

decimal-leading-zero

• 数値
• ゼロ埋めされて表示されます
• (01, 02, 03, … 98, 99)

lower-roman

• 小文字のローマ数字
• (i, ii, iii, iv, v…)

upper-roman

• 大文字のローマ数字
• (I, II, III, IV, V…)

lower-greek

• 小文字のギリシャ語
• アルファ、ベータ、ガンマ、…
• (α, β, γ…)

lower-alpha

lower-latin

• 小文字の ASCII 文字
• (a, b, c, … z)
• lower-latin は IE7 以下ではサポートされていない…
• Browser compatibility の章も参照して下さい

upper-alpha

upper-latin

• 大文字の ASCII 文字
• (A, B, C, … Z)
• upper-latin は IE7 以下ではサポートされていない…

arabic-indic

-moz-arabic-indic

• Example

armenian

• 伝統的なアルメニア語のナンバリング
• (ayb/ayp, ben/pen, gim/keemm, …)

bengali

-moz-bengali

• Example

cambodian *

• Example
• khmer と同義

cjk-earthly-branch

-moz-cjk-earthly-branch

• Example

cjk-heavenly-stem

-moz-cjk-heavenly-stem

• Example

cjk-ideographic

• trad-chinese-informal と同義
• 例: 一萬一千一百一十一

devanagari

-moz-devanagari

• Example

ethiopic-numeric

• Example

georgian

• 伝統的なグルジア語のナンバリング
• (an, ban, gan, … he, tan, in …)

gujarati

-moz-gujarati

• Example

gurmukhi

-moz-gurmukhi

• Example

hebrew

• 伝統的なヘブライ語のナンバリング

hiragana

• あ、い、う、え、お、か、き…
• 日本語の「あいうえお」

hiragana-iroha

• い、ろ、は、に、ほ、へ、と…
• いろは歌は日本語の古い字音の並びです

japanese-formal

• 法的または財務の文書で使用される、日本語の公的な数値表記
• 例: 壱萬壱阡壱百壱拾壱
• 似ている別の文字に書き換えられないようにするための漢字

japanese-informal

• 公的な場では使用しない、日本語のナンバリング

kannada

-moz-kannada

• Example

katakana

• ア、イ、ウ、エ、オ、カ、キ…
• 日本語の「あいうえお」

katakana-iroha

• イ、ロ、ハ、ニ、ホ、ヘ、ト…
• いろは歌は日本語の古い字音の並びです

khmer

-moz-khmer

• Example

korean-hangul-formal

• 朝鮮のハングルのナンバリング
• (일만 일천일백일십일)

korean-hanja-formal

• 公的な朝鮮の漢数字
• 例: 壹萬 壹仟壹百壹拾壹

korean-hanja-informal

• 朝鮮の漢数字
• 例: 萬 一千百十一

lao

-moz-lao

• Example

lower-armenian *

• Example

malayalam

-moz-malayalam

• Example

mongolian

• Example

myanmar

-moz-myanmar

• Example

oriya

-moz-oriya

• Example

persian

-moz-persian

• Example

simp-chinese-formal

• 公的な簡体字中国語のナンバリング
• 例: 壹万壹仟壹佰壹拾壹

simp-chinese-informal

• 公的な場では使用しない、簡体字中国語のナンバリング
• E.g. 一万一千一百一十一

tamil

-moz-tamil

• Example

telugu

-moz-telugu

• Example

thai

-moz-thai

• Example

tibetan *

• Example

trad-chinese-formal

• 公的な繁体字中国語のナンバリング
• 例: 壹萬壹仟壹佰壹拾壹

trad-chinese-informal

• 公的な場では使用しない、繁体字中国語のナンバリング
• 例: 一萬一千一百一十一

upper-armenian *

• Example

disclosure-open

• <details> などの展開ウィジェットを開いていることを示すシンボル

disclosure-closed

• <details> などの展開ウィジェットを閉じていることを示すシンボル

非標準の拡張

Mozilla (Firefox)、Blink (Chrome and Opera)、WebKit (Safari) が拡張した、様々な言語のマーカー。ブラウザ実装状況の表で、ブラウザがどの拡張をサポートしているかを確認してください。

-moz-ethiopic-halehame

• Example

-moz-ethiopic-halehame-am

• Example

ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-er

• Example

ethiopic-halehame-ti-et

-moz-ethiopic-halehame-ti-et

• Example

hangul

-moz-hangul

• Example
• Example
• Example

hangul-consonant

-moz-hangul-consonant

• Example
• Example
• Example

urdu

-moz-urdu

• Example

形式文法

<counter-style> | <string> | none
where 
<counter-style> = <counter-style-name> | symbols()
where 
<counter-style-name> = <custom-ident>

例

CSS

ol.normal {
  list-style-type: upper-alpha;
}

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

HTML

<ol class="normal">List 1
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

<ol class="shortcut">List 2
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>

Result

注記

• 一部の list-style-types の表示には、適切なフォントのインストールが必要です。
• cjk-ideographic は trad-chinese-informal と同義です。後方互換性のために残されています。

仕様

ブラウザ実装状況

[1] Firefox 38 より前のバージョンでは、ethiopic-numeric で値の後に接尾辞としてドットを付加していました (፫ ではなく ፫.)。後の仕様書で接尾辞は不要と定義され、Gecko で採用しました。

関連情報

• list-style 関連 CSS プロパティ: list-style 、 list-style-image 、 list-style-position