Q&A
JavaScriptは使っていないようですが、関係ありますか？？
なければ、タグ外された方がよいかと・・・。
前提・実現したいこと
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には背景画像が適用されませんでした。
確かに本質問には関係なかったですね…失礼致しました。タグ解除しました。
すみません、もう3点だけ質問させてください。
・タグの、Bloggerは関係ありますでしょうか？
・.bgのクラスがついた要素が見当たりませんが、省略しているだけなら、しっかりソースコード内にその要素も記載してください。
・通常のHTML、CSSでは、起こり得ない（パスなどは正しく設定されている）ので、
もしかしたら、フレームワークなど使っていないでしょうか？
それであれば、そのフレームワークなども記載いただかないと、問題解決につながる回答は得られないかと。
質問ありがとうございます。
・タグのBloggerも関係はありませんでしたね...これも失礼いたしました。
・.bgクラスも確かにindex.html、article.htmlには見当たらず、一方main.cssに見られるので、私自身よくわかっておりませんでした。
・パスが正しく設定されている、は私にとっては有益な情報です。ありがとうございます。使用しているフレームワークですが、外部のhttps://html5up.net、HTML5 UP!というCC3.0以下で無料で使用できるファイルをダウンロードし編集していました。このダウンロードしたフォルダに、categoryフォルダを作成、categoryフォルダの中にdateフォルダを作成し、dateフォルダの中にarticle.htmlを、index.htmlからコピーし、cssのリンクを上記のように変更しました。
本当にarticle.htmlからmain.css読み込まれてますか？（ディベロッパーツールなどで確認しましたか/画像以外のスタイルは反映されるのでしょうか）
提示されているパスだとcategoryフォルダの中にassetsフォルダがあることになっているような気がするのですが…。
もうひとつ「../」追加してみていただけますか。
回答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
総合スコア296
あなたの回答
tips
プレビュー
