2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

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;
}

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です