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

list-style-typeとは

list-style-typeは、ul要素とli要素のリストの項目のデザインを変更します。

書き方 list-style-type : 値
黒い丸 (disc)
白い丸 (circle)
黒い四角 (square)
10進数の数値 (decimal)
10進数の数値の前に0がつく (decimal-leading-zero)
小文字のローマ数字 (lower-roman)
大文字のローマ数字 (upper-roman)
小文字ギリシャ文字 (lower-greek)
小文字アルファベット (lower-alpha)
小文字アルファベット (lower-latin)
大文字アルファベット (upper-alpha)
大文字アルファベット (upper-latin)
かたかなのイロハ (katakana-iroha)
ひらがなのいろは (hiragana-iroha)
項目を表示しない (none)
継承 値を継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

    黒い丸 (disc)

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

    白い丸 (circle)

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

    黒い四角 (square)

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

    10進数の数値 (decimal)

    • decimal
    • -
    • -
    <style>
      .u1 {
        list-style-type: decimal; /* 10進数の数値 */
      }
    </style>
    <ul class="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 class="u1">
      <li>decimal-leading-zero</li>
      <li>-</li>
      <li>-</li>
    </ul>
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    項目を表示しない (none)

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

    関連の記事

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

    △上に戻る