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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

592閲覧

CSS:背景画像が表示されない問題

Mototaka

総合スコア3

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/04/18 06:29

■実現したいこと
CSSに記載した画像ファイルをWEB上で表示させたい。

■質問内容
ただいま初めてのwebページ制作を行っており
CSSにて以下のようにコードを書いていますが、web上で表示される画像と
表示されない画像を確認しており原因が特定できずにいます。
※表示されない画像はweb上の開発者ツールで確認するとチェックは入っており、
読み込みはできている?ようです。


■CSS
.top-container {
height: 500px;
margin-top: 75px;
background-image: url(C:\Users\axm25\Downloads\image\4696351_m.jpg);  
background-size: cover;
}


■試したこと
①画像資源の格納先フォルダパス変更
②png→jpg,拡張子の変更
③コードの記載ミス(不要なスペース、括弧がないか確認。)
④別の画像の読み取り確認(https://thumb.photo-ac.com/d0/d016fa834da191ed6f08e0bb0c798b08_t.jpeg→ 表示可能 )
⑤!important宣言
⑥backgroundプロパティへの置き換え
⑦width/min-widthの追加

これは単純にローカルフォルダの画像は反映されないものという理解でよいのでしょうか?

以上、何卒よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/04/18 06:53

そのWeb上 とはWebサーバのことでしょうか ローカルにおける参照のみということでしょうか
Mototaka

2023/04/18 07:03

>m.ts10806様 お手数おかけして、申し訳ありません。 WEBサーバー上と認識しております。 正確に記載いたしますとVScodeから「Browser Preview」のchromeで確認した 状態を指しておりました。
guest

回答1

0

ベストアンサー

Webは通常、ドキュメントルートが絶対パスの最上位となり、
http://example.com/ 以降はドキュメントルートからのパスを辿ることになります(フレームワークなど仕様してればまた画像本体の置き場は変わってきますが)

つまりWindows上、しかも個人のローカルのパスを記述しても、実際にWebアプリケーションが動作しているWebサーバには無関係パスなので、参照はできません。
基準はそのアプリケーションが動作している(プログラムが設置されている)場所となります。

たしかにローカルPCにそのようなディレクトリを作りファイルを置いて(アプリケーションもローカルPC)、ブラウザから直にhtml参照すれば動作は確認できますが、実際はWebサーバ上に乗るので、httpアクセスを意識したパスの記述を心がけましょう。

ただ、相対パスで記述すれば、おおよそアプリケーション環境は意識せずに済みます。
※相対パスによりcssからファイルを参照させる場合、そのcssが起点となるので注意

投稿2023/04/18 07:00

編集2023/04/19 04:26
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mototaka

2023/04/18 07:06

>m.ts10806様 ご教示いただきありがとうございました。 初歩的な仕組みの理解が不足していたことを、改めて認識しました。 今後機会がございましたら、改めてよろしくお願いいたします。
m.ts10806

2023/04/18 07:11 編集

今一度「Webページが動作する仕組み」をおさえると良いかもしれません。 例えるなら(例えすぎるのはあまり良くないけど)ブラウザはテレビそのものとリモコン、数多のWebサイト、Webサーバはチャンネル切り替えで視るテレビ番組。 とすると、世界中の人が視るときにどこにその番組を構成する材料があるべきか?を考えると明白になります。
m.ts10806

2023/04/19 04:25

>修正依頼された方 おそらく私の複数の回答に上から順番につけたような不純さしか感じないのですが、嫌がらせならやめてもらえませんか? 質問者が解決とした以上、指摘として間違っています。それでもなお修正依頼をしたといつことは相応な理由が必要です。 無言で通せる行為ではないですよ。 嫌がらせは規約違反として運営から罰せられる可能性もありますし、実際にそれでアカウント凍結される例もあります(運営にはその旨回答いただいています) 議論ならきちんとしましょう。 できないなら単なる私怨の嫌がらせです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問