リストタグのリストマークを非表示にする

デフォルトでは、リストタグ <li> の先頭に “・ (disc)” などのリストマークが表示されます。

標準の HTML は素っ気ないデザインですし

1list-style: none;

という CSS を書いて非表示にしてしまうことが多いですね。

復活したいのに

先日、独自画像をあててリストマークを表示しようとしたところ、 list-stylepadding などをいろいろと変えてみてもうまく表示されないということがありました。

原因は display を変更していた でした。


MDN Web docs
開発者向けのウェブ技術CSS: カスケーディングスタイルシート list-style
https://developer.mozilla.org/ja/docs/Web/CSS/list-style

より引用すると

リスト項目、すなわち display: list-item; の要素に適用されます。

ということで、リストマークは display: list-item でないと表示されないのですね。

今回、まとめて

1display: inline-block

をしていて、場所が離れていて気づくまでに時間がかかりましたが、

1display: list-item;

を入れることでリストマークの表示が復活しました。