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

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

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

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

FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

HTML5

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

解決済

Filezillaを使うと、一部の画像が表示されない

free_teku
free_teku

総合スコア82

CSS3

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

FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

HTML5

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

2回答

-2評価

0クリップ

450閲覧

投稿2021/12/11 05:46

編集2021/12/18 06:37

前提・実現したいこと

表題の通り、前にも起こったのですが、一部の画像が表示されなくなります。
私は、パスを間違えないように自動的に入力できるプラグインを使っています。
なので、vscodeでそれ通り記述しています。

今回、前にも起こったことがあるため、
原因追及のため、」ここで質問しました

原因追及:相対パスが原因でした
scss:(../../img~)→ SCSSフォルダーがさらに3つのフォルダーに分かれているため、左記の表記です
css:自動的に../../img表示。これをimgフォルダーでも分類していないため、相互で不釣り合いの相対パスになるという認識で間違えないでしょうか?

この仮説が正しいとすると、フォルダー構成を考えていかないといけないため、ご教授お願い致します。

前提:SCssで書いています。
ファイル構造は下記です
ftp-no-img

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

background-img:;URL ();の時に起こります

試したこと

・確認
改めて、パスが間違えていないかを確認しました。自動的に入力できるプラグイン通りにしています。
余分な「../」もないです。

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <title></title> <link href="./css/style.css" rel="stylesheet"> </head> <body> <section class="access"> <div class="ineer"> <div class="sec-theme aos-init aos-animate" data-aos="zoom-in"> <img alt="ロゴ" src="./img/logo02.png"> <p class="cmn-ttl">アクセス</p><!-- /.cmn-ttl --> </div><!-- /.sec-theme --> <div class="access-flex"> <img alt="access" class="aos-init aos-animate" data-aos="fade-right" src="./img/acess.jpg"> <div class="access-txt aos-init aos-animate" data-aos="fade-left"> <div class="access-desc"> <p class="extra-bold">住所</p> <p>〒000-0000<br> 山形県鶴岡市xxxxxxxxxx</p> <p class="extra-bold">TEL/FAX</p> <p>000-0000-0000/00-0000-0000</p> </div><!-- /.access-desc --> <div class="access-sale"> <p class="extra-bold">営業時間</p> <p>14:00-23:00</p> <p>*4名以上のご予約の場合は、最寄り駅の「鶴岡駅」より送迎が可能ですので、 ご連絡ください。</p> </div><!-- /.access-sale --> </div><!-- /.access-txt --> </div><!-- /.access-flex --> <!-- <div class="accsess-map-inner"> --> <div class="map"> <iframe allowfullscreen height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24933.858417388372!2d139.58105087468056!3d38.63203904518239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8c6dbd6c03ae15%3A0x10bc5da99bc816ef!2z44CSOTk5LTcyMDUg5bGx5b2i55yM6ba05bKh5biC5rip5rW3!5e0!3m2!1sja!2sjp!4v1631286921047!5m2!1sja!2sjp" style="border:0;" width="600"></iframe> </div><!-- /#map --> <!-- </div>/.accsess-map-inner --> </div> </section><!-- /.acsess --> </body> </html>

追記 ディレクトリー構造

ディレクトリー構図の共有です。よろしくお願いいたします。
coding2
├── css
│ ├──style.css
│ ├──destyle.css


├── scss
│ ├── layout
│ └── foundation
│ └── content
│ └──access.scss

├──img
├── bg-japanese-paper.png

補足情報(FW/ツールのバージョンなど)

下記にフォルダー添付します。ご教授頂けると幸いです。
何卒よろしくお願いいたします。(__)

FTPソフトはFilezillaのことを指いています。
ローカルではきちんと保存されています。
画像2

画像2は、background-imgの相対パスと左の状況を示しています。
相対パスは正しいですが(画像3を見ればわかります)、非表示です。「../../」→「./../」に変更することでgoogle
ツール上では見れます。ここに違和感とfilezillaを使って、何回やってもできないため、質問しています。

本当にいろいろ試していますが、できないです。↓

追記

1

エラーがこれに値するかも

googleツールで見るとエラー:「Failed to load resource: the server responded with a status of 404 ()」です。

いろいろ調べると、サーバーを通して画像が表示されないような記事が見つかり、こちらを参考に「img/」の後ろに
「#{@user.id}.jpg,png」を書いてますが、こちらも表示できませんでした。
※しかし、「#{@user.id}.jpg,png」を書いたところは
「Failed to load resource: the server responded with a status of 404 」は消えましたが、結論、反映されません。

2.filezillaを自動選択設定にして、修正→できない

根本的に何が原因でどんな改善策があるのか、ここまでしてできないとわからないです。ご教授お願い致します
※初めは、相対パスだと思いましたが、、

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2021/12/11 05:53

そもそも提示のhtmlにはcssがリンクされてません。 あと、どんなに「自動で入力」と訴えたところで、それで本当に正しいという証拠にはなりません。起きていることが事実なのですから、きちんと「そのcssの記述のあるファイルからのパス」になっているのか確認する必要はあります。 嫌なら絶対パスにするしかないです。 現在提示されている情報から他者が言えることは先に書いた「そもそもcssがリンクされてない」ということくらいです。リンクされているとしてもサーバー上の構造も提示されてないので他者には確実なことは言えませんので「パスが違うかキャッシュかscssそのままやってしまってるか」くらいですかね。
m.ts10806

2021/12/11 07:53 編集

・bg-img とは何でしょうか ・「FTPを使うと」というタイトルですが質問本文に何も言及されていないので関連性が不明です ・imgフォルダに配置されていて、imgフォルダと同階層のHTMLを呼び出しているならどの画像も表示されます。本当にその画像名でしょうか。トップフォルダだけ提示されてもこちらでは判断できません。「FTP」という単語からの想像でしかないですが、ローカルではちゃんと表示確認されてるのでしょうか。
free_teku

2021/12/11 08:24

m.ts10808さん ご回答ありがとうございます。 CSSがリンクされてないことはないかな、と思います。きちんとほかの装飾はしているからです。
m.ts10806

2021/12/11 08:28

>CSSがリンクされてないことはないかな、と思います 「他が装飾されてる」というのが質問内容からは伝わりませんでした。 ただ「リンクされてるかどうか」の根拠が「ブラウザのコンソールに404エラーが出ていない」というのでしたら納得できますが、その確認はされてないということですよね。
free_teku

2021/12/11 08:28

bg-imgはbackground-img: url(../../img~);です。 FTPソフトはFilezillaのことを指いています。 ローカルではきちんと保存されています。 ※わかりにくく、申し訳ありません。 何卒よろしくお願いいたします。
m.ts10806

2021/12/11 08:41

質問内容調整してください。 「bg-img」という独自表現もそうですし、他者が再現するには情報が不足しすぎています。 今言えることは先に書いたように「コードに指定している場所にファイルがあれば全部ちゃんと表示される」ということだけ。
free_teku

2021/12/14 05:46

遅くなりました。修正しました。ご確認いただけると幸いです。<(_ _)> よろしくお願いいたします。
m.ts10806

2021/12/15 21:06

既にした回答と変わりはないです。404の原因はそうたくさんありません。 それにディレクトリー構造には画像で提示されているimg/bg.pngというのはないようですが。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

HTML5

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