CSSのulでlist-styleが効かない時の対処法

CSSのulでlist-styleが効かない時の対処法
関連キーワード
デザイン

ウェブサイトでリストを作るために、HTMLではul,liでマークアップして、CSSでlist-styleを当てたらいいと思ってたんですが、指定したマークが付かないことがありまして。

例えばlist-style: disc;と書いた時に黒いぼっちを表示させる方法についてご紹介します。

CSSでul,liの冒頭のマークを付けるには

CSSでulのリストにマークを付けるには、下記の一行を足すだけでおっけーです。

li {
  list-style: disc;
}

list-style: disc;の「disc」のところは「・」のような黒いぼっちを設定するもので、disc以外にもいろいろと使えます。

例えば「circle」としたら白い丸。「square」だと黒い四角になります。

CSSでul,liのlist-styleが効かない時の対処法

上記のようにlist-styleを設定しているはずなのに、リストの頭に何のマークも付かない場合があります。

そんなときは、下記のように書きましょう。

li {
  display: list-item;
  list-style: disc;
}

display: list-item;の1行を足すだけです。

これでlist-styleに設定したマークが頭に表示されるようになりました。

最後に

僕の経験上あまり効かないことはないんですが、先日どうしてもリストの頭にマークが表示されないことがあって、調べたらこの1行で解決しました。

お困りの方はぜひお試しください。

ちなみに、数字付きのリスト「ol」での小技も紹介してますので、こちらもあわせてご覧ください。

関連記事『【CSS】番号付きリスト「ol」を途中から始めたり並び順を逆にしたりする方法』のサムネイル画像
【CSS】番号付きリスト「ol」を途中から始めたり並び順を逆にしたりする方法
続きを読む