liタグの要素をdisplay: block;とすると●がなぜ消えるのかがわかりません。

Question

前提・実現したいこと

liタグの要素をdisplay: block;とすると●がなぜ消えるのかがわかりません。

またlist-style-type: none;とは何が違うのですか？

該当のソースコード

<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

該当のソースコード

li {
  display: block;
}

Comments

[azuapricot]

li-style-type:noneとは根本的に色々違いますけど・・・

Answer 1

なぜ <li>要素に display:block; を設定したいのかはよく分かりませんが一応回答します。

F12を押したディベロッパーツールで見て頂ければわかると思いますが、
display:block を設定する前の <li>要素は display:list-item; です。
これのおかげで、<li>要素には ● が付きます。

display:block;にしてしまうと、list-itemではなくなってしまうので、もちろん●は消えます。

また、list-style-type: none;ですが、これは●が邪魔だなー、と思った時に消すためのCSSです。
これを使えば display:list-itemのまま、●が表示されない<li>を表示することができます。

<li>をdisplay:blockにする利点がよくわからないので、特に意識してそうしているのでなければ、 list-style-type:none；だけ設定しておくのがよいのでは。

Comments

[kyoya0819]

補足で少々ややこしいのですがliタグはブロックレベル要素になります。
参考 : https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

[azuapricot]

補足ありがとうございます。
元々ブロックレベル要素なのに display:blockをわざわざ設定する意味がわからない（）といえば質問者さんにもわかりやすいでしょうかね

[lemo]

早速の回答ありがとうございます。
liタグはdisplay: list-item;だったのですね
解決できました、ありがとうございました！