質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3236閲覧

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

eio

総合スコア9

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/16 21:50

編集2020/09/17 00:42

前提・実現したいこと

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

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

画像が反映されない

エラー無し(?)

該当のソースコード

HTML

1<menu> 2 <ul> 3 <li>1番目</li> 4 <li>2番目</li> 5 <li>3番目</li> 6 <li>4番目</li> 7 <li>5番目</li> 8 </ul> 9</menu> 10

css

1menu{ 2 height: 62px; 3} 4menu ul { 5 display: flex; 6 height: 62px; 7 list-style-image: url(../images/740ver2.png); 8} 9menu ul li { 10 flex: auto; 11 display: flex; 12 align-items: center; 13 justify-content: center; 14} 15menu ul li:hover{ 16 background-color: #ebe5ff; 17}

試したこと

要素の検証で確認してみましたが問題ないような気がしています。
逆になぜ反映されないのかがわからない感じです
イメージ説明
画像は画像を載せたいページ(index.html)から見て一階層上のimagesフォルダの740ver2.pngファイルなので間違ってないと思っています。

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

追加画像1イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Daregada

2020/09/16 23:02

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

2020/09/16 23:13

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

回答1

0

ベストアンサー

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

画像は画像を載せたいページ(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要素に代えるべきでしょう。

HTML

1 <nav> 2 <ul> 3 <li>1番目</li> 4 <li>2番目</li> 5 <li>3番目</li> 6 <li>4番目</li> 7 <li>5番目</li> 8 </ul> 9 </nav>

CSS

1nav { 2 height: 62px; 3} 4 5nav ul { 6 display: flex; 7 height: 62px; 8 padding-left: 0; 9} 10 11nav ul li { 12 border: 1px solid red; /* 確認用 */ 13 flex: auto; 14 display: flex; 15 align-items: center; 16 justify-content: center; 17} 18 19nav ul li:before { 20 content: ""; 21 display: inline-block; 22 width: 55px; /* 画像のサイズに合わせる */ 23 height: 62px; /* 画像のサイズに合わせる */ 24 background-image: url(../images/740ver2.png); 25 background-size: contain; 26 vertical-align: middle; 27} 28 29nav ul li:hover { 30 background-color: #ebe5ff; 31}

投稿2020/09/17 00:22

編集2020/09/17 01:51
Daregada

総合スコア11990

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eio

2020/09/17 00:53

まずご回答いただきありがとうございます. .menuですがのちにnavに入れ替える予定でした。(たぶんこれで良いのではと思ってました。ダメ?) どっちみち先にリストの項目表示を画像にしたいので先に解決してからと考えていました。 で、なぜ映らないのかのアドバイスを頂いたところですが。完成系はこのような形を目指しておりました。(追加画像1参照) で以前こちらでフレックスボックスのことに関して質問させていただき、アドバイスを頂き、勉強し今の形になりました 以前の質問はこちら https://teratail.com/questions/290148 簡単に言うとフレックスボックスを利用し、横並びにしたとき縦の位置制御を行いましたそのため、align-items: center; justify-content: center; を書く必要があり、そのためにはdisplay: flex;も必要になってしまった次第です。 これを書かないと上記で書いた以前の質問が解決できすレイアウトが崩れてしまいます。 つまりフレックスボックスを使い縦の制御をおこなった場合画像は差し込めないと考えるべきなのでしょうか? (初学者のため言ってることぐちゃぐちゃだったらゴメンナサイ)
Daregada

2020/09/17 01:06

「それがナビゲーションになるのであれば」nav要素を使ってください。提示されたHTMLでは、ナビゲーションになるかどうかが判断できませんでした。HTMLの各要素は、見た目のためではなく、構造を示すために使います。 「リストの項目表示を画像にする」目的にはlist-style-imageプロパティは使えません。このプロパティは、「リスト項目の先頭に表示される記号として画像を利用する」目的で使います。list-style-imageプロパティを使わないのであれば、リスト項目に「display: flex;」を使っても問題はありません。
Daregada

2020/09/17 01:10

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

2020/09/17 01:18

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

2020/09/17 01:19

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

2020/09/17 01:31 編集

横から失礼します。 こちらの回答へのコメント欄で明らかになった内容に関する投稿なのでぶら下げます。 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

2020/09/17 01:45

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

2020/09/17 01:51

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

2020/09/17 07:27

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問