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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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