• css

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

はじめに

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をあてる前の一般的なリストです。

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

関連記事

  1. cssでフェードをかけてみよう

  2. cssでマウスをおいた時に動かそう

  3. 画像をhoverして時にズームさせるcssを書こう

  4. CSSで画像を背景に貼ってみよう

  5. アコーディオンを作ってみよう

  6. CSSで文字の間隔を変更してみた

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930