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

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

目次

list-style-typeプロパティ

list-style-typeのサンプルです。
リストの項目を指定します。

<style>
#u1{list-style-type:disc;} /* 黒い丸 (初期値) */
#u2{list-style-type:circle;} /* 白い丸 */
#u3{list-style-type:square;} /* 黒い四角 */
#u4{list-style-type:decimal;} /* 10進数の数値 */
#u5{list-style-type:decimal-leading-zero;} /* 10進数の数値の前に0がつく */
#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>

以下は、実行結果です。

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

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

関連の記事

HTML リストを作成するサンプル(ul/li/ol)
CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字に線を引くサンプル(text-decoration)
CSS 文字の太さを指定するサンプル(font-weight)
CSS 文字を斜体にするサンプル(font-style)

△上に戻る