クモのようにコツコツと

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

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

ある日、リストに数字を表示したい時があった。 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