list-style-type

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

マーカーのは、適用先の要素における色の計算値と同じになります。

既定で 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>
@counter-style の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。
symbols() (en-US)
無名のリストスタイルを定義します。
<string>
特定の文字列を、リストのマーカーとして使用します。
none
マーカーは表示されません。
disc
  • 塗りつぶされた円形 (既定値)
circle
  • 中空円
square
  • 塗りつぶされた四角形
decimal
  • 数値
  • 既定では 1 から始まります
cjk-decimal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 漢数字
  • 例: 一, 二, 三, ..., 九八, 九九, 一〇〇
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 これは実験段階の API です。製品内のコードで使用しないようご注意ください。 *
  • khmer と同義
cjk-earthly-branch
-moz-cjk-earthly-branch
cjk-heavenly-stem
-moz-cjk-heavenly-stem
cjk-ideographic これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • trad-chinese-informal と同義
  • 例: 一萬一千一百一十一
devanagari
-moz-devanagari
ethiopic-numeric これは実験段階の API です。製品内のコードで使用しないようご注意ください。
georgian
  • 伝統的なジョージア語の数値表記
  • 例: an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
gurmukhi
-moz-gurmukhi
hebrew これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 伝統的なヘブライ語の数値表記
hiragana これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 例: あ, い, う, え, お, か, き…
  • 日本語の「あいうえお」
hiragana-iroha これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 例: い, ろ, は, に, ほ, へ, と…
  • いろは歌は日本語の古い字音の並びです
japanese-formal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 法的または財務の文書で使用される、日本語の公的な数値表記
  • 例: 壱萬壱阡壱百壱拾壱
  • 似ている別の文字に書き換えられないようにするための漢字
japanese-informal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 日本語の日常的な数値表記
kannada
-moz-kannada
katakana これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 例: ア, イ, ウ, エ, オ, カ, キ…
  • 日本語の「あいうえお」
katakana-iroha これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 例: イ, ロ, ハ, ニ, ホ, ヘ, ト…
  • いろは歌は日本語の古い字音の並びです
khmer
-moz-khmer
korean-hangul-formal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 朝鮮のハングルの数値表記
  • 例: 일만 일천일백일십일
korean-hanja-formal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 公的な朝鮮の漢数字
  • 例: 壹萬 壹仟壹百壹拾壹
korean-hanja-informal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 朝鮮の漢数字
  • 例: 萬 一千百十一
lao
-moz-lao
lower-armenian これは実験段階の API です。製品内のコードで使用しないようご注意ください。 *
malayalam
-moz-malayalam
mongolian これは実験段階の API です。製品内のコードで使用しないようご注意ください。
myanmar
-moz-myanmar
oriya
-moz-oriya
persian これは実験段階の API です。製品内のコードで使用しないようご注意ください。
-moz-persian
simp-chinese-formal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 公的な簡体字中国語の数値表記
  • 例: 壹万壹仟壹佰壹拾壹
simp-chinese-informal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 簡体字中国語の日常的な数値表記
  • 例: 一万一千一百一十一
tamil これは実験段階の API です。製品内のコードで使用しないようご注意ください。
-moz-tamil
telugu
-moz-telugu
thai
-moz-thai
tibetan これは実験段階の API です。製品内のコードで使用しないようご注意ください。 *
trad-chinese-formal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 公的な繁体字中国語の数値表記
  • 例: 壹萬壹仟壹佰壹拾壹
trad-chinese-informal これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • 公的な場では使用しない、繁体字中国語の数値表記
  • 例: 一萬一千一百一十一
upper-armenian これは実験段階の API です。製品内のコードで使用しないようご注意ください。 *
disclosure-open これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • <details> などの展開ウィジェットを開いていることを示す記号
disclosure-closed これは実験段階の API です。製品内のコードで使用しないようご注意ください。
  • <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-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 規則で使われる識別子をキーワードに追加。
単純な <string> の対応を追加。
CSS Level 2 (Revision 1)
list-style-type の定義
勧告 初回定義

初期値disc
適用対象 リスト項目
継承あり
計算値指定通り
アニメーションの種類離散値

ブラウザーの互換性

BCD tables only load in the browser

関連情報