list-style-type

list-style-type は li 要素の外観を設定する CSS プロパティです。

/* マーカーのタイプの一例 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
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;

<div class="grid">
  <div class="row">
    <div class="cell">
      <ul>
        <li>Banana</li>
        <li>Apple</li>
        <li>Peach</li>
        <li>Platypus</li>
        <li>Orange</li>
      </ul>
    </div>
    <div class="note">
      <p>
        list-style-type:
        <select>
          <option>none</option>
          <option>inherit</option>
          <optgroup label="Custom types">
            <option>"Fruit or… "</option>
            <option>symbols(symbolic '○' '●')</option>
            <option>custom-emoji</option>
          </optgroup>
          <optgroup label="Symbolic types">
            <option>disc</option>
            <option>circle</option>
            <option>square</option>
            <option>disclosure-open</option>
            <option>disclosure-closed</option>
          </optgroup>
          <optgroup label="Alphabetic types">
            <option>lower-alpha</option>
            <option>lower-latin</option>
            <option>upper-alpha</option>
            <option>upper-latin</option>
            <option>cjk-earthly-branch</option>
            <option>cjk-heavenly-stem</option>
            <option>lower-greek</option>
            <option>hiragana</option>
            <option>hiragana-iroha</option>
            <option>katakana</option>
            <option>katakana-iroha</option>
          </optgroup>
          <optgroup label="Numeric types">
            <option>decimal</option>
            <option>decimal-leading-zero</option>
            <option>arabic-indic</option>
            <option>armenian</option>
            <option>upper-armenian</option>
            <option>lower-armenian</option>
            <option>bengali</option>
            <option>cambodian</option>
            <option>khmer</option>
            <option>cjk-decimal</option>
            <option>devanagari</option>
            <option>georgian</option>
            <option>gujarati</option>
            <option>gurmukhi</option>
            <option>hebrew</option>
            <option>kannada</option>
            <option>lao</option>
            <option>malayalam</option>
            <option>mongolian</option>
            <option>myanmar</option>
            <option>oriya</option>
            <option>persian</option>
            <option>lower-roman</option>
            <option>upper-roman</option>
            <option>tamil</option>
            <option>telugu</option>
            <option>thai</option>
            <option>tibetan</option>
          </optgroup>
        </select>
      </p>
      "custom-emoji" Assume the following rule:
      <pre>@counter-style custom-emoji {
  system: cyclic;
  symbols: &#x1F600; &#x1F60D; &#x1F61D; &#x1F631;
  suffix: " ";
}</pre>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
  background: #EEE;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1;
  min-width: 150px;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: left;
  flex: 1;
  white-space: nowrap;
}

.note p { margin-top: 0; }
.note pre { margin-bottom: 0; }

@counter-style custom-emoji {
  system: cyclic;
  symbols: "\1F600" "\1F60D" "\1F61D" "\1F631";
  suffix: " ";
}

ul {
  display: inline-block;
  text-align: left;
  font-family: sans-serif;
  line-height: 1.5;
}

function updateList () {
  var UL  = document.querySelector('ul');
  var val = document.querySelector('select').value;

  console.log(UL)
  console.log(val)

  UL.style.listStyleType = val;
}

window.addEventListener('load', function () {
  var select = document.querySelector('select');
  var n = select.options.length
  select.selectedIndex = Math.floor(Math.random() * n);

  updateList()
})

window.addEventListener('input', updateList)

ビュレット及びマーカーの色には、リストアイテムの color プロパティの計算値が適用されます。

構文

The list-style-type property may be defined as any one of:

• a <custom-ident> value
• a symbols() value
• a <string> value
• the keyword none.

値

symbols()

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

none

マーカーは表示されません。

<string>

特定の文字列を、リストのマーカーとして使用します。

<custom-ident>

@counter-style の値またはあらかじめ定義されたスタイルにマッチする識別子です:

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

• Example

armenian

• 伝統的なアルメニア語のナンバリング
• (ayb/ayp, ben/pen, gim/keemm, …)

bengali

-moz-bengali

• Example

cambodian *

• Example
• khmer と同義

cjk-earthly-branch

-moz-cjk-earthly-branch

• Example

cjk-heavenly-stem

-moz-cjk-heavenly-stem

• Example

cjk-ideographic

• trad-chinese-informal と同義
• 例: 一萬一千一百一十一

devanagari

-moz-devanagari

• Example

ethiopic-numeric

• Example

georgian

• 伝統的なグルジア語のナンバリング
• (an, ban, gan, … he, tan, in …)

gujarati

-moz-gujarati

• Example

gurmukhi

-moz-gurmukhi

• Example

hebrew

• 伝統的なヘブライ語のナンバリング

hiragana

• あ、い、う、え、お、か、き…
• 日本語の「あいうえお」

hiragana-iroha

• い、ろ、は、に、ほ、へ、と…
• いろは歌は日本語の古い字音の並びです

japanese-formal

• 法的または財務の文書で使用される、日本語の公的な数値表記
• 例: 壱萬壱阡壱百壱拾壱
• 似ている別の文字に書き換えられないようにするための漢字

japanese-informal

• 公的な場では使用しない、日本語のナンバリング

kannada

-moz-kannada

• Example

katakana

• ア、イ、ウ、エ、オ、カ、キ…
• 日本語の「あいうえお」

katakana-iroha

• イ、ロ、ハ、ニ、ホ、ヘ、ト…
• いろは歌は日本語の古い字音の並びです

khmer

-moz-khmer

• Example

korean-hangul-formal

• 朝鮮のハングルのナンバリング
• (일만 일천일백일십일)

korean-hanja-formal

• 公的な朝鮮の漢数字
• 例: 壹萬 壹仟壹百壹拾壹

korean-hanja-informal

• 朝鮮の漢数字
• 例: 萬 一千百十一

lao

-moz-lao

• Example

lower-armenian *

• Example

malayalam

-moz-malayalam

• Example

mongolian

• Example

myanmar

-moz-myanmar

• Example

oriya

-moz-oriya

• Example

persian

-moz-persian

• Example

simp-chinese-formal

• 公的な簡体字中国語のナンバリング
• 例: 壹万壹仟壹佰壹拾壹

simp-chinese-informal

• 公的な場では使用しない、簡体字中国語のナンバリング
• E.g. 一万一千一百一十一

tamil

-moz-tamil

• Example

telugu

-moz-telugu

• Example

thai

-moz-thai

• Example

tibetan *

• Example

trad-chinese-formal

• 公的な繁体字中国語のナンバリング
• 例: 壹萬壹仟壹佰壹拾壹

trad-chinese-informal

• 公的な場では使用しない、繁体字中国語のナンバリング
• 例: 一萬一千一百一十一

upper-armenian *

• Example

disclosure-open

• <details> などの展開ウィジェットを開いていることを示すシンボル

disclosure-closed

• <details> などの展開ウィジェットを閉じていることを示すシンボル

非標準の拡張

Mozilla (Firefox)、Blink (Chrome and Opera)、WebKit (Safari) が拡張した、様々な言語のマーカー。ブラウザ実装状況の表で、ブラウザがどの拡張をサポートしているかを確認してください。

-moz-ethiopic-halehame

• Example

-moz-ethiopic-halehame-am

• Example

ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-er

• Example

ethiopic-halehame-ti-et

-moz-ethiopic-halehame-ti-et

• Example

hangul

-moz-hangul

• Example
• Example
• Example

hangul-consonant

-moz-hangul-consonant

• Example
• Example
• Example

urdu

-moz-urdu

• Example

形式文法

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

結果

注記

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

仕様

ブラウザー実装状況

関連情報

• list-style 関連 CSS プロパティ: list-style 、 list-style-image 、 list-style-position