Q&A
HTMLファイルとCSSファイルの両方を、省略せずに質問に書いてください。長すぎるとか、見せられない部分があるとか、何か事情があるなら、「同じ問題が発生するようにした小さなサンプル」を作って、それを載せてください。
その際、HTMLの内容は「```HTML」と「```」で囲み、CSSの内容は「```CSS」と「```」で囲めば、「#を全角で書く」といった小細工をする必要はありません。
発生している問題・エラーメッセージ
WEBデザインの勉強中なのですが、教本で見本を見ながらIDを♯homeに指定し、CSSで背景画像を設定する段階で、CSSに記述した#homeが反応しませんでした。反応しない、というのは「#home」というコードの色が変わらず、白色のままで、通常の文字列としてソフトに認識されている、という意味です。記述は間違いなく合っているはずなのに、どうして反応しないのか不思議でなりません。
該当のソースコード
HTML
1<div id="home" class="big-bg"> 2</div><!-- /#home -->
CSS
background-image: url(../images/main-bg.jpg); min-height: 100vh; }``` ### 試したこと 教本のサンプルデータにCSSの見本があったので、そこから該当箇所をコピーして貼り付けた結果、貼り付けたほうの「#home」は色が変わりました。そして先に入力していた方のコードを消すと、貼り付けたほうの「#home」も白色になりました。消したほうのコードを戻すと、貼り付けたほうの「#home」には色が戻ります。コメントアウトを使っても同じでした。 貼り付けたほうのコードに色がついている状態でも、背景画像はページに反映されていません。見本からコピーしたものなので記述が間違っているとは考えにくいです。コードが二つあるからか？と思ってひとつを消しても、残ったほうの「#home」が白色になり、反応しなくなるんです。二つに戻すと、片方の「#home」に色が戻ります。なので記述が間違っているわけではないと思うんです。 これはどういう状況ですか？どうすれば背景画像が適用されるのでしょうか？ ### 補足情報（FW/ツールのバージョンなど） 使っているのは「visual studio code」、ブラウザはGooglechromeです。
あぁ・・なるほど。小細工。
補足願います。
『貼り付けたほうの「#home」』がご提示いただいている
＃home {
background-image: url(../images/main-bg.jpg);
min-height: 100vh;
}
である、という認識で間違いありませんか？
問題が起きているのはその部分だけで、残りのスタイルはブラウザーの表示に反映されているのか、も知りたいね。
・質問に貼りつけた方が見本からコピーしたものです
・当方はここを利用するのがはじめてのため、#を反応しなくする方法は知りませんでした。ありがとうございます
・問題が起きてるのは質問にのせた部分だけで、ほかのCSSはきちんと反映されています
質問は編集できますし、マークダウンを使えば良い話です。
https://teratail.com/help/question-tips#questionTips3-7
https://teratail.com/questions/238564
とりあえず、問題が再現するコードをご提示いただいた方が手っ取り早いと思います。
皆様、お時間を取らせて申し訳ありませんでした。問題は解決いたしました。ありがとうございます。
マークダウンのcode機能は今からでも対応しておいてください。
覚えておかないと今後同じ指摘をされ続けることになります。
わかりました。ありがとうございます
回答2件
0
ベストアンサー
追記修正欄へ画像が貼れなかったので回答欄での質問になりますが、
質問は画像の下のhomeのようにセレクタが白くなっていてコードとして認識されていないのはなぜかとうことでしょうか？
セレクタが白くなっていてコードとして認識されていない場合はそれより上の場所で「}」が抜けている可能性が高いです。
「}」が抜けていないかも合わせて確認してください。
この場合、質問者さんと同じく、真ん中の#homeを削除すると一番下の#homeが白くなってコードとして認識されなくなります。
一番上のセレクタが閉じられておらず、2つ目のセレクタの「}」が一番上の「}」として認識されているからです。
投稿2020/09/04 04:29
編集2020/09/04 04:55
総合スコア716
回答と同じく質問にも画像貼れますよ。やり方も同じです。
あと、本件と関係ない話かと思います。
というか、質問者と同じ人ですか？
同一人物による複数アカウント所持は規約違反ですよ。
あぁ、勘違いか。「質問への追記修正欄へ画像が貼れない」ですね。
ちゃんと書いてもらえたら・・・
いえ、本人ではないです。修正依頼・質問欄への画像の貼り方がわからなかったのでこっちに書いてしまいました。
質問に「反応しない、というのは「#home」というコードの色が変わらず、白色のままで、通常の文字列としてソフトに認識されている」と書いていたのでこういうことを聞きたいのか確認したく、画像を載せました。
勘違いさせてしまいすいません。
質問に「追記修正欄」というのを追記しました。
失礼しました。
コメント欄ではマークダウン使えません。
やはりそうでしたか。教えていただきありがとうございます。
確かに文章だと伝わりにくいかもですね・・・。
質問者さんから返答きたら、この回答を編集されるといいかと思います。
（そのつもりだったらすみません）
そうですね。一応そのつもりではありますが、気にかけていただきありがとうございます。
質問の意図はおっしゃる通りで間違いありません。
また、ありがとうございます、ご指摘の通りでした。
0
現時点で言えることはbackground-image:に指定している画像が存在しないか、パスが違うんでしょう。
そのCSSの記述があるファイルからの位置を確実に示していますか？
そこに画像はありますか？
画像が破損していませんか？
ご確認ください。
投稿2020/09/04 04:03
編集2020/09/04 04:12総合スコア80850
「※ソースの#が全角なのは見出しとして認識されないためで、実際のコードは半角になっています。」と書いてあるので、そこは実際には半角なのではないかと。
タイトルの煽り文句とコードおかしい時点で全部読む気をなくしてました。
回答修正しました。
あなたの回答
tips
プレビュー
