[CSS] リストマーカーのスタイルを指定する(list-style-type)

リストマーカーのスタイルを変更するには、「list-style-type」を使用します。

サンプルソース

例)リストのスタイルを「白丸」にする

【結果】

  • いぬ
  • ねこ
  • うさぎ

リストマーカースタイル一覧

リストマーカーには以下のようなスタイルを指定できます。

【list-style-typeの値】
スタイルサンプル
noneなし
  • いぬ
  • ねこ
  • うさぎ
disc黒丸
  • いぬ
  • ねこ
  • うさぎ
circle白丸
  • いぬ
  • ねこ
  • うさぎ
square四角
  • いぬ
  • ねこ
  • うさぎ
lower-romanローマ数字
(小文字)
  • いぬ
  • ねこ
  • うさぎ
upper-romanローマ数字
(大文字)
  • いぬ
  • ねこ
  • うさぎ
lower-greekギリシャ文字
(小文字)
  • いぬ
  • ねこ
  • うさぎ
upper-greekギリシャ文字
(大文字)
  • いぬ
  • ねこ
  • うさぎ
lower-alphaアルファベット
(小文字)
  • いぬ
  • ねこ
  • うさぎ
upper-alphaアルファベット
(大文字)
  • いぬ
  • ねこ
  • うさぎ
decimal数字
  • いぬ
  • ねこ
  • うさぎ
decimal-leading-zero数字
(ゼロ埋め)
  • いぬ
  • ねこ
  • うさぎ

備考

  • リストマーカーのデフォルトは、desc(黒丸)です。

コメント

タイトルとURLをコピーしました