• 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. アコーディオンを作ってみよう

  3. cssで矢印を作ろう

  4. 特定の番号の要素のcssだけ変更してみよう

  5. borderが横幅からはみ出てしまう

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

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031
Translate »