HTMLの相対パスでの画像表示に問題がある
- HTMLの下階層から相対パスをしても、ヘッダー・メニュー・フッターの画像が表示されない問題が発生している。
- トップページは正常に表示されるが、新規のディレクトリで画像が表示されない。
- CSSは効いているが、画像の相対パスが正しくないため表示されない状況と考えられる。
- ベストアンサー
HTMLの下階層から相対パスをしてもだめ
いつもお世話になっております。 今回はhtmlについて教えて下さい。 まずトップページを作成しました。 ヘッダー・メニュー・フッターはインクルードをしています。 他の画像内容index.htmlと同列にimgフォルダを使ってます。 ここまでは完成しているのですが 次に新規でabcというディレクトリを作成しました 中身のindex.htmlは、ひとまずトップページのindex.htmlをコピーして 修正を行いcssや相対パスや画像の書き換えは行いました。 コンテンツの中の画像は反映されるのですが ヘッダー・メニュー・フッターの画像がなぜか表示されません。 普段はPHPを使用しているのですが 画像は表示されないことがなかったため 何か間違っているのか教えていただきだいと思い書き込み致しました。 トップページは普通に表示されます ディレクトリを作るとｃｓｓは効いていますが 画像のようになります。 よろしくお願い致します。
- chororin777
- お礼率22% (19/85)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ディレクトリを分けるとリンクは外れます。 簡単にはデレクトリーを分けずに作成すれば問題は無いのでしょうね。
その他の回答 (2)
- chie65535
- ベストアンサー率43% (8508/19344)
abcフォルダを作る前のディレクトリ構成は以下のようになっていた筈です。 / index.html ┗/img/ 画像ファイル この状態で、ヘッダー、メニュー、フッターで画像を指定する場合 <img src="img/画像ファイル"> のように指定していた筈です。 abcフォルダを作り、その中でヘッダー、メニュー、フッターで画像を指定する場合 <img src="img/画像ファイル"> のように指定すると / コピー元index.html ┣/img/ 画像ファイルがここにあっても使われない ┗/abc/ コピーしたindex.html ┗/img/ 画像ファイルはここにあるのを使おうとする というディレクトリ構成になってないといけません。 つまり /img/ と /abc/img/ の２つのフォルダに、それぞれの階層用として同じ画像を用意しないとなりません。 「/img/」にある画像ファイルは「コピー元のindex.html」から使われます。 「/abc/img/」にある画像ファイルは「コピーしたindex.html」から使われます。 ２つのindex.htmlで、同一の「/img/に格納された画像」を使いたいなら、どちらも <img src="/img/画像ファイル"> のように「WEBルートフォルダからの絶対パス」で指定しなくてはいけません。 「WEBルートフォルダからの絶対パス」で指定するので「URLの先頭のスラッシュ」が重要になってきます。
- t_ohta
- ベストアンサー率38% (5061/13227)
その表示は画像ファイルのパスが間違っている時の表示ですね。 ヘッダーフッター部の画像ファイルへのパス指定が間違っているのでしょう。
関連するQ&A
- ＣＳＳが反映されない（相対パスを使う？）
ＦＣ２でホームページを作っています。 ＲＯＯＴディレクトリには ｓｔ．ｃｓｓ、ｉｎｄｅｘ．ｈｔｍｌ などを作りました。そこにある全ての ページにＣＳＳが反映されています。 その下の階層に ｉｍｇディレクトリと、自分の書いた作品を入れるためのディレクトリを 作りました。ｉｍｇディレクトリの中にはｇｉｆ形式の画像（ホームページのレイアウトに使う画像） ファイルが入っています。 作品を入れているディレクトリのページを見ると、ＣＳＳが反映されておらず、 真っ白のページに文字が左詰めで書いてあるだけでした。 そこで、相対パスというものを使ってＣＳＳを反映させたいです。 相対パスの説明サイトを見ても全く分かりませんでした。 特に、「./」の使い方が分からなかったです。これをどうやって使うのか？ もしくは 別のを使うのか？ 仮に「./」を使うとして、それをどこに書き込めばいいのかも分かりません。 <link rel="○○（反映させたいページ）/stylesheet" href="st.css" type="text/css"> これのどこかに書き込むと反映されるようになると説明があったのですが…。 ご回答をお願いします。
- ベストアンサー
- HTML
- 階層が違う場合の絶対パス相対パスについて
kari.htmlにある内容のボックスがあるとして、 それはCSSでデザインされ、画像も入っています。 この下の階層の menu.htmlの中にkari.htmlで使ったある内容ボックスの同じものがまるまる入ります。 なので、kari.htmlの内容を更新してコピーしてmenu.htmlにもはります。 この場合、画像やCSSを相対パスではなく、絶対パスにしておくと、階層が異なっても きれいに入ります。 ../からではなく、/から始まるパスです。 このやり方は間違っているのでしょうか？ 同じようにページ、階層を渡って共通部分には絶対パスをしています。 こういうふうに使い分けしていくものでしょうか？ phpでインクルードしてもいいんですが、他にもインクルードが多々あるので、 ページ内でそんなにインクルードあってもいいものかと思いまして。。（勝手な勘違いでしょうか？） 宜しくお願い致します。
- ベストアンサー
- PHP
- ディレクトリ構成【「common」を使いますか？】
サイトのディレクトリ構成について質問です。 よく「common」ディレクトリを使用して前ページ共通のファイルを格納しているサイトをみかけますが、【図(1)】のようになっているものが多いように思います。 （色々なファイル名や整理、分割の仕方はあると思いますが、ここでは共通CSSをcommmon.css、各ページのCSSをpage.cssとしておきます。「アクセス」ページ（地図などを掲載しているページ）を加えてみました。） しかし、page.cssは個別の設定であるため「common」の中に入っていることに違和感を覚えます。 次に「common」を使用しない場合ですが、こういった場合、ヘッダやフッタ等に使用する共通画像の置き場所に困ってしまいます。 例えば【図(2)】にすると、トップページの画像ディレクトリの中にcommon/共通画像が格納されていて気持ち悪い感じです。 皆さんどのようにディレクトリを整理しておられますか？ できるだけすっきりとわかりやすい構成にしたいのですが・・・。 （※条件：できれば各ページの画像は各ページのimagesディレクトリに入れたい。） 知恵をお貸しください！ 【図(1)】 index.html ※トップページ │ ├common┬─css──┬─common.css ※サイト共通のCSS │ │ └─page.css │ └─images ※サイト共通の画像 │ ├images ※トップページ画像 │ │ └─ access┬─index.html └─images ※「アクセス」ページの画像 【図(2)】 index.html ※トップページ │ ├images ※トップページ画像 │ └─common ※サイト共通画像 │ ├css ───┬─common.css ※サイト共通のCSS │ └─page.css ※各ページのCSS │ └─ access┬─index.html ※アクセスページ └─images ※「アクセス」ページの画像
- ベストアンサー
- CSS
- CSSでのページ構築について
CSSでのページ構築について CSSでのサイト制作に挑戦しています。 まずは、テンプレートをつかってカスタマイズしてみようとおもい、テンプレートをDLしました。 「フッタ／左メニュー／メインコンテンツ／フッタ」というブログなどでよくあるものです。 （縦三段で、真ん中が左右２つに別れている2カラム） CSSファイルは、外部読み込み形式です。 トップページを作って、いざメニューからメインページのリンクを貼ろうと思ってつまずきました。 左ページのコンテンツメニューに設定したリンクを、右側の枠内に表示したいのですが、そういった場合は、どうすれよいでしょうか。普通に右側の内容をいれたHTMLにリンクすると、全画面がそのページになってしまって、ヘッダ／左メニュー／フッタは消えて（隠れて）しまいます。 ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすらコピーして、右側の要素部分だけを変更していくのでしょうか？ でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。 自分なりにCSS関連のサイトを検索して調べてみたのですが、どこも「トップページをそのままコピーしているようにしかみえない」のです。 右側ページ内容のHTMLに、ヘッダやメニューも読み込ませるような設定が必要なのでしょうか？ ソフトはDW CS4を使っています。 どなたか、CSSの達人さま、教えてくださいませ。 お願い致します。
- 締切済み
- ホームページ作成ソフト
- javascript 相対パス表示
javascirptで、現在のページのディレクトリを取得し サイトルート相対パスで表示させるには どうしたらよいでしょうか？ 例；http://testweb.co.jp/test01/test02/test.html ↓ サイトルート相対パスでディレクトリのみを表示 /test01/test02/
- ベストアンサー
- JavaScript
- HTMLでソースを共通化する
HTMLでのWEBページ作成で、「共通モジュール」のような考え方で ソースを共通化したいと考えています。 どのようにすればよいのでしょうか？ ヘッダ部やフッタ部・サイドメニューのようなもの等を 各ページで同じ物を表示したいのです。 ご指導をお願いします。
- ベストアンサー
- HTML
- 絶対パス・相対パス・ディレクトリ・について
HTMLでホームページを作ろうとしている初心者です、教えてください 自分のホームページのフォルダの中ににリンクするパスの指定方法を相対パスというのはわかりましたが、画像を表示するためのパスの指定方法も相対パスでいいのでしょうか、それともディレクトリというんでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- フッターがウインドウの一番下にいきません。
Dreamweaver CC2014を使ってWebサイトを作っています。 レイアウトを決めるために画像を作り、これを基に、フッターを常にウインドウの一番下にきてほしいのですが、ヘッダーの下にきてコンテンツの上に浮いてしまったり、もしくはサイドメニューの下に沿って表示してしまったりと、どうしても思うようにレイアウトできません。 どのようにHTMLとCSSの設定をすれば、この画像のようにレイアウトできるのでしょうか？
- ベストアンサー
- CSS
- トップページへの相対パスについて
皆さんこんにちは。 現在、大きく3つにフォルダを分けhtmlや画像をまとめています（仮にa、b、c）。 その中のaフォルダの中にある「top.html」を 全体のトップページとして扱い、abcフォルダ内の全てのページから相対パスでリンクを張っています。 現在「http://～～～com/a/top.html」となっているこのページに、 「http://www.○○.net」と任意のアドレスを指定すると相対パスが全て効かなくなってしまいますか？ 効かなくなってしまうのなら、何かいい方法はないでしょうか。。 お願いします！
- ベストアンサー
- HTML
- 【DreamweaverCS5】ナビの画像について
Dreamweaverを利用してHPのヘッダやフッタ、ナビ（メニュー）を テンプレート化しようと思うのですが、 選択されているhtmlによって、該当するナビだけ違う画像を表示したいと思っています。 （http://www.okwave.co.jp/index.html のヘッダメニューのように） その場合は、ナビ部分をテンプレートに含めてしまうのは無理なのでしょうか。 例） index.html、company.html、qa.htmlとあった場合、 index.htmlのときのナビ画像は image1 image2 image3 company.htmlのときのナビ画像は、imageor1 image2 image3 qa.htmlのときのナビ画像は、image1 imageor2 image3 のような感じです。 思いついたのが、 メインのCSSと、ナビ用の画像を指定するCSSを分けて、 各htmlごとに、それぞれのナビ用のCSSを指定するやり方です。 一応これでナビもテンプレート部分に収めることができたのですが、 もう少し賢いやり方や方法があるのではないかと思っています。 メニューの中で、表示中のものだけ画像が違うのは 非常に良くあるパターンなので、何か賢いやり方があるのではないかと 思っています。 分かる方ご教授お願いします。
- ベストアンサー
- HTML
