background-imageが反映されないです
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
はじめまして。
HTML CSS初心者です。
こう言う場で質問させて頂くのは初めてなので文章が分かりづらいと思います。すみません。
本を見ながらサンプルページを作成している者ですが、background-imageが反映されないです。
色々調べて
誤字、脱字もなく
キャッシュの削除とハード再読み込みしても反映せず
新しいページを作って反映されないところを
コピー&ペーストしても
新しいページでは反映されたが、元のページでは反映されない。
そして検証をし右のCSSの部分に
無いことがわかりました。
プラスのマークをおして書き込んでみても
薄い文字でしか書き込めなく全く何も出来ませんでした。
どうすれば反映されるのかご教授下さい。
HTML CSS初心者です。
こう言う場で質問させて頂くのは初めてなので文章が分かりづらいと思います。すみません。
本を見ながらサンプルページを作成している者ですが、background-imageが反映されないです。
色々調べて
誤字、脱字もなく
キャッシュの削除とハード再読み込みしても反映せず
新しいページを作って反映されないところを
コピー&ペーストしても
新しいページでは反映されたが、元のページでは反映されない。
そして検証をし右のCSSの部分に
無いことがわかりました。
プラスのマークをおして書き込んでみても
薄い文字でしか書き込めなく全く何も出来ませんでした。
どうすれば反映されるのかご教授下さい。
Builder さん
11月15日 19時17分
Builderさん、はじめまして。
いろいろと問題切り分けを試されているようで、これは問題解決能力を磨くのに良い経験だと思います。
「検証」でCSSとしてbackground-imageが表示（適用）されていない？とのことで、そこから考えてみたいと思います。
考えられる点としては、以下です。
・CSSファイルを正しく読み込めていない（CSSファイルが外部ファイルの場合）
・なんらかの原因で違うCSSファイルを読み込んでいる（同上）
・id/classの指定に問題がある。
などなどです。
前提条件なのですが、CSSを記載しているのは外部ファイル（CSSの定義ファイルをHTMLから読み込んでいる）でしょうか？
文章だけですと特定が難しいので、可能な範囲でCSSとHTMLコードを示していただけると、分ることがあると思います。
いろいろと問題切り分けを試されているようで、これは問題解決能力を磨くのに良い経験だと思います。
「検証」でCSSとしてbackground-imageが表示（適用）されていない？とのことで、そこから考えてみたいと思います。
考えられる点としては、以下です。
・CSSファイルを正しく読み込めていない（CSSファイルが外部ファイルの場合）
・なんらかの原因で違うCSSファイルを読み込んでいる（同上）
・id/classの指定に問題がある。
などなどです。
前提条件なのですが、CSSを記載しているのは外部ファイル（CSSの定義ファイルをHTMLから読み込んでいる）でしょうか？
文章だけですと特定が難しいので、可能な範囲でCSSとHTMLコードを示していただけると、分ることがあると思います。
馬場誠 さん
11月15日 20時22分
分かりやすく説明を入れて頂き有難うございます！
合っているのか分かりませんが
style.cssと〇〇.html とで分けているので外部ファイルだと思います。
とても長いので省略します。
CSSコード
HTMLコード
です。
合っているのか分かりませんが
style.cssと〇〇.html とで分けているので外部ファイルだと思います。
とても長いので省略します。
CSSコード
@charset"utf-8";
〜〜〜〜
#photograph｛
background-image: url(../images/bg-photograph.jpg);
background-repeat: no-repeat;
background-position:center top;
background-attachment :fixed;
background-size: 100% auto;
｝
〜〜〜〜
#photograph｛
background-image: url(../images/bg-photograph.jpg);
background-repeat: no-repeat;
background-position:center top;
background-attachment :fixed;
background-size: 100% auto;
｝
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>photograph|写真風景家「SNAPPERS」</title>
<link href=“css/style.css” rel=“stylesheet”>
</head>
<body is=“photograph”>
<!-- header始まり-->
<html>
<head>
<meta charset=“UTF-8”>
<title>photograph|写真風景家「SNAPPERS」</title>
<link href=“css/style.css” rel=“stylesheet”>
</head>
<body is=“photograph”>
<!-- header始まり-->
です。
Builder さん
11月15日 21時35分
Builderさん、こんにちは。
コードのご提示ありがとうございます。
外部ファイルのようですね。
このコードがそのままであれば、HTML側で正しく指定されていないのが原因かと思います。
具体的には、bodyのidにタイプミスがあるのと、“”が複数箇所で全角になっているようです。
is= → id=
“”→ "" （※見た目では分りづらいですが半角のダブルクォーテーションです）
上記のように修正したHTMLが以下です。
加えまして、CSSの@charset"utf-8";は、charsetの後に半角スペースを空けると良いと思います。
見た限りでの点だけなのでこれが原因の全てとは限りませんが、ひとまずこちらでチャレンジしてみてください。
コードのご提示ありがとうございます。
外部ファイルのようですね。
このコードがそのままであれば、HTML側で正しく指定されていないのが原因かと思います。
具体的には、bodyのidにタイプミスがあるのと、“”が複数箇所で全角になっているようです。
is= → id=
“”→ "" （※見た目では分りづらいですが半角のダブルクォーテーションです）
上記のように修正したHTMLが以下です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>photograph|写真風景家「SNAPPERS」</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body id="photograph">
<!-- header始まり-->
<html>
<head>
<meta charset="UTF-8">
<title>photograph|写真風景家「SNAPPERS」</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body id="photograph">
<!-- header始まり-->
加えまして、CSSの@charset"utf-8";は、charsetの後に半角スペースを空けると良いと思います。
@charset "utf-8";
見た限りでの点だけなのでこれが原因の全てとは限りませんが、ひとまずこちらでチャレンジしてみてください。
馬場誠 さん
11月16日 11時26分
回答ありがとうございます！
パソコンを前に
携帯からコードを入力していたので間違えてしまいました、すいません。
ご指摘頂いたところ確認しました。
is→id になっていて、”” ←も半角で入力出来ていました。
パソコンを前に
携帯からコードを入力していたので間違えてしまいました、すいません。
ご指摘頂いたところ確認しました。
is→id になっていて、”” ←も半角で入力出来ていました。
Builder さん
11月16日 16時47分
馬場誠さん
先ほどもう一度見直し
やり直してみて、Google Chromeで見たら反映されてました！！
思わず、おーーーやったーと声に出してしまうほど解決出来て嬉しかったです！
有難うございました！
先ほどもう一度見直し
やり直してみて、Google Chromeで見たら反映されてました！！
思わず、おーーーやったーと声に出してしまうほど解決出来て嬉しかったです！
有難うございました！
Builder さん
11月16日 19時57分
Builderさん、こんばんは。
なんと、全部手作業で入力されたのですか！？
ものすごく大変だったと思います……なんだか申し訳ありません。
申し訳ないついでで大変恐縮なのですが、実物そのものを「コピペ」でないと、今回の様にどこかに差異が生じてしまう可能性があり、確実に検証するのが難しいです。
もし可能であれば手入力無しのコピペ（不要な場所の“削除”は問題無し）でご提示いただくと確実です。
もしも何か事情があってPCからコピペできない場合は、1つずつ問題を切り分けていくことになりますね。
試していただきたいのですが、CSSの#photograph内の一番最後に以下を追加するとどうなるでしょうか。
つまり以下のような感じです。
青い枠もしくは赤い背景になっていれば、正しいCSSが読み込まれており、IDの指定にも間違い無いことが切り分けられます。
（確認したら追加したCSSは削除してください）
> パソコンを前に
> 携帯からコードを入力していたので間違えてしまいました、
なんと、全部手作業で入力されたのですか！？
ものすごく大変だったと思います……なんだか申し訳ありません。
申し訳ないついでで大変恐縮なのですが、実物そのものを「コピペ」でないと、今回の様にどこかに差異が生じてしまう可能性があり、確実に検証するのが難しいです。
もし可能であれば手入力無しのコピペ（不要な場所の“削除”は問題無し）でご提示いただくと確実です。
もしも何か事情があってPCからコピペできない場合は、1つずつ問題を切り分けていくことになりますね。
試していただきたいのですが、CSSの#photograph内の一番最後に以下を追加するとどうなるでしょうか。
background-color:#ff0000 !important;
border: 10px solid #0000ff !important;
border: 10px solid #0000ff !important;
つまり以下のような感じです。
#photograph｛
background-image: url(../images/bg-photograph.jpg);
background-repeat: no-repeat;
background-position:center top;
background-attachment :fixed;
background-size: 100% auto;
background-color: #ff0000 !important;
border: 10px solid #0000ff !important;
}
background-image: url(../images/bg-photograph.jpg);
background-repeat: no-repeat;
background-position:center top;
background-attachment :fixed;
background-size: 100% auto;
background-color: #ff0000 !important;
border: 10px solid #0000ff !important;
}
青い枠もしくは赤い背景になっていれば、正しいCSSが読み込まれており、IDの指定にも間違い無いことが切り分けられます。
（確認したら追加したCSSは削除してください）
馬場誠 さん
11月16日 19時58分
パソコンでコードの間違いを探しながら
携帯で解決策を調べているとこのサイトに出会え
そのまま携帯で打ち込んでしまいました笑
少し考えてパソコンから打てばよかったです。
コード入れました！
青い枠になりました！
携帯で解決策を調べているとこのサイトに出会え
そのまま携帯で打ち込んでしまいました笑
少し考えてパソコンから打てばよかったです。
コード入れました！
青い枠になりました！
Builder さん
11月17日 08時16分
Builderさん、おはようございます。
昨日はタッチの差で私の投稿前に解決されていたのを見落としておりました(汗)
なぜか反映されない……というのは非常に多いことですので、あれこれ調べて解決するのは良い経験になったと思います。慣れてくると、どんどん早く原因を突き止められるようになりますよ。
この投稿掲示板は、実は本サイトからあえて切り離しているのでアクセスする人は少ないと思いますが、見つけてくださってありがとうございます。
また何かありましたらお気軽にご投稿ください(^^)
昨日はタッチの差で私の投稿前に解決されていたのを見落としておりました(汗)
なぜか反映されない……というのは非常に多いことですので、あれこれ調べて解決するのは良い経験になったと思います。慣れてくると、どんどん早く原因を突き止められるようになりますよ。
この投稿掲示板は、実は本サイトからあえて切り離しているのでアクセスする人は少ないと思いますが、見つけてくださってありがとうございます。
また何かありましたらお気軽にご投稿ください(^^)
馬場誠 さん
11月17日 08時54分
ありがとうございました！
Builder さん
11月17日 11時10分
