ホームへ

【html/CSS】ul liの「・」点を消す方法

「ul li」はリストを扱うhtmlタグです。まとまりのある連続した要素に使うことに向いており、メニューなどにもよく使われます。

そんなとき、もともとある「・」点がジャマですね。

CSSでul liの点を消し、左寄せにする方法を解説します。

点を消すには「list-style:none」

  • リスト
  • リスト
  • リスト
<style>
.example{
    /*コレ*/list-style: none;
}
</style>
<ul class="example">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

「list-style」はulの点のデザインを指定するCSSです。

「list-style:none」を指定するとulの点が消えます。

「list-style:none」はliに指定しても点を消すことができます。

ただしその場合、ol(数字のリスト)で数字が出なくなりますので、ulへの指定をオススメします。

左寄せは「padding:0」

  • リスト
  • リスト
  • リスト
<style>
.example2{
    list-style: none;
    padding: 0;
    margin: 0;
}
</style>
<ul class="example2">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

ulには左側に2文字分の空白があります。

これはulの点を確保するためです。

この空白を消して左に寄せるにはpaddingを0にします。正確にはpadding-leftを0にします。

また、上下にも空白があります。これも消したい場合はmarginを0にします。

点をつけるには「list-style:disc」

  • リスト
  • リスト
  • リスト
<style>
.example3{
    list-style: disc;
    padding-left: 2em;
    margin: 0;
}
</style>
<ul class="example3">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

「ul」全体で点を消すように指定したあと特定のulで点を再表示させたいときは「list-style: disc」を指定すると点が表示されます。

paddingを0にしている場合「padding-left: 2em」を指定すると点の分のスペースを確保できます。

まとめ

  • 点を消すにはulに「list-style:none」
  • 左寄せはulに「padding:0」
  • 点をつけるには「list-style:disc」

以上、ul liの点を消す方法でした。

マンガで読める関連記事