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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

free_teku
free_teku

総合スコア103

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0グッド

0クリップ

11595閲覧

投稿2021/10/28 08:21

編集2021/10/28 10:39

前提・実現したいこと

表題の通り、エラーが出ます。
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});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2021/10/29 08:32

こちらの質問が他のユーザーから「過去の低評価」という指摘を受けました。

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

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

2021/10/28 10:40

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

2021/10/29 01:15

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

2021/10/29 01:37

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

回答2

2

ベストアンサー

ディレクトリ構造が

plain

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

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

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

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

css

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

投稿2021/10/29 01:22

KAOsaka

総合スコア531

free_teku, fj68👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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

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

2021/10/29 08:30

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

2021/10/29 09:11

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

1

提示コードの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
k4a

総合スコア978

Lhankor_Mhy👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

free_teku

2021/10/28 12:41

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

2021/10/28 13:59

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

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に変更しています。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。