【html/CSS】ul liの点が出ない/list-styleが効かない原因と解決方法

「liの点が出ないんだけど!?」

「list-styleが効かない!?」

ul liの点が出ない、list-styleが効かない原因と解決方法を解説します。

【原因1】list-style:noneが指定されている

list-styleはリストの頭の表示を指定するCSSです。

list-style:noneが指定されていると点や数字が表示されなくなります。

<style>
.example{
    list-style: none;        
}
</style>
<ul class="example">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

list-style:noneはulにもliにも指定できます。

両方確認しましょう。

【解決】list-style:discを指定する

list-style:noneを削除するかlist-style:discを指定すると点が表示されます。

<style>
.example2{
    list-style: disc;        
}
</style>
<ul class="example2">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

list-style:discを指定するとulでもolでも点になります。

数字にしたいなど、他の表示にしたいときは値を変えましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

【原因2】liにdisplay:blockが指定されている

liはブロック要素であるため「display:block」だと思いがちですが、実は「display:list-item」です。

display:list-itemでないとlist-styleが効かず、点が表示されません。

<style>
.example3 li{
    display: block;
}
</style>
<ul class="example3">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

display:blockに限らず、display:flexなど、list-item以外の値が指定されていると効きません。

ちなみに、ulとolは「display:block」です。

【解決】liにdisplay:list-itemを指定する

liのdisplayを削除するか、「display:list-item」を指定するとlist-styleが効き、点や数字が表示されます。

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

どうしても「display:block」「display:flex」を指定したいときは、liの内側にdivを作り、それに指定するか、点をlist-styleではなく、beforeで作るなどの工夫が必要です。

【原因3】点が隠れている

点はliの枠の外側につきます。ulのpadding-leftが0でulが完全に左に寄っていたり、overflow:hiddenが設定されているなどで点が隠れてしまうことがあります。

<style>
.example5{
    border: 1px solid #333;
    padding-left: 0;
    overflow: hidden;
}
</style>
<ul class="example5">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

【解決】ulのpadding-leftを確保する

ulのpadding-leftは点を表示する領域として残しておきましょう。

1.5em~2emがオススメです。

<style>
.example6{
    border: 1px solid #333;
    /*コレ*/padding-left: 2em;
    overflow: hidden;
}
</style>
<ul class="example6">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

【まとめ】ul liの点が出ない原因

• 【原因1】list-style:noneが指定されている
  【解決】list-style:discを指定する
• 【原因2】liにdisplay:blockが指定されている
  【解決】liにdisplay:list-itemを指定する
• 【原因3】点が隠れている
  【解決】ulのpadding-leftを確保する

以上、ul liの点が出ない、list-styleが効かない原因と解決方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む