【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の点を消す方法でした。
