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

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

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

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

点の位置を調整したい場合はこちら↓

【点を消す方法1】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への指定をオススメします。

【点を消す方法2】display:block

<style>
.example1 li{
    display:block;
}
</style>
<ul class="example1">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

liは「display:list-item」であり、この要素に対して点がついています。

liにblockなど、list-item以外のdisplayを指定すると、点が消えます。

displayについて詳しくはこちら↓

「list-style」はulでもliでもいいですが、「display:block」で点を消す場合はliに指定しましょう。

左寄せは「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にします。

【点を付ける方法1】list-style:disc

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

「list-style:none」で点を消したあと、再表示させたいときは「list-style:disc」を指定すると点が表示されます。

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

【点を付ける方法2】display:list-item

<style>
.example4 li{
    display: list-item;
}
</style>
<ul class="example4">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

「display:block」で点を消したあと、再表示させたいときは「display:list-item」を指定すると点が表示されます。

まとめ

• 点を消すにはulに「list-style:none」かliに「display:block」
• 左寄せはulに「padding:0」
• 点をつけるには「list-style:disc」や「display:list-item」で元に戻す

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