この翻訳は不完全です。英語から この記事を翻訳 してください。

list-style-type は li 要素の外観を設定する CSS プロパティです。

/* マーカーのタイプの一例 */
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;

初期値disc
適用対象 リスト項目
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

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

Note: Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.

構文

The list-style-type property may be defined as any one of:

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>

結果

注記

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

仕様

仕様書 策定状況 コメント
CSS Counter Styles Level 3
list-style-type の定義
勧告候補 CSS2.1 counters を再定義。
@counter-style 規則をサポートするため構文を拡張。
@counter-style を使用して一般的なスタイルを定義: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open, disclosure-closed
<counter-style>symbols() 表記で拡張。
CSS Lists Module Level 3
list-style-type の定義
草案 <string> のサポートを追加し、 @counter-style ルールで使われる識別子をキーワードに追加。
この変更は現時点で実装しているブラウザーがないため、このページにまだ反映していません。
CSS Level 2 (Revision 1)
list-style-type の定義
勧告 初回定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112143.51
arabic-indic なし なし ? なし なし なし
armenian1121861
bengali なし なし ? なし なし なし
cjk-decimal なし なし28 なし なし なし
cjk-earthly-branch なし なし ? なし なし なし
cjk-heavenly-stem なし なし ? なし なし なし
cjk-ideographic1 なし1 なし

15

71

?
decimal-leading-zero1121881
devanagari なし なし ? なし なし なし
disclosure-closed なし なし33 なし なし なし
disclosure-open なし なし33 なし なし なし
ethiopic-numeric なし なし ? なし なし なし
georgian1121861
gujarati なし なし ? なし なし なし
gurmukhi なし なし ? なし なし なし
hebrew1 なし1 なし

15

71

?
hiragana1 なし1 なし

15

71

?
hiragana-iroha1 なし1 なし

15

71

?
japanese-formal なし なし

28

1 -moz-

なし なし なし
japanese-informal なし なし

28

1 -moz-

なし なし なし
kannada なし なし ? なし なし なし
katakana1 なし1 なし

15

71

?
katakana-iroha1 なし1 なし

15

71

?
khmer なし なし ? なし なし なし
korean-hangul-formal なし なし28 なし なし なし
korean-hanja-formal なし なし28 なし なし なし
korean-hanja-informal なし なし28 なし なし なし
lao なし なし ? なし なし なし
lower-greek1121861
lower-latin1121861
malayalam なし なし ? なし なし なし
mongolian なし なし33 なし なし なし
myanmar なし なし ? なし なし なし
oriya なし なし ? なし なし なし
persian なし なし ? なし なし なし
simp-chinese-formal なし なし

28

1 -moz-

なし なし なし
simp-chinese-informal なし なし

28

1 -moz-

なし なし なし
tamil なし なし ? なし なし なし
telugu なし なし ? なし なし なし
thai なし なし ? なし なし なし
trad-chinese-formal なし なし

28

1 -moz-

なし なし なし
trad-chinese-informal なし なし

28

1 -moz-

なし なし なし
upper-latin1121861
<string> なし なし39 なし なし なし
symbols なし ?35 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり124 あり あり あり
arabic-indic ? ? ?

33

4 -moz-

? ? なし
armenian ? あり あり4 あり あり あり
bengali ? ? ?

33

4 -moz-

? ? なし
cjk-decimal ? ? ? ? ? ? なし
cjk-earthly-branch ? ? ?

33

4 -moz-

? ? なし
cjk-heavenly-stem ? ? ?

33

4 -moz-

? ? なし
cjk-ideographic ? ? ? ? ? ? ?
decimal-leading-zero ? ? ? ? ? ? ?
devanagari ? ? ?

33

4 -moz-

? ? なし
disclosure-closed ? ? ? ? ? ? なし
disclosure-open ? ? ? ? ? ? なし
ethiopic-numeric ? ? ?

332

4 -moz-

? ? なし
georgian ? あり あり4 あり あり あり
gujarati ? ? ?

33

4 -moz-

? ? なし
gurmukhi ? ? ?

33

4 -moz-

? ? なし
hebrew ? ? ? ? ? ? ?
hiragana ? ? ? ? ? ? ?
hiragana-iroha ? ? ? ? ? ? ?
japanese-formal ? ? ? ? ? ? なし
japanese-informal ? ? ? ? ? ? なし
kannada ? ? ?

33

4 -moz-

? ? なし
katakana ? ? ? ? ? ? ?
katakana-iroha ? ? ? ? ? ? ?
khmer ? ? ?

33

4 -moz-

? ? なし
korean-hangul-formal ? ? ? ? ? ? なし
korean-hanja-formal ? ? ? ? ? ? なし
korean-hanja-informal ? ? ? ? ? ? なし
lao ? ? ?

33

4 -moz-

? ? なし
lower-greek ? あり あり4 あり あり あり
lower-latin ? あり あり4 あり あり あり
malayalam ? ? ?

33

4 -moz-

? ? なし
mongolian ? ? ? ? ? ? なし
myanmar ? ? ?

33

4 -moz-

? ? なし
oriya ? ? ?

33

4 -moz-

? ? なし
persian ? ? ?

33

4 -moz-

? ? なし
simp-chinese-formal ? ? ? ? ? ? なし
simp-chinese-informal ? ? ? ? ? ? なし
tamil ? ? ?

33

4 -moz-

? ? なし
telugu ? ? ?

33

4 -moz-

? ? なし
thai ? ? ?

33

4 -moz-

? ? なし
trad-chinese-formal ? ? ? ? ? ? なし
trad-chinese-informal ? ? ? ? ? ? なし
upper-latin ? あり あり4 あり あり あり
<string> ? ? ? ? ? ? なし
symbols なし なし ?35 なし なし なし

1. Until version 15, only decimal numbers display.

2. Before Firefox 38, Firefox added a dot as suffix of the number for ethiopic-numeric (for example, ፫. instead of ፫). The specification later defined the absence of a suffix, which Firefox 38 followed.

関連情報

ドキュメントのタグと貢献者

最終更新者: momdo,