【HTML/CSS】ul li リストの点(・黒丸)を消す方法と表示方法【ドットの非表示】

HTMLのリスト系タグ(ul/li)の黒丸(・、点、ドット)の表示と非表示を切り替えるためにはCSSプロパティを指定する必要があります。

目次

リストの黒丸を消す方法

リストタグの点を非表示にする場合にはul/olタグ側のCSSプロパティとしてlist-style: none;を指定します。

ul {
  list-style: none;
}
list-styleプロパティはliタグ側に指定することも可能です。

HTMLタグのstyle属性に直接CSSを記述する場合には以下のように記述します。

<ul style="list-style: none;">
  <li>item</li>
</ul>
  • item

黒丸を非表示にしても、左側のパディングは掛かったままとなるため、必要に応じてpadding-left: 0;を指定する必要があります。

<ul style="list-style: none; padding-left: 0;">
  <li>item</li>
</ul>
  • item

リストの黒丸を表示する方法

逆に黒丸を表示する場合には、CSSプロパティとしてlist-style: disc;を指定します。白丸を表示する場合はlist-style: circle;を用います。

<ul style="list-style: disc;">
  <li>item</li>
</ul>

<ul style="list-style: circle;">
  <li>item</li>
</ul>
  • item
  • item

discを指定しても黒丸が表示されない場合には、ul/olタグやliタグ側のパディングがゼロに指定されている可能性があります。この場合はCSSプロパティとしてpadding-left: 40px;等のデフォルトの値を指定する必要があります。

<ul style="list-style: disc; padding-left: 40px;">
  <li>item</li>
</ul>
// Before (padding-left: 0px;)
  • item
// After (padding-left: 40px;)
  • item

広告