CSSでli要素の黒丸の点を消す方法を解説!

箇条書きのli要素にはデフォルトで先頭に黒丸の点のマーカーが付きます。このマーカーをCSSで消す方法についてサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1CSSでli要素の黒丸の点を消したい
  2. 2CSSでli要素の黒丸の点を消す方法
  3. 2.1非表示にする方法
  4. 2.2リセットCSSを使って消す方法も
  5. 2.3黒丸の点以外にしたい場合

CSSでli要素の黒丸の点を消したい

箇条書きのul要素・ol要素とli要素の組み合わせはデフォルトで黒丸の点が箇条書きのアイテムの先頭に付きます。

上記のサンプルコードでも「箇条書き」の前に黒丸の点がついているかと思います。

しかし、人によっては箇条書きでも黒丸の点は必要なく、非表示にしたいという方もいるのではないでしょうか。

今回は箇条書きの黒丸の点を非表示にする方法を解説していきます。

CSSでli要素の黒丸の点を消す方法

li要素の黒丸の点ですが、これは箇条書きのマーカーと呼ばれるものです。

このマーカーについては箇条書きでlist-style-typeで表示・非表示やマーカーの種類を変更する事が出来ます。

非表示にする方法

list-style-typeのプロパティでnoneを設定するとマーカーの点は非表示になります。

このようにul要素か、li要素に対してlist-style-type: noneを設定することで、マーカーが非表示になります。

マーカーを非表示にすると左側にスペースが空いてしまうので、最後に余白の調整をしておきましょう。

リセットCSSを使って消す方法も

箇条書きのマーカーを消すにはリセットCSSを使うのもやり方の一つです。

リセットCSSはブラウで予め設定しているデフォルトのスタイルをリセットするためのCSSです。

下記はリセットCSSを適用したサンプルコードです。

上記のサンプルコードではreset.cssでブラウザのフォルトのCSSが無効化されています。

黒丸の点もブラウザのデフォルトのスタイルがつけているものなので、リセットCSSを使うと黒丸の点も非表示となります。

リセットCSSについてはいくつか種類があり、詳細を知りたい方は下記を参考にしましょう。

あわせて読みたい
【コピペで出来る】おすすめのリセットCSSと使い方を解説!のイメージ
【コピペで出来る】おすすめのリセットCSSと使い方を解説!
リセットCSSとはブラウザがデフォルトで持っているCSSをリセットする目的のCSSで、種類がいくつかあり今回はその中のおすすめと使い方を紹介します。

黒丸の点以外にしたい場合

list-style-typeのプロパティは黒丸の点(disc)以外にも四角(square)や白丸(circle)など表示スタイルの種類があります。

list-style-typeについて値の種類や使いかたを知りたい方は下記を参考にしましょう。

あわせて読みたい
list-style-type
CSSのlist-style-typeは箇条書きの要素でマーカーの種類を設定することが出来るプロパティです。四角や円、黒丸、白丸など様々なマーカーの種類があり使い方をサンプルコード付きで解説します。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次