Q&A
body に赤線が引かれているのは気が付いておられますでしょうか……？（ @Lhankor_Mhy さんの言うところの セミコロン忘れの影響です。 先頭行の @charset "UTF-8" の末尾に セミコロンが無い為に不正な文字列として認識されています。
前回の質問で、誤った情報を載せてしまったので、サポートチームに伏せ字にして頂きました。改めて質問いたします。
HTML,CSSの基本について学習している初心者です。background-imageプロパティを使用して画像を設置したいのですが、cssが反映されません。
以下実際に作業しているコードを貼り付けます。（WCBカフェのフォルダ）
↓css
↓html
エディターの下欄に「ワークスペースで問題は検出されていません」と表示されているのと、絶対パスでは画像は反映されるので、問題は相対パスの位置関係にあると考えてます。
【絶対パスのURL】
style.cssは /Users/ユーザー名/WCBカフェ/style.css bg.pngは /Users/ユーザー名/WCBカフェ/images/bg.png
また
background-image: url('../images/bg.png');
background-image: url('images/bg.png');
background-image: url(./images/bg.png);
と相対パスでの試みも一通りやってみましたが画像は反映されませんでした。
参考書は「１冊ですべてが身につHTML&CSSとWebデザイナー入門
講座」を使用しています。これは、サンプルファイルがダウンロードできるようになっており、該当フォルダに必要なファイルはすべて含まれています。なので、このファイルをベースに必要な編集やファイルの配置方法を真似してきましたが、相対パスで画像が反映されない状況です。
c3-10-1
devtool リスト
何が原因か教えて頂けたらと思います。よろしくお願いします。
※使用PCはMacBook
テキストエディターはVSCode
junerさん。ご指摘ありがとうございます。セミコンロ入力しましたが、まだ画像が反映されません。他にブラウザのキャッシュのクリアもしましたが、ダメでした💦
F12 でその background-image が設定されているであろう要素を見た場合のスタイルってどうなっていますでしょうか？そのスタイルはついておられますでしょうか？
https://learn.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/overview
回答ありがとうございます。すいませんURLを拝見しても理解できませんでした。どの場面でF12を押したら良いのでしょうか？💦
スクリーンショットを消してしまうと、質問として成り立ってなくないですか？
スクショ貼り付けました。ご確認よろしくお願いいたします。
https://www.sbcr.jp/product/4797398892/
上記はご確認されておられますか？
正誤情報があるので、記述に誤りがあるようですが。
また、実際のファイルもあるので、ダウンロードして、フォルダ構成やファイル比較による、厳密な記述ミスの確認もしてみる価値があるかもしれません。
拝見しました。htmlファイルの場所がそれぞれで違うようですが、現在はどちらですか？
また、HTMLファイルのHTML要素が2つあるようですが、大丈夫ですか？
個人情報ですが、編集履歴から過去の画像が確認できます。
確実な消去がご希望の場合、この質問を削除して、再質問されることも、ご検討ください。
その際は、HTMLやCSSのコードなどは、コード用のマークダウンを使用して、質問文に文字列でご記載いただけるようお願いいたします。
今はstyle.cssが1番下に配置してあります。
html要素２つはどこのことでしょうか？
h1の閉じタグみたいになってるやつです
確認し、修正しました。
質問を消去することはできるのでしょうか？
https://teratail.com/help#delete-question
以前は回答のついた質問の削除はしていないようだったのですが、リニューアル後に方針が変更になったらしく、回答のついた質問も削除されることを確認しています。ワンチャンあるかと。
ありがとうございます。
「解決済み」となっていますが、解決済みですか？
解決済みではないんです。修正しました。
ひとつめのスクリーンショットは /Users/ユーザー名/WCBカフェ/style.css ではないと思います。スクリーンショットを間違えているならば正しいものを、間違えていないのであれば誤解のないように付記してください。
回答ありがとうございます。再度確認したのですが、一つ目のスクリーンショットもパスも間違いではなのですが...
タブの下に Desktop > style.css と表示されているように思うのですが、これは大丈夫そうですか？ デスクトップにある別のファイルではないかと疑っています。
1枚目、３枚目とも、url(./image/bg.png); と、フォルダ名の最後の s が抜けていますが、質問文とどちらが正しいのでしょうか？
Lhankor_Mhyさん。すいません。”タブの下に Desktop > style.css ”とは、どこのことでしょうか？
YT0014さん。失礼しました。ご指摘通り、”s”が抜けていたので編集いたしました。しかし、反映はできていません。
> 参考書は「１冊ですべてが身につHTML&CSSとWebデザイナー入門 講座」を使用しています。
以下のウェブページからダウンロードした HTML-CSS-Webdesign2.zip ファイルですが、
=====
【ダウンロード】1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ | SBクリエイティブ
https://www.sbcr.jp/support/4815617811/
=====
HTML-CSS-Webdesign2/chapter3/c3-10-1/style.css の内容は以下の通りです。
=====
@charset "UTF-8";
body {
background-color: #f5f2e5;
background-image: url(images/bg.png);
}
=====
一旦、HTML-CSS-Webdesign2/chapter3/c3-10-1/index.html をウェブブラウザで表示して問題がないかどうかを確認してみてはどうでしょうか。
> Lhankor_Mhyさん。すいません。”タブの下に Desktop > style.css ”とは、どこのことでしょうか？
スクリーンショット差し替えたみたいなのでもういいです……
Lhankor_Mhyさん
質問欄に追加しました。合っているでしょうか？
melianさん。回答ありがとうございます。HTML-CSS-Webdesign2/chapter3/c3-10-1/index.html をウェブブラウザで表示してみましたが、画像は反映されませんでした。
> 質問欄に追加しました。合っているでしょうか？
いや、ほんとにもういいので。
Lhankor_Mhyさん
失礼しました。
Lhankor_Mhyさん
style.cssのURLは/Users/ユーザー名/WCBカフェ/style.cssで間違いありません。
＞スクリーンショット差し替えたみたいなのでもういいです……
他の方から抜けがあると、ご指摘があったので差し替えました。
> style.cssのURLは/Users/ユーザー名/WCBカフェ/style.cssで間違いありません。
ですから、差し替えられたスクリーンショットでそれがわかりましたから、もう大丈夫です、と申し上げております。
Lhankor_Mhyさん
失礼しました。
パスの位置関係が問題なのでしょうか？それとも根本的に何か設定の問題があるのでしょうか？
公式のサンプルが動作しない、ということでしたからちょっとよくわからないですね。環境の問題かもしれないですが、他のチャプターのサンプルが動作するならそれも考えにくくなります。
なお、当方では、公式のサンプルは動作しました。
回答ありがとうございます。
つまり質問に載せているスクショの記述(コード、相対パスの位置、絶対パスでは反映された)だと、本来なら画像が反映されるはず、という解釈で大丈夫ですか？
スクリーンショットだけなので当方でコードを試していませんから、粗々で眺めた感想になりますが、ご解釈の通りです。
ただ、ここまでコードの誤りやファイル配置について見落としがいくつもありましたから、他にも見落としがあると考えるのが妥当なような気がします。
ありがとうございます😭
また見落としがないか確かめてやってみます、
パスが見えてます。
というか、Downloads フォルダなのはなぜなんでしょう？
それはつまりどーいうことでしょうか？
個人情報だから、という話ではなかったでしたっけ？
わかりにくいかったようですみません。新しくアップされたスクリーンショットのアドレス欄にあるパスにユーザー名が見えている、ということです。
訂正しました、
既に削除されていますが、style.css の中身が、
@charset "UTF-8";
体 {
背景画像: url(images/bg.png);
}
となっていて、CSS の属性名などが日本語訳？(body => 体, background-image => 背景画像)に置き換えられている様に見えました。
なんとなくですが、HTMLファイルの開き方がよくないのかもしれませんね。どういう手順でダウンロードフォルダにあるCSSファイルを開いて翻訳をかけることになったのか、手順を書いていただくと何か手掛かりが見つかるのかもしれません。
Lhankor_Mhyさん
HTML-CSS-Webdesign2.zip ファイルをダウンロード→chapter3/c3-10-1/style.css →image bp.png→WCBカフェimageフォルダまでドラッグして移動。になります。
> HTML-CSS-Webdesign2.zip ファイルをダウンロード→chapter3/c3-10-1/style.css →image bp.png→WCBカフェimageフォルダまでドラッグして移動。
これだけではブラウザにindex.htmlもstyle.cssも表示されないはずなので、ここに書かれていない手順に原因がありそうですね。（全然違うファイルを開いているとか）
---
追加されたスクリーンショットを見ると、背景画像だけではなく背景色もついていない様子だったので background-image の問題ではなくて、CSSを読み込めていない、という感じを受けました。devtools にも 1件中0件のリクエスト、と書かれていますし。
となると、このチャプター3-10以前はどうなっていたのかが気になります。たとえば、チャプター3-3では文字色は変わっていたのですか？
Lhankor_Mhyさん
WCBカフェのstyle.cssにbackground-colorを追記すると、背景色が反映されます。チャプター３−３での背景色も反映されます。background-imageだけが反映されません。
Lhankor_Mhyさん
参考書も、backgroundo-imageプロパティ以外の、学習は問題なく進めることができました。
> WCBカフェのstyle.cssにbackground-colorを追記すると、背景色が反映されます。
ですが、ご提示のスクリーンショットは背景色ついてないですよね？
この時だけ、別のファイルでテストしたのですか？
あ、2枚目のスクリーンショットと5枚目のスクリーンショットのコードが違う……
マジで別のファイルでテストしてるのか……
＞ご提示のスクリーンショットは背景色ついてないですよね？
あっ３枚目のスクショですよね？これは、背景色つきました。
＞2枚目のスクリーンショットと5枚目のスクリーンショットのコードが違う……
２枚目はhtml、３枚目はstyle.cssだと思うのですが、何のコードが違うのですか？
ああ、1枚目でした、失礼しました
多分、別のファイルを気がつかずに開いていることが問題の原因でしょうね……
別のファイルが開いているのはどこで確認すれば良いですか？
アドレスバーです。
そこに表示されている文字列がファイルの場所を示しています。
イマイチよくわかってません。
たとえば、以前のスクリーンショット（削除済みのもの）には、
/Users/【ユーザー名】/Downloads/style.css
とアドレスバーに書いてありました。
これは、Usersフォルダの中の【ユーザー名】フォルダの中のDownloadsフォルダの中のstyle.cssというファイル、という意味です。
madmax4さんはWCBカフェフォルダの中にあるファイルを表示させようとご質問されていると思っていますので、当方からは違うファイルを開いているように見えます。
ですので、当方は、「スクリーンショットを貼り間違えているか、違うファイルを見てないですか？」ということを何度か申し上げていたところです。
つまりdevtool の画像リストに表示されるパスが”Users/ユーザー名/WCBカフェ/style.css”でないと反映されないってことですか？
ネットワークのログのことを言っているのでしたらそれはまあそのとおりなのですけど、どのファイルを開いているのかわからないというのはそれ以前の問題かと思いますが……
どーやって確かめたら良いのでしょう？
アドレスバーを見るといいかと思います
解決しました。
いつも反映させる時には、場所をデスクトップに指定しブラウザを表示させていました。そこでのアドレスがdesktoptと表示しています。なのでdesktopをWCBカフェに変換。すると画像が反映されました。ってことはエディターのデスクトップフォルダーの階層をWCBカフェと同じ形に書き換えたら、どうなんだろうと思い、試してみると上手く反映できました。
Lhankor_Mhyさん、ありがとうございます。
回答6件
0
ベストアンサー
うまくいっていない web page を見た際にどううまくいっていないのかの判断しましょうという話であれば F12(開発者ツール) をうまく使うことをおすすめします。
https://learn.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/overview
html
1<main> 2 <base href="https://picsum.photos" /> 3 <!-- #region 存在する画像パス --> 4 <h1>success</h1> 5 <img src="id/237/200/300" /> 6 <div class="image-1"></div> 7 <style> 8 .image-1 { 9 background-image: url("seed/picsum/200/300"); 10 height: 300px; 11 width: 200px; 12 } 13 </style> 14 <!-- #endregion --> 15 <!-- #region 存在しない画像パス --> 16 <h1>fail</h1> 17 <img src="id/1235" /> 18 <div class="image-2"></div> 19 <style> 20 .image-2 { 21 background-image: url("seed"); 22 height: 300px; 23 width: 200px; 24 } 25 </style> 26 <!-- #endregion --> 27</main>
https://livecodes.io/?x=id/tgg78mjc9q9
例えば上記のページを元に判断する場合
当該ページを表示して、 F12 (ページ右クリックから 検証 ? でもよい 別のショートカットもある) から ネットワーク ( Network ? ) タブを表示しましょう。
https://learn.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/network/
フィルターの 画像 ( Img? ) を選択 すると 画像の読み込みが一覧に表示されます。
表示されていないのであれば一度再読み込みしてみましょう。
今回のページだと 赤字になっている seed と 1235 が 状態 404 となっています。
404 はファイルが見つからなかったエラーです。
赤字の 1235 をクリックすると詳細情報を表示することができます。
この画像は https://picsum.photos/id/1235 として読み込もうとしようとしたことがわかります。
他に「正しい」パスがあるのでしたら、そうなっているかを確認することができます。（なんならそのパスに直接アクセスして試行錯誤することもできます。
以上。
追伸
例えば、そちらの表示されない 画像は どの様なパスで 表示しようとブラウザさんはされようとしておられますでしょうか？
また、そのパスに直接アクセスして表示できますでしょうか？（正しいパスは確認できていますでしょうか？）
投稿2025/03/14 01:11
編集2025/03/14 01:23総合スコア711
回答ありがとうございます。F12(開発ツール)に関して、後ほど試してみます。
“追伸”についてですが、「１冊ですべてが身につHTML&CSSとWebデザイナー入門講座」のサンプルファイルの中にby.png画像が入っており、ダウンロードして表示してます。パスに直接アクセスして表示、とはどーやるのでしょうか？ど素人の質問ですいません💦
いや、多分 ネットワークから詳細を見た場合の 画像のURLが http://localhost/... みたいなアドレスになっていると 思うのですが、そのアドレスをコピーするなりして 直接ブラウザのアドレス欄に入れてアクセスするの意です。そのアドレスがおかしければ推測を立ててアクセスしてみたらいいのでは？くらいのニュアンスで言っています。
ちゃんと表示できるURLができるのであれば CSS に 相対パスで書くだけなので容易いと思います。
ネットワーク詳細からみた画像のurlが、そもそも見当たらないないです。そんなことはあり得ないですか？
上記に書いてある様に 再読み込みは試されましたでしょうか？（ F12 開発者ツールの ネットワークを開いたときから の ネットワーク通信を リストに出す為
junerさん。
上記に書いてあるように画像の読み込みをしてみましたが、何もリストが出ませんでした。web上で画像が反映されていないから、リストの出ないのでしょうか？
フィルターしなければ html と css の読み込みだけ表示されるということでしょうか？それ以外もありますでしょうか？
横からすみません、削除されたスクリーンショットを見たのですが、index.html ではなくて、style.css を開いて devtool をご覧になっていました。
あーそれは css しか読み込まれていない……。
style.cssとindex.html、それぞれでdetailを開いて、リストが何もでませんでした。というやり方は正しくないですか？
index.html をブラウザで開いて index.html に書いてある css をブラウザが実行した結果 画像が読み込まれるかどうか？ではないでしょうか。 その時の 読み込もうとしている画像のアドレスが何かが重要なので。
css を単体でブラウザで開いたとして、画像を読み込んだりはしませんし。
junerさん。htmlとcssのdevtoolリストを表示しました。このようにネットワーク→画像を押しても読み込まれませんでした。
画像のフィルターを外した場合は html と css が読み込まれるのでしょうか？
初期状態でリストされないのでしたら再読み込みしてください
画像のフィルターを外すのはどうやったらいいのでしょうか？
htmlを再度読み込みしたら、bp.pngが（失敗)net::ERAと赤字で表示されました。赤字をクリックすると、リクエストURLにパスが表示されました。このパスは質問欄に挙げた絶対パスとは異なります。
またstyle.cssは、再度読み込みしても表示されませんでした。
画像のフィルターは フィルター一覧にある画像 が活性色してるので再度クリックで外れると思います。
net::ERA はどこの欄に表示された文字列ですか？ ステータス？
net::ERAはステータスに表示されてます。すいません。フィルター外すのがわかりません💦
ちなみに表示されたパスはどの様なパスだったのでしょうか？（個人情報があって問題があるならその箇所を * *** にしてください
junerさん
file:///Users/*****/Desktop/images/bg.png
です。
そのURLを ブラウザのアドレスに入れて表示できますでしょうか？
ブラウザのアドレスに入力しても表示されませんでした。
当たり前ですが、絶対パスをアドレスに入力すると画像が表示されます。ステータスに表示されるパスとエディターのbg.pngの絶対パスが一致していない事が、反映されない原因ということでしょうか？
それはそうなのですが、 net::ERA が出ているのは ローカルファイルをそのパスで探索したが 見つからない の意とは思うのでそれはそうだと思います。ただ、ローカルファイルの場合、 ファイルシステムのアクセス権限とかもあるので 一度別のフォルダに移動して試した方が良いのかもとも思ったりしますが、どうでしょうか？
フィルターは多分 [画像]をクリックしても解除できないので多分[すべて]をクリックで外せるとは思います。申し訳ない。
もしかして、開いているファイルと編集しているファイルが違うのではないでしょうか……？ `file:///Users/*****/Desktop/images/bg.png` ということはつまり `file:///Users/*****/Desktop/index.html` を開いているのではないでしょうか？
現在の話で出てくるファイルは `file:///Users/*****/WCBカフェ/index.html` を開くべきなのではないでしょうか？
（※ただし、ここのファイルパスに 日本語が含まれているので実際のローカルで開いた際のパス自体は`file:///Users/*****/WCB%E3%82%AB%E3%83%95%E3%82%A7/index.html` の様なエンコーディングが掛かった結果になるとは思いますが。
解決しました。
いつも反映させる時には、場所をデスクトップに指定しブラウザを表示させていました。そこでのアドレスがdesktoptと表示しているので、WCBカフェに変換してみると画像が反映されたので、
エディターのデスクトップに階層をWCBカフェと同じ形に書き換えてみました。すると上手く反映できま
した。さん、
これはもう自己解決として 顛末を書いて回答していただいた方がよさそうな内容ですね。
junerさん。たくさん考えて頂きありがとうございました。このやり取りの中でも知らないことを知れて勉強になりました。参考書通りすべて進めていたのですが、desktopフォルダーとWCBフォルダーを揃えることまでは記載されてなかったので・・・とにかく良かったです。
0
当方，ド素人ですが……
パスの関係(?)の問題だと思われるのであれば，私だったら，とりあえず以下のような確認をしてみるかな？ とか．
- どこか（今の場所とはなるべく異なる場所．何なら別のディスクドライブとか）に新しいフォルダを作る
- そのフォルダ内に html と css をコピーする
- そのフォルダ内に images サブフォルダを作り，その中に画像をコピーする
※あと，確認作業中には css 内に書かれている background-color の値を，ぱっと見で分かるような色（例えば真っ赤とか）にしておくかな，とか．
で，この新しいフォルダ内の html をブラウザで(?)開いてみる．
↓
これでもダメな場合，とりあえずこの新しいフォルダ内の html, css ファイルの記述を確認する（思ってたのとは異なる内容のものをコピーしてきていないか？ 等）．
あとは，
- 別の画像ファイルを用いても同じ結果になるのか？
- 例えば html 内に
imgタグで書いた場合にはその画像を表示できるのか？
…とか？
で，この「新しい場所に作ったコピー」の世界では全てがうまくいく，ということになった場合には，
（とりあえず大元のファイル群は適当に退避させたうえで）この「新しい場所に作ったコピー」一式を，元の場所に丸ごとコピーしてみる．
それで問題が出るようであれば，（htmlとかcssの記述ではなくて）その「元の場所」に何らかの原因がある（んじゃないかな）．
投稿2025/03/18 02:46
編集2025/03/18 02:55
総合スコア12138
fanaさん、回答ありがとうございます。
いつも反映させる時には、場所をデスクトップに指定しブラウザを表示させていました。そこでのアドレスがdesktoptと表示しています。なのでdesktopをWCBカフェに変換。すると画像が反映されました。ってことはエディターのデスクトップフォルダーの階層をWCBカフェと同じ形に書き換えたら、どうなんだろうと思い、試してみると上手く反映できました。
0
セミコロン忘れだと思います。
投稿2025/03/10 12:21
総合スコア37345
回答ありがとうございます。
セミコロンですが、どこが抜けているでしょうか？
これです。
https://developer.mozilla.org/ja/docs/Web/CSS/@charset
VSCode なら『問題』を表示しておいた方がいいかもしれません。
https://qiita.com/miriwo/items/9fbb822dfafe7da48468
赤線が引かれていのにスルーしていました💦ありがとうございます。実際にセミコンロを入力しましたが、やはり画像が反映されません。教えていただいた、問題表示で、他に記述ミスはありませんでした。やはりパスの位置がおかしいのでしょうか？
index.html が WCBカフェフォルダの下にいなさそうに見えますが、大丈夫ですか？
私もフォルダ構成がおかしいと思います。
回答ありがとうございます。WCBカフェの下にindex.htmlを配置してみましたが、正しいでしょうか？この位置でもやはり画像は反映されませんでした。ちなみに絶対パスだと反映されることが分かりました。
絶対パスは、http://localhost/WCBカフェ/style.css や //localhost/WCBカフェ/style.css や /WCBカフェ/style.css ですか？
絶対パスは/Users/ユーザー名/WCBカフェ/images/bg.pngです。
※”実際個人名が記述されているので、このコメント欄では、個人名→ユーザー名と変更しています。
0
いつも反映させる時には、場所をデスクトップに指定しブラウザを表示させていました。そこでのアドレスがdesktoptと表示しています。なのでdesktopをWCBカフェに変換。すると画像が反映されました。ってことはエディターのデスクトップフォルダーの階層をWCBカフェと同じ階層位置に書き換えたら、どうなんだろうと思い、試してみると上手く反映できました。
投稿2025/03/18 04:20
総合スコア1
0
background: でまとめて
background: #f5f2e5 url(images/bg.png);
でどうですか？
投稿2025/03/17 23:51
総合スコア2
あなたの回答
tips
プレビュー
