基礎

リストスタイルタイプ

list-style-typeプロパティ

最終更新日：2023-11-27
公開日：2016-08-09

list-style-typeプロパティはリストの右に表示されるマーカー（アイコン）を指定することができます。

初期値
disc
継承
継承あり
適用できる要素
リストアイテム要素

list-style-typeプロパティに指定できる値

list-style-typeプロパティには次のような値を設定することができます。

値	内容
`disc`	黒丸（初期値）
`none`	マーカーなし
`circle`	黒縁の丸
`square`	四角
`decimal`	数字
`decimal-leading-zero`	二桁目に「`0`」を置いた数字
`cjk-decimal`	漢数字
`cjk-ideographic`	漢数字（`trad-chinese-informal`と同様の表記）
`hiragana`	ひらがなの50音順
`hiragana-iroha`	ひらがなのいろは順
`katakana`	カタカナの50音順
`katakana-iroha`	カタカナのイロハ順
`japanese-formal`	日本の公的な場で使用される数値表記（壱、弐、参、四、伍...）
`japanese-informal`	日本の日常的に使用される数値表記
`cjk-earthly-branch`	漢字の十二支。`13`以降は漢数字 `cjk-decimal` の表記。（Firefoxでは「`-moz-cjk-earthly-branch`」）
`cjk-heavenly-stem`	漢字の十干。`11`以降は漢数字 `cjk-decimal` の表記。（Firefoxでは「`-moz-cjk-heavenly-stem`」）
`lower-roman`	小文字のローマ数字
`upper-roman`	大文字のローマ数字
`lower-greek`	小文字のギリシャ語
`lower-latin`	小文字のラテン語（アルファベット）
`upper-latin`	大文字のラテン語（アルファベット）
`lower-alpha`	小文字のアルファベット
`upper-alpha`	大文字のアルファベット
`arabic-indic`	インド数字（Firefoxでは「`-moz-arabic-indic`」）
`armenian`	アルメニア語の数値表記
`lower-armenian`	アルメニア語の小文字の数値表記
`upper-armenian`	アルメニア語の大文字の数値表記
`bengali`	ベンガル語の数値表記（Firefoxでは「`-moz-bengali`」）
`cambodian`	カンボジア語の数値表記
`khmer`	クメール語の数値表記
`devanagari`	デーヴァナーガリーの数値表記（Firefoxでは「`-moz-devanagari`」）
`ethiopic-numeric`	エチオピア語の数値表記
`geogian`	ジョージア語の数値表記
`gujarati`	グジャラート語の数値表記（Firefoxでは「`-moz-gujarati`」）
`gurmukhi`	グルムキー語の数値表記（Firefoxでは「`-moz-gurmukhi`」）
`hebrew`	ヘブライ語の数値表記
`kannada`	カンナダ語の数値表記（Firefoxでは「`-moz-kannada`」）
`korean-hangul-formal`	韓国語のハングルの数値表記
`korean-hanja-formal`	韓国語の公的な漢数字
`korean-hanja-informal`	韓国語の漢数字
`lao`	ラオス語の数値表記（Firefoxでは「`-moz-lao`」）
`malayalam`	マラヤーラム語の数値表記（Firefoxでは「`-moz-malayalam`」）
`mongolian`	モンゴル語の数値表記
`myanmar`	ミャンマー語（ビルマ語）の数値表記（Firefoxでは「`-moz-myanmar`」）
`oriya`	オリヤー語の数値表記（Firefoxでは「`-moz-oriya`」）
`persian`	ペルシャ語の数値表記（Firefoxでは「`-moz-persian`」）
`tamil`	タミル語の数値表記（Firefoxでは「`-moz-tamil`」）
`telugu`	テルグ語の数値表記（Firefoxでは「`-moz-telugu`」）
`thai`	タイ語の数値表記（Firefoxでは「`-moz-thai`」）
`tibetan`	チベット語の数値表記（Firefoxでは「`-moz-tibetan`」）
`simp-chinese-formal`	公的な簡体字中国語の数値表記
`simp-chinese-informal`	日常的な簡体字中国語の数値表記
`trad-chinese-formal`	公的な繁体字中国語の数値表記
`trad-chinese-informal`	日常的な繁体字中国語の数値表記

以降はlist-style-typeプロパティにそれぞれの値を指定したコード例と、ブラウザの表示例です。

使用例: disc（黒丸）

list-style-typeプロパティの初期値になっている「disc」を指定した例です。
マーカーは黒丸になり、よく見かける標準的なリストの表示になります。

CSS コード例

.list1 {
  list-style-type: disc;
}

HTML コード例

<ul class="list1">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ul>

使用例: none（非表示）

list-style-typeプロパティに「none」を指定した例です。
マーカーが非表示のリストになります。

CSS コード例

.list2 {
  list-style-type: none;
}

HTML コード例

<ul class="list2">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ul>

使用例: circle（黒縁の丸）

list-style-typeプロパティに「circle」を指定した例です。
マーカーが黒縁の丸になったリストの表示になります。

CSS コード例

.list3 {
  list-style-type: circle;
}

HTML コード例

<ul class="list3">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ul>

使用例: square（四角）

list-style-typeプロパティに「circle」を指定した例です。
マーカーが黒縁の丸になったリストの表示になります。

CSS コード例

.list4 {
  list-style-type: square;
}

HTML コード例

<ul class="list4">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ul>

使用例: decimal（数字順）

list-style-typeプロパティに「decimal」を指定した例です。
マーカーが1から始まる数字順になったリストの表示になります。

CSS コード例

.list5 {
  list-style-type: decimal;
}

HTML コード例

<ol class="list5">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: decimal-leading-zero（二桁目を0で埋めた数字順）

list-style-typeプロパティに「decimal-leading-zero」を指定した例です。
マーカーは「decimal」と同様に1から始まる数字順になりますが、二桁目を0で埋めたリストの表示になります。

CSS コード例

.list6 {
  list-style-type: decimal-leading-zero;
}

HTML コード例

<ol class="list6">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

list-style-type: decimal-leading-zero; の表示例

使用例: cjk-decimal（漢数字順）

list-style-typeプロパティに「cjk-decimal」を指定した例です。
マーカーは漢字で一、二、三...の順（2桁目以降は「一〇」）でリストを表示します。

CSS コード例

.list7 {
  list-style-type: cjk-decimal;
}

HTML コード例

<ol class="list7">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: cjk-ideographic（漢数字順）

list-style-typeプロパティに「cjk-ideographic」を指定した例です。
マーカーは「cjk-decimal」と同様に漢字で一、二、三...の順で表示しますが、2桁目以降は十一、十二、十三で表示するリストを表示します。

CSS コード例

.list8 {
  list-style-type: cjk-ideographic;
}

HTML コード例

<ol class="list8">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

なお、20は「二十」、100は「一百」になります。

使用例: hiragana（ひらがなの50音順）

list-style-typeプロパティに「hiragana」を指定した例です。
マーカーは「あ」「い」「う」...とあいうえお順になったリストを表示します。

CSS コード例

.list9 {
  list-style-type: hiragana;
}

HTML コード例

<ol class="list9">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

なお、リストが「ん」まで行くと、「ああ」「あい」「あう」と2桁目もあいうえお順になって表示されていきます。

使用例: hiragana-iroha（ひらがなのいろは順）

list-style-typeプロパティに「hiragana-iroha」を指定した例です。
マーカーは「い」「ろ」「は」...といろは順になったリストを表示します。

CSS コード例

.list10 {
  list-style-type: hiragana-iroha;
}

HTML コード例

<ol class="list10">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: katakana（カタカナの50音順）

list-style-typeプロパティに「katakana」を指定した例です。
マーカーは「ア」「イ」「ウ」...とカタカナのアイウエオ順になったリストを表示します。

CSS コード例

.list11 {
  list-style-type: katakana;
}

HTML コード例

<ol class="list11">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: katakana-iroha（カタカナのイロハ順）

list-style-typeプロパティに「katakana-iroha」を指定した例です。
マーカーは「イ」「ロ」「ハ」...とカタカナのイロハ順になったリストを表示します。

CSS コード例

.list12 {
  list-style-type: katakana-iroha;
}

HTML コード例

<ol class="list12">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: japanese-formal（日本の公的な場で使用される数値表記）

list-style-typeプロパティに「japanese-formal」を指定した例です。
マーカーは漢数字の「壱」「弐」「参」...の順になったリストを表示します。

CSS コード例

.list13 {
  list-style-type: japanese-formal;
}

HTML コード例

<ol class="list13">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: japanese-informal（日本の日常的に使用される数値表記）

list-style-typeプロパティに「japanese-informal」を指定した例です。
マーカーは漢数字の「一」「二」「三」...の順になったリストを表示します。

CSS コード例

.list14 {
  list-style-type: japanese-informal;
}

HTML コード例

<ol class="list14">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

list-style-type: japanese-informal; の表示例

使用例: cjk-earthly-branch（漢字の十二支）

list-style-typeプロパティに「cjk-earthly-branch」を指定した例です。
マーカーは漢字の十二支の順（子、丑、寅、卯...）になったリストを表示します。

CSS コード例

.list15 {
  list-style-type: cjk-earthly-branch;
}

HTML コード例

<ol class="list15">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

list-style-type: cjk-earthly-branch; の表示例

なお、リストが12の「亥」までいったら、13以降は「cjk-decimal」と同じ表記になります。

使用例: cjk-heavenly-stem（漢字の十干）

list-style-typeプロパティに「cjk-heavenly-stem」を指定した例です。
マーカーは漢字の十二支の順（甲、乙、丙...）になったリストを表示します。

CSS コード例

.list16 {
  list-style-type: cjk-heavenly-stem;
}

HTML コード例

<ol class="list16">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

list-style-type: cjk-heavenly-stem; の表示例

なお、リストが10の「癸」までいったら、11以降は「cjk-decimal」と同じ表記になります。

使用例: lower-roman（小文字のローマ数字）

list-style-typeプロパティに「lower-roman」を指定した例です。
マーカーが小文字のローマ数字になったリストの表示になります。

CSS コード例

.list17 {
  list-style-type: lower-roman;
}

HTML コード例

<ol class="list17">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

使用例: upper-roman（大文字のローマ数字）

list-style-typeプロパティに「upper-roman」を指定した例です。
マーカーが大文字のローマ数字になったリストの表示になります。

CSS コード例

.list18 {
  list-style-type: upper-roman;
}

HTML コード例

<ol class="list18">
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
  <li>リストのマーカーを変える</li>
</ol>

記事一覧