概要

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

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

ビュレット及びマーカーのには、リストアイテムの 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-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 and Counters Module Level 3
list-style-type の定義
草案 <string> のサポートを追加し、 @counter-style ルールで使われる識別子をキーワードに追加。
この変更は現時点で実装しているブラウザがないため、このページにまだ反映していません。
CSS Level 2 (Revision 1)
list-style-type の定義
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman を含む) 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
lower-latin, upper-latin, lower-greek, armenian, georgian 1.0 1.0 (1.0) 8.0 6.0 1.0 (85)
decimal-leading-zero 1.0 1.0 (1.0) 8.0 8.0 1.0 (85)
hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha 1.0 1.0 (1.0) 未サポート 7.0 (ただし 10 進数値のみ表示)
15.0
1.0-1.2 (85-125)
japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-informal, trad-chinese-informal 未サポート 1.0 (1.7 or earlier) -moz
28.0 (28.0)
未サポート 未サポート 未サポート
korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal 未サポート 28.0 (28.0) 未サポート 未サポート

未サポート

ethiopic-numeric, persian, arabic-indic, devanagari, bengali, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam, thai, lao, myanmar, khmer, cjk-heavenly-stem, cjk-earthly-branch 未サポート 1.0 (1.7 or earlier) -moz
33.0 (33.0) [1]
未サポート 未サポート

未サポート

disclosure-open, disclosure-closed, mongolian 未サポート 33.0 (33.0) 未サポート 未サポート 未サポート
<string> 未サポート 39.0 (39.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

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

関連情報

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

 このページの貢献者: yyss, Guillaume-Heras, teoli, SphinxKnight, Sebastianz, ethertank, sosleepy
 最終更新者: yyss,