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
- item