Google先生を頼りに再び調べる。list-staye表示された!!試行錯誤をしていたら、こちらのYahoo質問箱の回答に出逢った。list-style-imageが、リストを横並びにした時点(floatにしろinlineにしろ)で消えてしまいます。質問:list-style-imageが、リストを横並びにした時点(floatにしろinlineにしろ)で消えてしまいます。padding、marginを広めに取っても、表示されません。li)にdisplay:blockを設定している事が問題です。list-style関連のプロパティはdisplay:list-item(liの初期値)となっている要素に対して使う事が出来ます。flexを設定していたな。list-styleはli要素に絶対的にかかるのではなく、li要素の初期値であるdisplay:list-itemにかかっているのか。このdisplayをflexやらinlineやらに変更してしまうと、無効化されるのかな?display:list-itemを別の要素に当ててみる実験として、ol要素、li要素をdiv要素に変換し、元li要素だったdiv要素(.li)にdisplay:list-itemを当ててみた。li要素をli要素たらしめているのはdisplayだったのか。li要素のdisplay:list-itemと中身のdisplay:flexを共存させるために毎回入れ子のdiv要素を書くのは、コードが増えて不便だなぁ...。inline-blockを適用して見た。CodePen.これならdiv要素の入れ子がないまま子要素を横並びにできて、list-styleも表示される!今回はこちらの方法が一番ベターかな。flexを多用していた。カラム落ちしなくて便利なので。時には親要素のdisplayを変えない方がいい場合があることがわかったので、今後注意したい。Web系の記事は1年経つと賞味期限と言われるが、今回は6年前の、しかもWeb系ではなくYahoo質問箱に救われた。どこにヒントがあるかわからないな、と改めて思った。07:11Tweet関連記事2019-08-24【CSS】form用のリセット設定(ノーマライズCSS、リセットCSSとの比較)フォームのCSSって結構手間がかかったり、効いてくれなかったり...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。イブイブ...2018-12-04video要素はfigure要素で囲った方がセマンティック的にもスタイル的にもいいよ、というお話HTML5で新たに追加されたfigure要素とvideo要素。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。