Q&A
ローカルならフォルダ構造がわかるスクリーンショットなどを提示してください。
解決したい課題
背景画像を表示させたい。
##現状
DevToolsのコンソール画面では、net::ERR_FILE_NOT_FOUNDと表示されます。
また、問題となる箇所をクリックすると別タブが開いて「ファイルが見つかりませんでした」と表示さされます。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/styles.css"> <title>テスト</title> </head> <body> <div class="header"> <div class="toppage"> </div> </div> </body> </html>
CSS
.toppage { width: 100%; height: 500px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/test.jpg") }
検索して考えられることを1つずつ確認しましたが、問題点がよくわかりません。
ファイルが読み込めないとエラーが表示されておりますが、ファイルは指定のフォルダに格納しており、HTML、CSSともに記述に問題はありません。意味不明です(´･_･`)
何かわかる方、ご教示お願いできますでしょうか。
追記
body の background-color などひと目で分かるスタイルを同じstyles.cssに追加設定し、CSSファイルを読み込んでいるかチェックしてみる。
って書いてる間に構造が明らかになったけど、CSSの指定パスが間違ってるな。
いつもありがとうございます！kei344さん☺
階層が間違っていたみたいです。
htmlファイルをhtmlフォルダ配下に格納したら表示されました。。。
うー、すいません。ちゃんと理解できてなくて、
Daregadaさん☺
はい。指定パスが間違っておりました。今回は、フォルダの方を変更しました。
情けないです。すいません。
回答1件
0
ベストアンサー
[1] フォルダの構造が、上記添付ファイルのような形になっていないと、
<link rel="stylesheet" href="../css/styles.css">はエラーになってしまいます。
htmlファイルの場所は、問題はないでしょうか?
[2] cssフォルダとimgフォルダの位置関係は、添付画像の通りになっているでしょうか?
投稿2020/06/14 12:05
編集2020/06/14 12:05
総合スコア4528
ご回答ありがとうございます！new1roさん☺
ご指摘の通りの、構造にしましたら、画像が表示されました。
うーん、フォルダ階層について、勉強しますー????
あなたの回答
tips
プレビュー
