提起:
- css の list-style と list-style-type , 普段なんとなく併用していることが多い.
- ul / ol / dl に指定することもあるし, その子要素 li に指定してもなんとなく使える.
ホントはなんか推奨される書き方があるんじゃないの?
結論: どっちを使ってもいい
list-style と list-style-type どちらも ul / ol / dl に指定しても良いし, li に指定しても良い.
ul / ol / dl に指定するとスタイルが子要素に継承され, リスト全体に適用することができる.
背景: もうちょっと掘り下げたい人向け
MDN web docs の list-style
の項には以下の記述がある.
このプロパティは以下の CSS プロパティの一括指定です。
- list-style-image
- list-style-position
- list-style-type
要はリストの行頭に使う記号(disc: 黒丸 とか circle: 白丸 etcetc.), 画像, 行頭の記号の配置(リストの内か外か)なんかをまるっと指定できるプロパティらしい.
.
これらのスタイルを指定する順番は
list-style : 記号 画像 配置;
cf:
ul { list-style: disc url('~/assets/img/maru.svg') inside; }
補遺: 参考リンク
- list-style | MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/list-style - list-style - リストに関して一括して指定する | 日経クロステック(xTECH)
https://xtech.nikkei.com/it/article/Reference/20091124/340996/