CSS list-style-type| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

list-style-type CSS プロパティとは

トピック：リスト項目のマーカーの種類を指定する、ことができる リストスタイルタイプ(リストアイテムマーカーのスタイル設定方法)を指定するために使用される

プロパティ list-style-type

    基本 書式：セレクタ {list-style-type:値;}

実例 コード 1

いくつかの異なるリストスタイルを設定する：サンプル コードを試す
     ul.a {list-style-type: circle;}
     ul.b {list-style-type: square;}
     ol.c {list-style-type: upper-roman;}
     ol.d {list-style-type: lower-alpha;}
    情報：
  • あらかじめ定義されたカウンタスタイル（ディスク、正方形、ローマ数字など）の1つとしてリストスタイルタイプを指定するか、独自のカスタマイズされたカウンタスタイルを使用することができる。@counter-styleを使用して独自のカスタムカウンタスタイルを作成し、list-style-typeそのカウンタスタイルの名前を値として追加するだけでそのスタイルを参照できる
    トピック：
  • 値としてstringを指定することもできます（文字列がマーカーになります）。又は 、symbols()、カスタムマーカースタイルを追加するための簡単な方法として関数を使用することもできます。

プロパティ 定義と使用法

デフォルト値・初期値 :disc
適用対象 : リスト項目
継承 :継承する
メディア :visual
計算値 :指定値
CSS Version CSS1 ～
アニメーションの種類 :個別 アニメーション可能なプロパティ 一覧
JavaScript 構文 object.style.listStyleType="funWebref"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha|none|initial|inherit

プロパティ値

値説明
discこのマーカーは
  • シンボリック
  • 塗りつぶされた円です。
circleこのマーカーは
  • シンボリック
  • 中空円です。
squareこのマーカーは
  • シンボリック
  • 塗りつぶされた正方形です。
disclosure-openこのマーカーは
  • シンボリック
  • <details> などの展開ウィジェットを開いていることを示すシンボル
disclosure-closed このマーカーは
  • シンボリック
  • <details> などの展開ウィジェットを閉じていることを示すシンボル
decimal このマーカーは
  • 10進数
  • 1から始まる。
  • (例えば、1,2,3,...）
cjk-decimal このマーカーは
  • 漢数字
  • 一から始まる。
  • (一, 二, 三, ..., 九八, 九九, 一〇〇)
cjk-ideographic このマーカーは
  • 漢数字
  • 一から始まる。
  • (一, 二, 三, ..., 九八, 九九, 一〇〇)
decimal-leading-zero このマーカーは
  • 10進数
  • 最初はゼロから始まる
  • （例えば、01,02,03、... 10,11）
lower-roman このマーカーは
  • 小文字のローマ数字
  • （i、ii、iii、iv、v、...）
upper-roman このマーカーは
  • 大文字のローマ数字
  • （I、II、III、IV、V、...）
lower-greek このマーカーは
  • 小文字の古典 ギリシャ文字
  • アルファ、ベータ、ガンマ、...
  • (a, β, ?, ...)
upper-latin 又は upper-alpha このマーカーはアルファベット・ラテン文字
  • 大文字のASCII文字
  • （A、B、C、... Z）
  • upper-latin は IE7 以下ではサポートされていない
lower-latin 又は lower-alpha このマーカーはアルファベット・ラテン文字
  • 小文字のASCII文字
  • （a、b、c、... z）
  • lower-latin は IE7 以下ではサポートされていない
hiragana このマーカーは
  • 辞書順のひらがな文字
  • 日本語の（あ、い、う、...）
hiragana-iroha このマーカーは
  • いろは順のひらがな文字
  • 日本語の字音順（い、ろ、は、...）
katakana このマーカーは
  • 辞書順のカタカナ文字
  • 日本語の（ア、イ、ウ、...）
katakana-iroha このマーカーは
  • イロハ順のカタカナ文字
  • 日本語の字音順（イ、ロ、ハ、...）
japanese-formal このマーカーは
  • 日本語の公的な数値表記
  • （壱萬壱阡壱百壱拾壱）
korean-hangul-formal このマーカーは
  • 朝鮮のハングルのナンバリング
  • (일만 일천일백일십일)
korean-hanja-informal このマーカーは
  • 朝鮮の漢数字
  • (萬 一千百十一)
simp-chinese-formal このマーカーは
  • 公的な簡体字中国語のナンバリング
  • (壹万壹仟壹佰壹拾壹)
armenian このマーカーは
  • 伝統的なアルメニアの番号付け
  • （ayb / ayp、ben / pen、gim / keem、...）
georgian このマーカーは
  • 伝統的なグルジアの番号付け
  • (an, ban, gan, ... he, tan, in ...)
hebrew このマーカーは
  • 伝統的なヘブライ語の番号付け
  • (ג, ב, א, ...)
noneマーカーを指定しません。
inheritこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する
unsetこの値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
list-style-typeChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯3.5フルサポート◯1
arabic-indicサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
armenianフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯6フルサポート◯1
bengaliサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
cjk-decimalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
cjk-earthly-branchサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
cjk-heavenly-stemサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
cjk-ideographicフルサポート◯1サポートなし✖フルサポート◯1サポートなし✖フルサポート◯15 不明
decimal-leading-zeroフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯8フルサポート◯1
devanagariサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
disclosure-closedサポートなし✖サポートなし✖フルサポート◯33サポートなし✖サポートなし✖サポートなし✖
disclosure-openサポートなし✖サポートなし✖フルサポート◯33サポートなし✖サポートなし✖サポートなし✖
ethiopic-numericサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
georgianフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯6フルサポート◯1
gujaratiサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
gurmukhiサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
hebrewフルサポート◯1サポートなし✖フルサポート◯1サポートなし✖フルサポート◯15 不明
hiraganaフルサポート◯1サポートなし✖フルサポート◯1サポートなし✖フルサポート◯15 不明
hiragana-irohaフルサポート◯1サポートなし✖フルサポート◯1サポートなし✖フルサポート◯15 不明
japanese-formalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
japanese-informalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
kannadaサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
katakanaフルサポート◯1サポートなし✖フルサポート◯1サポートなし✖フルサポート◯15 不明
katakana-irohaフルサポート◯1サポートなし✖フルサポート◯1サポートなし✖フルサポート◯15 不明
khmerサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
korean-hangul-formalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
korean-hanja-formalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
korean-hanja-informalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
laoサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
lower-greekフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯6フルサポート◯1
lower-latinフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯6フルサポート◯1
malayalamサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
mongolianサポートなし✖サポートなし✖フルサポート◯33サポートなし✖サポートなし✖サポートなし✖
myanmarサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
oriyaサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
persianサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
simp-chinese-formalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
simp-chinese-informalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
tamilサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
teluguサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
thaiサポートなし✖サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖
trad-chinese-formalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
trad-chinese-informalサポートなし✖サポートなし✖フルサポート◯28サポートなし✖サポートなし✖サポートなし✖
upper-latinフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯6フルサポート◯1
<string>サポートなし✖サポートなし✖フルサポート◯39サポートなし✖サポートなし✖サポートなし✖
symbolsサポートなし✖ 不明フルサポート◯35サポートなし✖サポートなし✖サポートなし✖

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
list-style-typeAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯ありフルサポート◯ありフルサポート◯12フルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
arabic-indic 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
armenian 不明フルサポート◯ありフルサポート◯ありフルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
bengali 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
cjk-decimal 不明 不明 不明 不明 不明 不明サポートなし✖
cjk-earthly-branch 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
cjk-heavenly-stem 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
cjk-ideographic 不明 不明 不明 不明 不明 不明 不明
decimal-leading-zero 不明 不明 不明 不明 不明 不明 不明
devanagari 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
disclosure-closed 不明 不明 不明 不明 不明 不明サポートなし✖
disclosure-open 不明 不明 不明 不明 不明 不明サポートなし✖
ethiopic-numeric 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
georgian 不明フルサポート◯ありフルサポート◯ありフルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
gujarati 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
gurmukhi 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
hebrew 不明 不明 不明 不明 不明 不明 不明
hiragana 不明 不明 不明 不明 不明 不明 不明
hiragana-iroha 不明 不明 不明 不明 不明 不明 不明
japanese-formal 不明 不明 不明 不明 不明 不明サポートなし✖
japanese-informal 不明 不明 不明 不明 不明 不明サポートなし✖
kannada 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
katakana 不明 不明 不明 不明 不明 不明 不明
katakana-iroha 不明 不明 不明 不明 不明 不明 不明
khmer 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
korean-hangul-formal 不明 不明 不明 不明 不明 不明サポートなし✖
korean-hanja-formal 不明 不明 不明 不明 不明 不明サポートなし✖
korean-hanja-informal 不明 不明 不明 不明 不明 不明サポートなし✖
lao 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
lower-greek 不明フルサポート◯ありフルサポート◯ありフルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
lower-latin 不明フルサポート◯ありフルサポート◯ありフルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
malayalam 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
mongolian 不明 不明 不明 不明 不明 不明サポートなし✖
myanmar 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
oriya 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
persian 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
simp-chinese-formal 不明 不明 不明 不明 不明 不明サポートなし✖
simp-chinese-informal 不明 不明 不明 不明 不明 不明サポートなし✖
tamil 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
telugu 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
thai 不明 不明 不明フルサポート◯33 不明 不明サポートなし✖
trad-chinese-formal 不明 不明 不明 不明 不明 不明サポートなし✖
trad-chinese-informal 不明 不明 不明 不明 不明 不明サポートなし✖
upper-latin 不明フルサポート◯ありフルサポート◯ありフルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
<string> 不明 不明 不明 不明 不明 不明サポートなし✖
symbolsサポートなし✖サポートなし✖ 不明フルサポート◯35サポートなし✖サポートなし✖サポートなし✖
：list-style-type 関連記事
CSS list-style-type| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS list-style-type | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS