こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HTMLの下階層から相対パスをしてもだめ

いつもお世話になっております。
今回はhtmlについて教えて下さい。

まずトップページを作成しました。
ヘッダー・メニュー・フッターはインクルードをしています。
他の画像内容index.htmlと同列にimgフォルダを使ってます。
ここまでは完成しているのですが

次に新規でabcというディレクトリを作成しました
中身のindex.htmlは、ひとまずトップページのindex.htmlをコピーして
修正を行いcssや相対パスや画像の書き換えは行いました。

コンテンツの中の画像は反映されるのですが
ヘッダー・メニュー・フッターの画像がなぜか表示されません。
普段はPHPを使用しているのですが
画像は表示されないことがなかったため
何か間違っているのか教えていただきだいと思い書き込み致しました。

トップページは普通に表示されます
ディレクトリを作るとcssは効いていますが
画像のようになります。
よろしくお願い致します。

投稿日時 - 2017-02-28 10:39:52

QNo.9299181

すぐに回答ほしいです

質問者が選んだベストアンサー

ディレクトリを分けるとリンクは外れます。

簡単にはデレクトリーを分けずに作成すれば問題は無いのでしょうね。

投稿日時 - 2017-02-28 11:26:07

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

abcフォルダを作る前のディレクトリ構成は以下のようになっていた筈です。

/ index.html
┗/img/ 画像ファイル

この状態で、ヘッダー、メニュー、フッターで画像を指定する場合
<img src="img/画像ファイル">
のように指定していた筈です。

abcフォルダを作り、その中でヘッダー、メニュー、フッターで画像を指定する場合
<img src="img/画像ファイル">
のように指定すると

/ コピー元index.html
┣/img/ 画像ファイルがここにあっても使われない
┗/abc/ コピーしたindex.html
 ┗/img/ 画像ファイルはここにあるのを使おうとする

というディレクトリ構成になってないといけません。

つまり
/img/

/abc/img/
の2つのフォルダに、それぞれの階層用として同じ画像を用意しないとなりません。

「/img/」にある画像ファイルは「コピー元のindex.html」から使われます。

「/abc/img/」にある画像ファイルは「コピーしたindex.html」から使われます。

2つのindex.htmlで、同一の「/img/に格納された画像」を使いたいなら、どちらも

<img src="/img/画像ファイル">

のように「WEBルートフォルダからの絶対パス」で指定しなくてはいけません。

「WEBルートフォルダからの絶対パス」で指定するので「URLの先頭のスラッシュ」が重要になってきます。

投稿日時 - 2017-02-28 11:57:26

ANo.1

その表示は画像ファイルのパスが間違っている時の表示ですね。
ヘッダーフッター部の画像ファイルへのパス指定が間違っているのでしょう。

投稿日時 - 2017-02-28 11:08:42