htmlでリストを作ったら、前に丸がついててこれを消したいんですが、どうしたらいいですか?
リストの前についている丸は、cssを使うことで消すことができます。
なるほど cssをあてればいいんですね
liの要素にlist-style:noneをあてることで消すことができます。
サンプルを使ってみていきましょう。
リストの前に、デフォルトでは、丸いものがついているかと思います。
デザインによっては、こちらの丸を消して欲しいと言われることがありますよね。
そういった場合は、cssでlist-styleを使って消してあげるといいでしょう。
まず一般的なリストをご用意します。
<ul>
<li>リストの前の丸を消します</li>
<li>cssのlist-style:noneを使って消します。</li>
<li>こちらはlist-style:noneをあてる前の一般的なリストです。</li>
</ul>
上記のように、リストの前に丸いちょぼがついているかと思います。
では、次はこちらの丸いものを消してみようと思います。
liについているlist-styleを無効化していきます。
<ul class="list-style-none">
<li>リストの前の丸を消します</li>
<li>cssのlist-style:noneを使って消します。</li>
<li>こちらはlist-style:noneをあてた後のリストになります。</li>
</ul>
.list-style-none li{
list-style:none;
}
ulにクラス list-style-noneをつけて、そのさいのliにlist-style:noneをあてると以下のようになります。
リストの前の丸が消えたかと思います。
デザインに応じて使ってみる機会があるかと思います。何かのお力になれれば幸いです。