list-style-typeのサンプル

Posted on by

list-style

list-styleで数字や、ドットはどれだっけ？てなりますので備忘録として記載いたします。

黒丸

li.hoge{
list-style-type: disc;
}
  • サンプル
  • サンプル
  • サンプル

白丸

li.hoge{
list-style-type: circle;
}
  • サンプル
  • サンプル
  • サンプル

黒四角

li.hoge{
list-style-type: square;
}
  • サンプル
  • サンプル
  • サンプル

小文字のローマ数字

li.hoge{
list-style-type: lower-roman;
}
  • サンプル
  • サンプル
  • サンプル

大文字のローマ数字

li.hoge{
list-style-type:upper-roman;
}
  • サンプル
  • サンプル
  • サンプル

小文字のギリシャ文字

li.hoge{
list-style-type:lower-greek;
}
  • サンプル
  • サンプル
  • サンプル

算用数字

li.hoge{
list-style-type:decimal;
}
  • サンプル
  • サンプル
  • サンプル

先頭に0をつけた算用数字 

li.hoge{
list-style-type:decimal-leading-zero;
}
  • サンプル
  • サンプル
  • サンプル

漢数字

li.hoge{
list-style-type:cjk-ideographic;
}
  • サンプル
  • サンプル
  • サンプル

イロハニホヘト順

li.hoge{
list-style-type:katakana-iroha;
}
  • サンプル
  • サンプル
  • サンプル

大文字のアルファベット

li.hoge{
list-style-type:upper-alpha;
}
  • サンプル
  • サンプル
  • サンプル