ホーム（記事一覧）へ

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にします。

まとめ

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

左寄せはulに「padding:0」

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

関連記事