listの項目に画像を差し込みたいのですが反映されない状態です

Question

前提・実現したいこと

listの項目の部分に画像を差し込みたい

発生している問題・エラーメッセージ

画像が反映されない

エラー無し(?)

該当のソースコード

<menu>
    <ul>
        <li>1番目</li>
        <li>2番目</li>
        <li>3番目</li>
        <li>4番目</li>
        <li>5番目</li>
    </ul>
</menu>

menu{
    height: 62px;
}
menu ul {
    display: flex;
    height: 62px;
    list-style-image: url(../images/740ver2.png);
}
menu ul li {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
menu ul li:hover{
    background-color: #ebe5ff;
}

試したこと

要素の検証で確認してみましたが問題ないような気がしています。
逆になぜ反映されないのかがわからない感じです

画像は画像を載せたいページ（index.html）から見て一階層上のimagesフォルダの740ver2.pngファイルなので間違ってないと思っています。

最初は画像が大きすぎたため反映されないとばかり思い画像を小さくして再チャレンジしてみましたが反応は変わらないでした。
画像のファイル名にver2がついているのはそのためです。
menuのulのheightも62pxなのではみ出してはいないと思っています。
###補足
ファイル構成

追加画像１

Comments

[Daregada]

styles.cssはindex.htmlと同じフォルダーにあるんですか？

[eio]

styles.cssはindex.htmlと同じフォルダーではないです。
参考にファイル構成の画像（キャプチャー画像）を載せました。

Answer 1

複数の問題が事態をややこしくしているので、順に説明します。

画像は画像を載せたいページ（index.html）から見て一階層上のimagesフォルダの740ver2.pngファイルなので間違ってないと思っています。

この説明と、補足として追加された画像が食い違っています。実際には、index.htmlと同じ階層にあるimagesフォルダーに画像が置かれています。HTMLファイルでimg要素などを使う場合は、"images/hoge.jpg"や"./images/hoge.jpg"という指定になります。
いっぽう、CSSのurl()で相対URLを使う場合、CSSファイルの置かれたフォルダーからの相対パスで指定するので、url(../images/740ver2.png)は偶然にも正しい指定になっています。

では、なぜリスト項目の先頭に画像が表示されないのかというと、li要素のスタイルにdisplay: flex;が指定されているからですね。li要素の先頭の記号や画像は、display: list-item;(初期設定)でないと表示されません。

リスト項目を横に並べたいだけなら、ul要素のスタイルにdisplay: flex;を指定し、li要素のスタイルにはflex: auto;を指定するだけです。

どうやら、「項目の先頭に画像を表示しつつ、リスト項目の中央に内容を表示したい」らしいので、list-style-imageを使わず、before疑似要素で画像を表示するよう修正しました。dit.さん、ありがとうございます。

そのほか、menu要素の中にul要素は入れられないし、対応しているブラウザーも少ないので、ナビゲーションにするならばnav要素に代えるべきでしょう。

        <nav>
            <ul>
                <li>1番目</li>
                <li>2番目</li>
                <li>3番目</li>
                <li>4番目</li>
                <li>5番目</li>
            </ul>
        </nav>

nav {
    height: 62px;
}

nav ul {
    display: flex;
    height: 62px;
    padding-left: 0;
}

nav ul li {
    border: 1px solid red; /* 確認用 */
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul li:before {
    content: "";
    display: inline-block;
    width: 55px;  /* 画像のサイズに合わせる */
    height: 62px; /* 画像のサイズに合わせる */
    background-image: url(../images/740ver2.png);
    background-size: contain;
    vertical-align: middle;
}

nav ul li:hover {
    background-color: #ebe5ff;
}

Comments

[eio]

まずご回答いただきありがとうございます.
.menuですがのちにnavに入れ替える予定でした。（たぶんこれで良いのではと思ってました。ダメ？）
どっちみち先にリストの項目表示を画像にしたいので先に解決してからと考えていました。

で、なぜ映らないのかのアドバイスを頂いたところですが。完成系はこのような形を目指しておりました。（追加画像１参照）
で以前こちらでフレックスボックスのことに関して質問させていただき、アドバイスを頂き、勉強し今の形になりました
以前の質問はこちら
https://teratail.com/questions/290148
簡単に言うとフレックスボックスを利用し、横並びにしたとき縦の位置制御を行いましたそのため、align-items: center;
justify-content: center;
を書く必要があり、そのためにはdisplay: flex;も必要になってしまった次第です。

これを書かないと上記で書いた以前の質問が解決できすレイアウトが崩れてしまいます。
つまりフレックスボックスを使い縦の制御をおこなった場合画像は差し込めないと考えるべきなのでしょうか？
（初学者のため言ってることぐちゃぐちゃだったらゴメンナサイ）

[Daregada]

「それがナビゲーションになるのであれば」nav要素を使ってください。提示されたHTMLでは、ナビゲーションになるかどうかが判断できませんでした。HTMLの各要素は、見た目のためではなく、構造を示すために使います。

「リストの項目表示を画像にする」目的にはlist-style-imageプロパティは使えません。このプロパティは、「リスト項目の先頭に表示される記号として画像を利用する」目的で使います。list-style-imageプロパティを使わないのであれば、リスト項目に「display: flex;」を使っても問題はありません。

[Daregada]

それから、「質問に書いていないコレコレの事情で、この回答では不十分です」という後出しは、回答者に対して非常にアンフェアな姿勢です。書いていないことは知りようがないので。

[eio]

スイマセン。ちと言い方が悪かったような気がします
『・項目１』の点を画像に変更したいです。
となるとやはりlist-style-typeが正気の状態をnoneにしてlist-style-imageの記述が必要になってくると思います。でも縦制御を
nav ul li {
flex: auto;
display: flex;
align-items: center;
justify-content: center;
}
で行っているとなると使用できない。という認識になってしまいます。
うーんリストの前にアイコンみたいに画像が差し込めればいいからというのを考えると『項目』の前に<span>で囲って画像差し込んだりでもいいのかなと思えてきました（できるのかは不明です…）

[eio]

すいません不十分だなんて全く思ってないです。後出しになってのは申し訳ないですが大変感謝しております。

[dit.]

横から失礼します。
こちらの回答へのコメント欄で明らかになった内容に関する投稿なのでぶら下げます。
nav ul liの疑似要素に背景を設定する方法で`nav ul li`に`display: flex;`を付けたまま項目の前に画像を表示することができるのではないかと思います。

例
```css
nav ul li:before {
content: "";
display: inline-block;
width: 55px;/* 画像のサイズに合わせる */
height: 62px;/* 画像のサイズに合わせる */
background-image: url(../images/740ver2.png);
background-size: contain;
vertical-align: middle;
}
```
ただしこれだと`li`内に`a`が入った場合画像部分にリンクが効かないので`<li><a href="#">1番目</a></li>`の場合`nav ul li a:before`とかの方が良いかもしれません。

[Daregada]

そうですね。list-style-imageで表示したマークは、li要素のボックスの左端に表示されるので、文字を中央揃えにすると画像と文字が離れてしまいます。 before疑似要素を使うのが質問者のイメージに近い表示でしょうね。

[dit.]

先ほどのコメントに入れ忘れましたが、「なぜlist-style-imageで指定した画像が表示されないのか」「画像までのパスが間違っているのでは」に対する回答としてはDaregadaさんの回答の通りかと思います。

[eio]

丁寧に回答ありがとうございます。
午前中回答を頂いてから四苦八苦しておりますがちょっと表示がうまくいかずなぜなのか理由がわからない状態になっております。再度質問を検討しておりますが当質問とはちょっと内容がずれてしまうような気がしますので質問の内容を明確にしアップしたいと思います。