Failed to load resource: the server responded with a status of 404 (Not Found)

前提・実現したいこと

表題の通り、エラーが出ます。
daenkeiであれば、パスも何回も確認しているのに見つからないという反応になることに理解ができず
質問しました

Error
folder構造

folder構造

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

試したこと

Failed to load resource: the server responded with a status of 404 (Not Found)
を使い、検索しましたが解決できませんでした

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="robots" content="noindex">
8    <title>ユアコーディング</title>
9     <!-- Google Fonts -->
10    <link rel="preconnect" href="https://fonts.googleapis.com">
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">
13    <!---->
14    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
15    <link rel="stylesheet" href="./CSS/destyle.css">
16    <link rel="stylesheet" href="CSS/slick.css">
17    <link rel="stylesheet" href="CSS/slick-theme.css">
18    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
19    <link rel="stylesheet" href="./CSS/style.css">
20</head>
21<body>
22  <section class="fv">
23        <div class="inner fv-fx">
24            <div class="fv-img">
25                <img src="./image/manager.png" alt="" class="manager">
26            </div><!-- /.fv-img -->
27            <div class="fv-txt">
28                <div class="fv-ttl">コーディングの手間を <br> 最小に、デザインに注力 <br> する助けに</div><!-- /.fv-ttl -->
29                <p>ユアコーディングはコーディングに <br> 特化したフリーランス <br> デザインに注力されたい方の <br> 助けになります</p>
30    
31                <div class="cmn-link fv-link">
32                    <a href="#contact-link">お問い合わせ</a>
33        </div><!-- /.inner -->
34    </section><!-- /.fv -->
35    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
36    <script type="text/javascript" src="js/slick.min.js"></script>
37    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
38    <script type="text/javascript" src="js/script.js"></script>
39</body>
40</html>

CSS
1.fv {
2  width: 100%;
3  height: 674px;
4  position: relative;
5  background-image: url(../../image/daenkei.png);
6  background-position: top -150px right -220px;
7  background-repeat: no-repeat;
8  background-size: auto;
9}
10
11.fv .fv-img {
12  width: 40%;
13  position: absolute;
14  vertical-align: bottom;
15  top: 150px;
16  left: 800px;
17}
18
19@media screen and (max-width: 769px) {
20  .fv .fv-img {
21    width: 50%;
22    position: absolute;
23    top: 70%;
24    left: 50%;
25  }
26}
27
28@media screen and (max-width: 576px) {
29  .fv .fv-img {
30    width: 40%;
31    position: absolute;
32    top: 80%;
33    left: 40%;
34    vertical-align: bottom;
35  }
36}
37
38@media print, screen and (max-width: 1024px) {
39  .fv .fv-img .manger {
40    width: 100%;
41  }
42}
43
44.fv .fv-txt {
45  margin-left: 192px;
46}
47
48.fv .fv-txt .fv-ttl {
49  font-size: 3.2rem;
50  font-weight: bold;
51  margin-top: 160px;
52  margin-left: 190px;
53  font-weight: bold;
54  position: absolute;
55  top: 60px;
56  left: 10px;
57}
58
59@media screen and (max-width: 576px) {
60  .fv .fv-txt .fv-ttl {
61    font-size: 2.5rem;
62  }
63}
64
65@media screen and (max-width: 1200px) {
66  .fv .fv-txt .fv-ttl {
67    top: 60px;
68    left: -40px;
69  }
70}
71
72.fv .fv-txt > p {
73  display: block;
74  margin-top: 44px;
75  margin-left: 190px;
76  font-weight: bold;
77  position: absolute;
78  top: 350px;
79  left: 10px;
80  line-height: 1.6875;
81}
82
83@media screen and (max-width: 1200px) {
84  .fv .fv-txt > p {
85    padding-top: -30px;
86    left: -40px;
87  }
88}
89
90.fv .fv-link {
91  position: absolute;
92  top: 500px;
93  left: 10px;
94  margin-left: 192px;
95}
96
97.fv .fv-link > a {
98  display: block;
99  text-align: center;
100  padding: 8px;
101  color: #FFF;
102}

js
1 $(function(){
2  $('#slider').slick({
3    infinite: true,
4    slidesToShow: 3,
5    slidesToScroll: 3,
6    autoplay : true,
7    Speed: 3000,
8    autoplaySpeed: 5000,
9    arrows: false,
10    centerPadding: '100px',
11    centerMode: true,
12  responsive: [
13      {
14        breakpoint: 753,
15        settings: {
16          slidesToShow: 1,
17          slidesToScroll: 1,
18          infinite: true,
19          dots: true,
20          centerPadding: 0,
21          centerMode: true,
22          
23        }
24      },
25      
26    ]
27    }); 
28});

fj68

2021/10/28 08:32

「Failed to load resource:〜」はファイルが見つからない時のエラーです。 CSS, JS, 画像など提示されたソースコードで読み込まれている各ファイルの配置がわかる情報を追記してください。もしかしたらエラーが出た画像を貼り付けてくださるおつもりだったのでしょうか。わかりやすくていいのですが、残念ながらMarkdownの書き間違いで画像ファイルが表示されておらず、見ることが叶いません。「```」で「![Error](〜.jpeg)」が囲われてしまっているせいですので、「![Error](〜.jpeg)」の上下の「```」を削除してください。また、何らかのサーバを利用しているのであればその情報も追記してください。ローカル環境で開発サーバを立てているとか、それとも何かしらのホスティングサービス（GitHub Pagesとか）を使っているとか。

KAOsaka

2021/10/28 08:57

css/slick-theme.cssに関してはディレクトリ名が大文字のところを小文字で書いてしまってますね。可能であればimageディレクトリの中もスクリーンショットしていただけると回答しやすいかもしれません。

free_teku

2021/10/28 09:26

ご回答ありがとうございます。感謝いたします。それぞれについて、変更しましたのでご教授いただけると幸いです。

KAOsaka

2021/10/28 09:36

拡張子も表示させてみてください。https://news.mynavi.jp/article/20210204-1689700/

free_teku

2021/10/28 10:40

拡張子追記しました。因みに、何か理由があるのでしょうか？拡張子が種類のところで確認できると思うのですが、、もし差し支えなければこちらも教えてください。

KAOsaka

2021/10/29 01:15

PNGファイルの場合拡張子は.png、.PNGどちらの可能性も考えられます。プログラミングをする場合には拡張子を表示させているほうが安心できます。

free_teku

2021/10/29 01:37

生意気なことを聞いてしまい、失礼いたしました。学べました。ありがとうございます

回答2件

ベストアンサー

ディレクトリ構造が

plain
1├─ CSS/
2│  └─ style.css
3├─ image/
4│  └─ daenkei.png
5└─ index.html

このようになっていますので、style.cssからdaenkei.pngを参照するためには、

１階層さかのぼり、
imageディレクトリの中の
daenkei.png

というように辿る必要がありますので、style.cssでは以下のように指定する必要があります。

css
1background-image: url(../image/daenkei.png);

投稿2021/10/29 01:22

KAOsaka

総合スコア531

回答へのコメント

free_teku

2021/10/29 01:39

ご回答ありがとうございます。そのディレクトリーにscssフォルダーがcssと同じ階層にあります。 scssの中の、fv.scssでbgを書いています。説明が足らず、申し訳ありません！

KAOsaka

2021/10/29 01:42

SCSSは最終的には参照されないので関係ないです。`background-image`のurlを修正しても表示されないですか？

free_teku

2021/10/29 05:12

ローカル環境、本番環境、双方とも表示できました。ありがとうございます。

free_teku

2021/10/29 05:13

そうｓると、プラグインの問題なのでしょうか？確かに、理論上は、KAOsakaさんの言うように正しいのですが、めんどくさいこともありそのままじどうてきに表示されたとおりに書いちゃいます

KAOsaka

2021/10/29 08:30

SCSSのトランスパイルの問題ということでしょうか？今回のご質問ではSCSSのソースが提供されていないのと、トランスパイル用の設定もどのようにされているか分からないので、気になるようであればその辺を提示して別で質問を立てられると良いかと思います。

free_teku

2021/10/29 09:11

かしこまりました。ここまで、丁寧に対応していただき、解決していただきありがとうございます。

提示コードのCSSがどのパスに存在するか明らかではないですが、相対パス指定の間違いではないでしょうか？

diff
1-   background-image: url(../../image/daenkei.png);
2+   background-image: url(../image/daenkei.png);

追記

SCSSは必ずCSSへのコンパイルが必要です。
HTMLを見る限り、コンパイル先は./CSS/style.cssではないですか？
これが正しければ上記コードの+の指定が正しいはずです。

そもそも直にPNGにアクセスはできますか？
https://hoge.fuga/image/daenkei.png
これができない場合は色々な前提が崩れます。

投稿2021/10/28 12:34

編集2021/10/28 13:15

k_a

総合スコア978

回答へのコメント

free_teku

2021/10/28 12:41

ご回答ありがとうございます。いえ、プラグイン使っていますが、「＋」のようには自動的に表示されません。 bg～urlはfv.scssに書いています。fvはcontentフォルダーにあり、contentフォルダーはScssフォルダーにある感じです。従って、「ー」のほうが正しいです。

free_teku

2021/10/28 13:59

ご回答ありがとうございます。正直、プラグインの舞違いなんですかね？どちらも、再度打ち直ししていますが、パスの間違いではなさそうです。こちらのURLをCSSに張り付けてアクセスできるかの確認で間違えないですか？

k_a

2021/10/28 14:41 編集

違います。（おそらく）htmlはブラウザで動作しているはずです。そのブラウザのURL入力欄にPNGファイルのURLを直に入力してアクセスできるか、ということです。それで表示されるならcssなどのリンクの間違いが疑われますが、表示されないならそもそもの環境が何かおかしいです。（表示されるはずですが）表示された場合、次はindex(html)にpngファイルの表示を直書きしてそれで表示されるかを確認します。次はindex(html)と同階層にcssファイルを作り（or scssからコンパイル)、cssの記述で画像が表示されるかを確認します。次は、、、、こんな感じで1段階ずつ問題を確認していけばどこかで表示されなくなるはずなので、どこが悪いのかわかると思います。

free_teku

2021/10/28 15:33

k4aさん、ご丁寧にありがとうございます。アクセスできませんでした。そうすると、環境がおかしいということですね？？どこなんでしょう？もともとxd　デザインにあた.svg拡張子をpngに変更しています。

あなたの回答