[CSS] list-style-typeでリストマーカーのスタイルを指定しよう!

SHARE

list-style-typeの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.list-style-typeとは?

list-style-typeプロパティはリストマーカーのスタイルを指定します。

値の指定方法は以下の通りです。

{ list-style-type: 値; }

値の指定方法

  • none
  • 文字列
  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • lower-latin
  • upper-alpha
  • upper-latin
  • cjk-decimal
  • cjk-earthly-branch
  • cjk-heavenly-stem
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha
  • japanese-informal
  • japanese-formal
  • cyclic
  • numeric
  • alphabetic
  • symbolic
  • fixed




2.list-style-typeの使い方

それではlist-style-typeの使い方をみていきましょう。

ol.upper-alpha {
 list-style-type: upper-alpha;
}

上記のようにすることで大文字アルファベットのマーカーが表示されます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。

前の記事

[CSS] list-style-positionでリストマー…

次の記事

[CSS] list-styleでリストマーカーをまとめて指定…