CSS リストの項目を変更するサンプル(list-style-type)

CSSのul要素とli要素のリストの項目を変更するサンプルです。
list-style-typeプロパティを使用します。

list-style-typeプロパティ

list-style-type : 値

値	説明
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	項目を表示しない
値を継承する

リストの項目のデザインを変更します。
上記は主な値です。
以下はMDNのlist-style-typeプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

サンプル

list-style-typeプロパティを使用したサンプルです。

disc
-
-

circle
-
-

square
-
-

decimal
-
-

decimal-leading-zero
-
-

lower-roman
-
-

upper-roman
-
-

lower-greek
-
-

lower-alpha
-
-

lower-latin
-
-

upper-alpha
-
-

upper-latin
-
-

katakana-iroha
-
-

hiragana-iroha
-
-

none
-
-

コード

上記サンプルのコードです。
2-16行目は、list-style-typeプロパティを使用しています。

<style>
#u1{list-style-type:disc;}
#u2{list-style-type:circle;}
#u3{list-style-type:square;}
#u4{list-style-type:decimal;}
#u5{list-style-type:decimal-leading-zero;}
#u6{list-style-type:lower-roman;}
#u7{list-style-type:upper-roman;}
#u8{list-style-type:lower-greek;}
#u9{list-style-type:lower-alpha;}
#u10{list-style-type:lower-latin;}
#u11{list-style-type:upper-alpha;}
#u12{list-style-type:upper-latin;}
#u13{list-style-type:katakana-iroha;}
#u14{list-style-type:hiragana-iroha;}
#u15{list-style-type:none;}
</style>

<ul id="u1"><li>disc</li><li>-</li><li>-</li></ul>
<ul id="u2"><li>circle</li><li>-</li><li>-</li></ul>
<ul id="u3"><li>square</li><li>-</li><li>-</li></ul>
<ul id="u4"><li>decimal</li><li>-</li><li>-</li></ul>
<ul id="u5"><li>decimal-leading-zero</li><li>-</li><li>-</li></ul>
<ul id="u6"><li>lower-roman</li><li>-</li><li>-</li></ul>
<ul id="u7"><li>upper-roman</li><li>-</li><li>-</li></ul>
<ul id="u8"><li>lower-greek</li><li>-</li><li>-</li></ul>
<ul id="u9"><li>lower-alpha</li><li>-</li><li>-</li></ul>
<ul id="u10"><li>lower-latin</li><li>-</li><li>-</li></ul>
<ul id="u11"><li>upper-alpha</li><li>-</li><li>-</li></ul>
<ul id="u12"><li>upper-latin</li><li>-</li><li>-</li></ul>
<ul id="u13"><li>katakana-iroha</li><li>-</li><li>-</li></ul>
<ul id="u14"><li>hiragana-iroha</li><li>-</li><li>-</li></ul>
<ul id="u15"><li>none</li><li>-</li><li>-</li></ul>