クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > CSS > list-styleが表示されない！原因はdisplayにあった！6年前の知恵袋に救われた話

list-styleが表示されない！原因はdisplayにあった！6年前の知恵袋に救われた話

CSS

ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ？表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた！という話。

目次：

※参考：CSSの基本についてはこちら
【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3

list-stayleが表示されない！

表示されなかったリストはこんな感じです。 li要素の中に写真とテキストがありそれを横に並べている。

ちなみにCSSにはブラウザの初期スタイルを解除する「リセットCSS」を設定している。 Codepen＞Setting＞CSS＞Add External CSSを見ていただけると、CDNがリンクされている。 https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
このリセットCSSはlist-styleを無効化する。 そこで、CSSでli要素に再び数字を表示する「list-style-type: decimal;」を設定したのだが、表示されない。

以前、この記事やこの記事にあるように、ol要素に「overflow:hidden」が設定されていてその枠外にlist-styleがあるために表示されなかったことがあった。 そのため、marginやらpaddingやらoverflowやらtext-indentやらを色々いじってみた。あらゆる所に!importantを当てまくった。 それでも表示されない。

もしかしたらul要素にしたら表示されるかもしれない。変えて見た。しかし表示されない。うーむ、困った。Google先生を頼りに再び調べる。

list-staye表示された！！

試行錯誤をしていたら、こちらのYahoo質問箱の回答に出逢った。

list-style-imageが、リストを横並びにした時点(floatにしろinlineにしろ)で消えてしまいます。

質問：

list-style-imageが、リストを横並びにした時点(floatにしろinlineにしろ)で消えてしまいます。 padding、marginを広めに取っても、表示されません。どうしたら良いのでしょうか？

回答：

横並びにした事が問題ではなく、li（#topmenu li）にdisplay:blockを設定している事が問題です。 list-style関連のプロパティはdisplay:list-item(liの初期値)となっている要素に対して使う事が出来ます。

んん？display:list-item？ そういえば、写真とテキストを横に並べるためにli要素にdisplay: flexを設定していたな。 試しにli要素の中にdiv要素を入れ子で挿入し、そのdiv要素にdisplay: flexを設定してみると…

おお！表示された！！！ なるほど、list-styleはli要素に絶対的にかかるのではなく、li要素の初期値であるdisplay:list-itemにかかっているのか。このdisplayをflexやらinlineやらに変更してしまうと、無効化されるのかな？

display:list-itemを別の要素に当ててみる

実験として、ol要素、li要素をdiv要素に変換し、元li要素だったdiv要素（.li）にdisplay:list-itemを当ててみた。

やはりそうか！li要素以外でもdisplay:list-itemさえ当たって入ればlist-styleは表示される！ li要素をli要素たらしめているのはdisplayだったのか。

しかし、li要素のdisplay:list-itemと中身のdisplay:flexを共存させるために毎回入れ子のdiv要素を書くのは、コードが増えて不便だなぁ…。

子要素にdisplay:inline-blockを適用してみる

別の方法として、li要素自体のdisyplayは変えずに子要素（今回で言えば写真のfigura要素とテキストのdl要素）にdisplay: inline-blockを適用して見た。

これならdiv要素の入れ子がないまま子要素を横並びにできて、list-styleも表示される！
今回はこちらの方法が一番ベターかな。

まとめ

最近は要素を横並びにするときdisplay: flexを多用していた。カラム落ちしなくて便利なので。 だが時には親要素のdisplayを変えない方がいい場合があることがわかったので、今後注意したい。

また、Web系の記事は1年経つと賞味期限と言われるが、今回は6年前の、しかもWeb系ではなくYahoo質問箱に救われた。
どこにヒントがあるかわからないな、と改めて思った。

6年前の回答者の方、どうもありがとうございます！list-styleが表示されたとき、感動しました！
その時の喜びのツイート↓

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com