BLOGホームページ制作関係csshtml

リストの前の丸をcssで消してみよう

2019/11/19

はじめに

htmlでリストを作ったら、前に丸がついててこれを消したいんですが、どうしたらいいですか?

リストの前についている丸は、cssを使うことで消すことができます。

なるほど cssをあてればいいんですね

liの要素にlist-style:noneをあてることで消すことができます。
サンプルを使ってみていきましょう。

list-style:noneを使ってみよう

リストの前に、デフォルトでは、丸いものがついているかと思います。
デザインによっては、こちらの丸を消して欲しいと言われることがありますよね。
そういった場合は、cssでlist-styleを使って消してあげるといいでしょう。
まず一般的なリストをご用意します。

一般的なリストを作ろう

<ul>
<li>リストの前の丸を消します</li>
<li>cssのlist-style:noneを使って消します。</li>
<li>こちらはlist-style:noneをあてる前の一般的なリストです。</li>
</ul>

一般的なリストの実装例

  • リストの前の丸を消します
  • cssのlist-style:noneを使って消します。
  • こちらはlist-style:noneをあてる前の一般的なリストです。

上記のように、リストの前に丸いちょぼがついているかと思います。
では、次はこちらの丸いものを消してみようと思います。

リストの前の丸を消そう

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をあてると以下のようになります。

リストの前の丸を消したサンプル実装例

  • リストの前の丸を消します
  • cssのlist-style:noneを使って消します。
  • こちらはlist-style:noneをあてた後のリストになります。

リストの前の丸が消えたかと思います。
デザインに応じて使ってみる機会があるかと思います。何かのお力になれれば幸いです。