HTMLのリストマーカーを消す

リスト(li)のマーカーを消すには、「li」に「list-style: none」を設定する。

デフォルト

HTML:

<ul>
    <li>みかん</li>
    <li>りんご</li>
</ul>

出力:

  • みかん
  • りんご

リストマーカーをCSSで設定

HTML:

<ul>
    <li>みかん</li>
    <li>りんご</li>
</ul>

CSS:

ul li {
    list-style: none;
}

出力:

  • みかん
  • りんご

デフォルトとCSSを設定したときの違い

デフォルトでは黒丸がついているが、上の「list-style: none」で見た目だけは除去できる。しかしそれでも黒丸の分のスペースが残っており、リスト全体がインデントされているような形になっている。

広告