概要
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-alphalower-latin-
- 小文字の ASCII 文字
- (a, b, c, … z)
lower-latinは IE7 以下ではサポートされていない…- Browser compatibility の章も参照して下さい
upper-alphaupper-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> | nonewhere
<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と同義です。後方互換性のために残されています。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| 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 で採用しました。
関連情報
list-style関連 CSS プロパティ:list-style、list-style-image、list-style-position