list-styleが効かないときは

2025年8月14日 2025年8月17日管理人

liタグのdisplayを確認

li{ display: list-item; }

デベロッパーツールで見てもちゃんとlist-style効いてるし、ulタグやolタグの外に見切れてるわけでもない。
なのにリストの点が出ない・・・
そんな場合はほぼコレで直ります。

古いcssコードのサイトだと、ulやolタグの中身を横並びにしようとしてliのdisplayをinlineとかinline-blockって結構あるんですよね。

display:flex;とかdisplay:grid;が普及してからは見なくなったけど、WEBメンテナンス系の仕事だと見かけて懐かしくなるやつ。

ちなみにdisplay:list-item;はliタグ以外にリストのマークをつけたいときにも使えます。
たとえばこのコード。

<span style="display:list-item">SPANだけどリストのふり</span>

表示するとこうなります。

SPANだけどリストのふり

意味的にはリストじゃないけど見た目をリストっぽくした方が読みやすいとき、たまにあるんですよね。

私がよく使うのは1つのdtタグに対してddが複数あるとき。
ddの中にulでリスト使ってもまあ悪くはないんですが。

HTML構造はできるだけシンプルに、css無しでも伝わる構造にしたいので余計なulで入れ子にするよりdisplay:list-item;がぴったりなのです。

HTML構造を正しくシンプルにすることは、ウェブサイトを音声読み上げで閲覧される方にも正しく伝わるようにと思って始めました。
かれこれ20年ほど前、ユニバーサルデザインという言葉が浸透し始めたころだったかと。

今になってSEOとかAIOにも役に立つようになって、なんだか得した気分です。