どもです。
ポケモンΩルビー、草タイプ縛り中の餅。です。
マグマ団も怖いけど、飛行タイプがこれまた怖い。
今回はコーディング中にちと蹴躓いた点をば。
僕はlist-styleでulを使うのがあまり好きではありません。
故に、普段はlist-style:noneにして、li:beforeで記号を入れているのですが、連番――つまりolを使いたいとなるとそうはいかなくなります。
仕方ないのでlist-style:decimalを設定したのですが、普段list-styleを指定したリストに慣れていなかったせいで躓いてしまいました。
list-styleで指定したハズの連番が表示されなかったのです。
要素を見る限りはきちんと表示されているハズなのに……
理由は親要素(ol)にありました。
ol:overflow:hiddenが設定されていたことが原因でした。
つまりはこういうことです。
list-styleで設定された内容は、liの前につきます。
このとき、liの内容は動かないまま、その前についてしまうため、親要素にoverflow:hiddenが設定されていると、親要素を飛び出て非表示になってしまうという簡単な話でした。
この解決法は、olにpadding-leftか、liにmargin-left。
とにかくはみ出たlist-styleをol内に入れられればおkです。
基本的なことですが、普段使わないから把握しきれていない仕様って結構多いですね。