list-style-type
list-style-type
は CSS のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
マーカーの色は、適用先の要素における色の計算値と同じになります。
既定で display: list-item
の値を持っている要素はわずかです (<li>
と <summary>
)。しかし、 list-style-type
プロパティは display
の値が list-item
に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は <ol>
または <ul>
) に設定することですべてのリスト項目に適用することができます。
構文
/* マーカーの種類の一例 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
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;
list-style-type プロパティは、以下のいずれかで定義することができます。
- 単一の
<custom-ident>
値 - 単一の
symbols()
値 - 単一の
<string>
値 none
キーワード
値
<custom-ident>
@counter-style
の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。
symbols()
(en-US)- 無名のリストスタイルを定義します。
<string>
- 特定の文字列を、リストのマーカーとして使用します。
none
- マーカーは表示されません。
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
-
- 例
armenian
-
- 伝統的なアルメニア語の数値表記
- (ayb/ayp, ben/pen, gim/keem…
bengali
-moz-bengali
-
- 例
cambodian
*-
- 例
khmer
と同義
cjk-earthly-branch
-moz-cjk-earthly-branch
-
- 例
cjk-heavenly-stem
-moz-cjk-heavenly-stem
-
- 例
cjk-ideographic
-
trad-chinese-informal
と同義- 例: 一萬一千一百一十一
devanagari
-moz-devanagari
-
- 例
ethiopic-numeric
-
- 例
georgian
-
- 伝統的なジョージア語の数値表記
- 例: an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
-
- 例
gurmukhi
-moz-gurmukhi
-
- 例
hebrew
-
- 伝統的なヘブライ語の数値表記
hiragana
-
- 例: あ, い, う, え, お, か, き…
- 日本語の「あいうえお」
hiragana-iroha
-
- 例: い, ろ, は, に, ほ, へ, と…
- いろは歌は日本語の古い字音の並びです
japanese-formal
-
- 法的または財務の文書で使用される、日本語の公的な数値表記
- 例: 壱萬壱阡壱百壱拾壱
- 似ている別の文字に書き換えられないようにするための漢字
japanese-informal
-
- 日本語の日常的な数値表記
kannada
-moz-kannada
-
- 例
katakana
-
- 例: ア, イ, ウ, エ, オ, カ, キ…
- 日本語の「あいうえお」
katakana-iroha
-
- 例: イ, ロ, ハ, ニ, ホ, ヘ, ト…
- いろは歌は日本語の古い字音の並びです
khmer
-moz-khmer
-
- 例
korean-hangul-formal
-
- 朝鮮のハングルの数値表記
- 例: 일만 일천일백일십일
korean-hanja-formal
-
- 公的な朝鮮の漢数字
- 例: 壹萬 壹仟壹百壹拾壹
korean-hanja-informal
-
- 朝鮮の漢数字
- 例: 萬 一千百十一
lao
-moz-lao
-
- 例
lower-armenian
*-
- 例
malayalam
-moz-malayalam
-
- 例
mongolian
-
- 例
myanmar
-moz-myanmar
-
- 例
oriya
-moz-oriya
-
- 例
persian
-moz-persian
-
- 例
simp-chinese-formal
-
- 公的な簡体字中国語の数値表記
- 例: 壹万壹仟壹佰壹拾壹
simp-chinese-informal
-
- 簡体字中国語の日常的な数値表記
- 例: 一万一千一百一十一
tamil
-moz-tamil
-
- 例
telugu
-moz-telugu
-
- 例
thai
-moz-thai
-
- 例
tibetan
*-
- 例
trad-chinese-formal
-
- 公的な繁体字中国語の数値表記
- 例: 壹萬壹仟壹佰壹拾壹
trad-chinese-informal
-
- 公的な場では使用しない、繁体字中国語の数値表記
- 例: 一萬一千一百一十一
upper-armenian
*-
- 例
disclosure-open
-
<details>
などの展開ウィジェットを開いていることを示す記号
disclosure-closed
-
<details>
などの展開ウィジェットを閉じていることを示す記号
標準外の拡張
Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。
-moz-ethiopic-halehame
-
- 例
-moz-ethiopic-halehame-am
-
- 例
ethiopic-halehame-ti-er
-moz-ethiopic-halehame-ti-er
-
- 例
ethiopic-halehame-ti-et
-moz-ethiopic-halehame-ti-et
-
- 例
hangul
-moz-hangul
-
- 例
- 例
- 例
hangul-consonant
-moz-hangul-consonant
-
- 例
- 例
- 例
urdu
-moz-urdu
-
- 例
形式文法
<counter-style> | <string> | noneここで
<counter-style> = <counter-style-name> | symbols()
ここで
<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>
結果
アクセシビリティの考慮事項
読み上げソフトの VoiceOver には、 list-style-type
の値に none
が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に幅ゼロの空白を擬似コンテンツとして追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。
ul {
list-style: none;
}
ul li::before {
content: "\200B";
}
メモ
- 一部の
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 Module Level 3 list-style-type の定義 |
草案 | <string> の対応を追加し、 @counter-style 規則で使われる識別子をキーワードに追加。単純な <string> の対応を追加。 |
CSS Level 2 (Revision 1) list-style-type の定義 |
勧告 | 初回定義 |
初期値 | disc |
---|---|
適用対象 | リスト項目 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの互換性
BCD tables only load in the browser