CSS list-style-type リストの項目を指定する

list-style-typeプロパティ

list-style-type : 値

list-style-typeプロパティは、ul要素とli要素のリストの項目を指定します。

説明
disc 黒い丸 (初期値)
circle 白い丸
square 黒い四角 
decimal 10進数の数値
decimal-leading-zero 10進数の数値の前に0がつく
lower-roman 小文字のローマ数字
upper-roman 大文字のローマ数字
lower-greek 小文字ギリシャ文字
lower-alpha 小文字アルファベット
lower-latin 小文字アルファベット
upper-alpha 大文字アルファベット
upper-latin 大文字アルファベット
katakana-iroha かたかなのイロハ
hiragana-iroha ひらがなのいろは
none 項目を表示しない
値を継承する

ul要素とli要素のリストの項目を指定するサンプルです。

黒い丸 (disc)

  • disc
  • -
  • -
<style>
  #u1 {
    list-style-type: disc; /* 黒い丸 */
  }
</style>
<ul id="u1">
  <li>disc</li>
  <li>-</li>
  <li>-</li>
</ul>

白い丸 (circle)

  • circle
  • -
  • -
<style>
  #u1 {
    list-style-type: circle; /* 白い丸 */
  }
</style>
<ul id="u1">
  <li>circle</li>
  <li>-</li>
  <li>-</li>
</ul>

黒い四角 (square)

  • square
  • -
  • -
<style>
  #u1 {
    list-style-type: square; /* 黒い四角 */
  }
</style>
<ul id="u1">
  <li>square</li>
  <li>-</li>
  <li>-</li>
</ul>

10進数の数値 (decimal)

  • decimal
  • -
  • -
<style>
  #u1 {
    list-style-type: decimal; /* 10進数の数値 */
  }
</style>
<ul id="u1">
  <li>decimal</li>
  <li>-</li>
  <li>-</li>
</ul>

10進数の数値の前に0がつく (decimal-leading-zero)

  • decimal-leading-zero
  • -
  • -
<style>
  #u1 {
    list-style-type: decimal-leading-zero; /* 10進数の数値の前に0がつく */
  }
</style>
<ul id="u1">
  <li>decimal-leading-zero</li>
  <li>-</li>
  <li>-</li>
</ul>

小文字のローマ数字 (lower-roman)

  • lower-roman
  • -
  • -
<style>
  #u1 {
    list-style-type: lower-roman; /* 小文字のローマ数字 */
  }
</style>
<ul id="u1">
  <li>lower-roman</li>
  <li>-</li>
  <li>-</li>
</ul>

大文字のローマ数字 (upper-roman)

  • upper-roman
  • -
  • -
<style>
  #u1 {
    list-style-type: upper-roman; /* 大文字のローマ数字 */
  }
</style>
<ul id="u1">
  <li>upper-roman</li>
  <li>-</li>
  <li>-</li>
</ul>

小文字ギリシャ文字 (lower-greek)

  • lower-greek
  • -
  • -
<style>
  #u1 {
    list-style-type: lower-greek; /* 小文字ギリシャ文字 */
  }
</style>
<ul id="u1">
  <li>lower-greek</li>
  <li>-</li>
  <li>-</li>
</ul>

小文字アルファベット (lower-alpha)

  • lower-alpha
  • -
  • -
<style>
  #u1 {
    list-style-type: lower-alpha; /* 小文字アルファベット */
  }
</style>
<ul id="u1">
  <li>lower-alpha</li>
  <li>-</li>
  <li>-</li>
</ul>

小文字アルファベット (lower-latin)

  • lower-latin
  • -
  • -
<style>
  #u1 {
    list-style-type: lower-latin; /* 小文字アルファベット */
  }
</style>
<ul id="u1">
  <li>lower-latin</li>
  <li>-</li>
  <li>-</li>
</ul>

大文字アルファベット (upper-alpha)

  • upper-alpha
  • -
  • -
<style>
  #u1 {
    list-style-type: upper-alpha; /* 大文字アルファベット */
  }
</style>
<ul id="u1">
  <li>upper-alpha</li>
  <li>-</li>
  <li>-</li>
</ul>

大文字アルファベット (upper-latin)

  • upper-latin
  • -
  • -
<style>
  #u1 {
    list-style-type: upper-latin; /* 大文字アルファベット */
  }
</style>
<ul id="u1">
  <li>upper-latin</li>
  <li>-</li>
  <li>-</li>
</ul>

かたかなのイロハ (katakana-iroha)

  • katakana-iroha
  • -
  • -
<style>
  #u1 {
    list-style-type: katakana-iroha; /* かたかなのイロハ */
  }
</style>
<ul id="u1">
  <li>katakana-iroha</li>
  <li>-</li>
  <li>-</li>
</ul>

ひらがなのいろは (hiragana-iroha)

  • hiragana-iroha
  • -
  • -
<style>
  #u1 {
    list-style-type: hiragana-iroha; /* ひらがなのいろは */
  }
</style>
<ul id="u1">
  <li>hiragana-iroha</li>
  <li>-</li>
  <li>-</li>
</ul>

項目を表示しない (none)

  • none
  • -
  • -
<style>
  #u1 {
    list-style-type: none; /* 項目を表示しない */
  }
</style>
<ul id="u1">
  <li>none</li>
  <li>-</li>
  <li>-</li>
</ul>

関連の記事

HTML リストを作成するサンプル(ul/li/ol)
CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする

△上に戻る