list-style-type

list-style-type は CSS のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。

このデモのソースファイルは 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()

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

<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
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>

結果

アクセシビリティの考慮事項

読み上げソフトの VoiceOver には、 list-style-type の値に none が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に幅ゼロの空白を擬似コンテンツとして追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

• VoiceOver and list-style-type: none – Unfettered Thoughts
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

メモ

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

仕様書

ブラウザーの互換性

関連情報

• list-style, list-style-image, list-style-position