list-style-typeのサンプル

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;
}
  • サンプル
  • サンプル
  • サンプル

Author: 小清水 和真

WebディレクションからWebザイン・コーディングを主に行っております。 2021年株式会社を設立。講師もしております。

コメントを残す