ウェブサイトでリストを作るために、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」での小技も紹介してますので、こちらもあわせてご覧ください。
