どもです。
ポケモンΩルビー、草タイプ縛り中の餅。です。

マグマ団も怖いけど、飛行タイプがこれまた怖い。

 

今回はコーディング中にちと蹴躓いた点をば。

僕は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内に入れられればおｋです。

基本的なことですが、普段使わないから把握しきれていない仕様って結構多いですね。