Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

List style

list-style は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。

リストマーカースタイル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
list-style
1
12
1
1
18
1
その他
css.properties.list-style-image

list-style-image は CSS のプロパティで、リストアイテムのマーカーとして使われる画像を設定します。
1
12
1
1
18
1
CSS プロパティ
none
1
12
1
1
18
1
その他
css.properties.list-style-position

list-style-position は CSS のプロパティで、リストアイテムに対する ::marker の位置を指定します。
1
12
1
1
18
1
CSS プロパティ
inside
1
12
1
1
18
1
outside
1
12
1
1
18
1
その他
css.properties.list-style-type

list-style-type は CSS のプロパティで、リストアイテム要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。
1
12
1
1
18
1
CSS プロパティ
arabic-indic
6
79
33
5
18
4.2
armenian
1
12
1
1
18
1
bengali
6
79
33
5
18
4.2
cambodian
6
79
33
5
18
4.2
circle
1
12
1
1
18
1
cjk-decimal
91
91
28
15
91
15
cjk-earthly-branch
6
79
33
5
18
4.2
cjk-heavenly-stem
6
79
33
5
18
4.2
cjk-ideographic
1
79
1
5
18
4.2
decimal
1
12
1
1
18
1
decimal-leading-zero
1
12
1
1
18
1
devanagari
6
79
33
5
18
4.2
disc
1
12
1
1
18
1
disclosure-closed
89
89
33
15
89
15
disclosure-open
89
89
33
15
89
15
ethiopic-numeric
91
91
33
15
91
15
georgian
1
12
1
1
18
1
gujarati
6
79
33
5
18
4.2
gurmukhi
6
79
33
5
18
4.2
hebrew
1
12
1
1
18
1
hiragana
1
12
1
1
18
1
hiragana-iroha
1
12
1
1
18
1
japanese-formal
91
91
28
15
91
15
japanese-informal
91
91
28
15
91
15
kannada
6
79
33
5
18
4.2
katakana
1
12
1
1
18
1
katakana-iroha
1
12
1
1
18
1
khmer
6
79
33
5
18
4.2
korean-hangul-formal
45
79
28
15
45
15
korean-hanja-formal
45
79
28
15
45
15
korean-hanja-informal
45
79
28
15
45
15
lao
6
79
33
5
18
4.2
lower-alpha
1
12
1
1
18
1
lower-armenian
13
79
33
5.1
18
5
lower-greek
1
12
1
1
18
1
lower-latin
1
12
1
1
18
1
lower-roman
1
12
1
1
18
1
malayalam
6
79
33
5
18
4.2
mongolian
6
79
33
5
18
4.2
myanmar
6
79
33
5
18
4.2
none
1
12
1
1
18
1
oriya
6
79
33
5
18
4.2
persian
6
79
33
5
18
4.2
simp-chinese-formal
45
79
28
15
45
15
simp-chinese-informal
45
79
28
15
45
15
square
1
12
1
1
18
1
string

`<文字列>`
79
79
39
14.1
79
14.5
symbols

symbols() は CSS の関数で、 list-style などのプロパティの値として、カウンタースタイルをインラインで直接定義することができます。これは、カウンタースタイルを定義する @counter-style メソッドよりも機能は劣りますが、よりシンプルな代替手段です。
35
tamil
91
91
33
15
91
15
telugu
6
79
33
5
18
4.2
thai
6
79
33
5
18
4.2
tibetan
6
79
33
5
18
4.2
trad-chinese-formal
45
79
28
15
45
15
trad-chinese-informal
45
79
28
15
45
15
upper-alpha
1
12
1
1
18
1
upper-armenian
13
79
33
5.1
18
5
upper-latin
1
12
1
1
18
1
upper-roman
1
12
1
1
18
1
inside
1
12
1
1
18
1
none
1
12
1
1
18
1
outside
1
12
1
1
18
1
symbols

symbols() は CSS の関数で、 list-style などのプロパティの値として、カウンタースタイルをインラインで直接定義することができます。これは、カウンタースタイルを定義する @counter-style メソッドよりも機能は劣りますが、よりシンプルな代替手段です。
35
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 86 より前では、このプロパティは `<image>` タイプを受け入れず、画像の URL を必要としました。
注釈 1件
実装メモ
  • Safari では、ブロック要素が「list-style-position: inside」として宣言されたリスト要素の最初の子である場合、マーカー ボックスはブロック要素と同じ行に配置されます。
注釈 1件
実装メモ
  • iOS の Safari では、ブロック要素が「list-style-position: inside」として宣言されたリスト要素の最初の子である場合、マーカー ボックスはブロック要素と同じ行に配置されます。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
実装メモ
  • Firefox 38 より前のバージョンでは、Firefox は「ethiopic-numeric」の数字の接尾辞としてドットを追加していました (たとえば、፫ の代わりに ፫.)。 後にこの仕様ではサフィックスが存在しないことが定義され、Firefox 38 もこれに準拠しました。
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)

基本構文

CSS 
ul {
  list-style: square inside;
}
ol {
  list-style-type: upper-roman;
}

ライブデモ

squarem-ka-(inside)

CSS squarem-ka-(inside) demo.

プレビュー全画面表示

ro-mnumbercharacter

CSS ro-mnumbercharacter demo.

プレビュー全画面表示

customemoji

CSS customemoji demo.

プレビュー全画面表示

実務での使いどころ

  • リストマーカーのカスタマイズ

    デザインに合わせてリストの箇条書き記号を変更し、番号付きリストにローマ数字やカタカナを使用します。

注意点

  • list-style: noneでマーカーを非表示にした場合、Safariの一部バージョンではrole='list'のセマンティクスが失われるため、明示的にrole属性を追加してください。

アクセシビリティ

  • リストのマーカーを非表示にする場合は、role='list'を明示してスクリーンリーダーでのリスト認識を維持してください。

参考リンク