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

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

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

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

CSS

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

Q&A

1回答

2321閲覧

階層の異なるHTMLファイルから、参照するCSSファイル経由で画像を表示しようとすると、表示されない問題

Benoit

総合スコア4

HTML5

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

CSS

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

0グッド

0クリップ

投稿2019/10/23 13:44

編集2022/01/12 10:55

前提・実現したいこと

HTML/CSS/JSを駆使してブログ等コンテンツを記載するページを作成しています。
ベースとしたファイルは、HTML5 UP!のMassivelyのテーマを使用しています。
main.cssで相対パスで背景画像を参照して、index.html内でmain.cssを相対パスでリンクさせ、背景画像を表示させました。
そこで、階層の異なるhtmlファイルarticle.htmlから、main.cssを相対パスで参照し、同じように背景画像を参照させようとすると、背景画像が読み込まれず解決できないままになりました。

ページの階層構造

structure

1Root 2 -assets 3 -css 4 -main.css 5 -noscript.css 6 -images 7 -background.jpg 8 9 -category 10 -date 11 -article.html 12 13 index.html

index.htmlのコード例 (背景画像が適切に読み込まれる)

html

1<html> 2 <head> 3 <title>Title</title> 4 <meta charset="utf-8" /> 5 <meta ... /> 6 <link rel="stylesheet" href="assets/css/main.css" /> 7 <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> 8 </head> 9 10 <body> 11 <div id="wrapper">...</div> 12 ... 13 </body> 14</html>

article.htmlのコード例 (背景画像が読み込まれない;main.cssは適用されている)

html

1<html> 2 <head> 3 <title>Article</title> 4 <meta charset="utf-8" /> 5 <meta ... /> 6 <link rel="stylesheet" href="../../assets/css/main.css" /> 7 <noscript><link rel="stylesheet" href="../../assets/css/noscript.css" /></noscript> 8 </head> 9 10 <body> 11 <div id="wrapper">...</div> 12 ... 13 </body> 14</html>

main.cssのコード例 (背景画像を相対パスで記述)

css

1#wrapper { 2 ... 3} 4 5#wrapper > .bg { 6 ... 7 background-image: url("../../images/background.jpg"); 8 <!-- これでindex.htmlには画像が表示されるが、article.htmlからは表示できていない。 --> 9 ... 10 }

試したこと

index.htmlがあるルート階層に、article.htmlを置き、main.cssへの相対パスもindex.htmlと同様に記述すると、article.htmlには背景画像が表示されました。当たり前かもしれませんが...。

補足情報

SafariおよびVS Codeでプレビューしましたが、article.htmlには背景画像が適用されませんでした。

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

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

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

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

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

miyabi_takatsuk

2019/10/23 15:25

JavaScriptは使っていないようですが、関係ありますか?? なければ、タグ外された方がよいかと・・・。
Benoit

2019/10/23 15:30

確かに本質問には関係なかったですね…失礼致しました。タグ解除しました。
miyabi_takatsuk

2019/10/23 15:37

すみません、もう3点だけ質問させてください。 ・タグの、Bloggerは関係ありますでしょうか? ・.bgのクラスがついた要素が見当たりませんが、省略しているだけなら、しっかりソースコード内にその要素も記載してください。 ・通常のHTML、CSSでは、起こり得ない(パスなどは正しく設定されている)ので、 もしかしたら、フレームワークなど使っていないでしょうか? それであれば、そのフレームワークなども記載いただかないと、問題解決につながる回答は得られないかと。
Benoit

2019/10/24 03:41 編集

質問ありがとうございます。 ・タグのBloggerも関係はありませんでしたね...これも失礼いたしました。 ・.bgクラスも確かにindex.html、article.htmlには見当たらず、一方main.cssに見られるので、私自身よくわかっておりませんでした。 ・パスが正しく設定されている、は私にとっては有益な情報です。ありがとうございます。使用しているフレームワークですが、外部のhttps://html5up.net、HTML5 UP!というCC3.0以下で無料で使用できるファイルをダウンロードし編集していました。このダウンロードしたフォルダに、categoryフォルダを作成、categoryフォルダの中にdateフォルダを作成し、dateフォルダの中にarticle.htmlを、index.htmlからコピーし、cssのリンクを上記のように変更しました。
dit.

2019/10/24 04:37

本当にarticle.htmlからmain.css読み込まれてますか?(ディベロッパーツールなどで確認しましたか/画像以外のスタイルは反映されるのでしょうか) 提示されているパスだとcategoryフォルダの中にassetsフォルダがあることになっているような気がするのですが…。 もうひとつ「../」追加してみていただけますか。
guest

回答1

0

画像とCSSの関係性が、下記の構造の通りであれば、background-image: url("../images/background.jpg");
とすると良いかもしれません。

structure

1 -css 2 -main.css 3 -images 4 -background.jpg

投稿2019/10/24 03:42

AsukaKobayashi

総合スコア296

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問