クイックCSS早見表(list-style)

リストマーカーのデザインをを整えるCSSのコードをまとめました。

 

マーカーの種類(list-style-type)

CSS

 

説明 サンプル
none マーカー非表示
  • サンプル
  • サンプル
  • サンプル
disc 黒丸
  • サンプル
  • サンプル
  • サンプル
circle 白丸
  • サンプル
  • サンプル
  • サンプル
square 四角
  • サンプル
  • サンプル
  • サンプル
decimal 数字
  • サンプル
  • サンプル
  • サンプル
upper-alpha 大文字アルファベット
  • サンプル
  • サンプル
  • サンプル
lower-alpha 小文字アルファベット
  • サンプル
  • サンプル
  • サンプル
upper-roman 大文字ローマ字
  • サンプル
  • サンプル
  • サンプル
lower-roman 小文字ローマ字
  • サンプル
  • サンプル
  • サンプル
decimal-leading-zero 数字二桁表示
  • サンプル
  • サンプル
  • サンプル
lower-greek 小文字ギリシャ文字
  • サンプル
  • サンプル
  • サンプル
upper-latin 大文字ラテン語
  • サンプル
  • サンプル
  • サンプル
lower-latin 小文字ラテン語
  • サンプル
  • サンプル
  • サンプル
hebrew ヘブライ語
  • サンプル
  • サンプル
  • サンプル
armenian アルメニア数字
  • サンプル
  • サンプル
  • サンプル
georgian グルジア数字
  • サンプル
  • サンプル
  • サンプル
cjk-ideographic 漢数字
  • サンプル
  • サンプル
  • サンプル
hiragana ひらがな
  • サンプル
  • サンプル
  • サンプル
katakana カタカナ
  • サンプル
  • サンプル
  • サンプル
hiragana-iroha いろは
  • サンプル
  • サンプル
  • サンプル
katakana-iroha イロハ
  • サンプル
  • サンプル
  • サンプル

 

マーカーの位置(list-style-position)

CSS

 

説明 サンプル
outside リストボックスの外側にマーカーを表示する
  • サンプル
  • サンプル
  • サンプル
inside リストボックスの内側にマーカーを表示する
  • サンプル
  • サンプル
  • サンプル

 

 

おすすめの記事