1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【CSS】list-style: と list-style-type: どう使う?

Last updated at Posted at 2024-04-13

提起:

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

補遺: 参考リンク

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?