BOOK Studio947
狩野祐東・狩野さやか著書

フッター画像が反映されません。ご教示ください。

書籍Q&ACategory: スラスラわかるHTML&CSSのきほんフッター画像が反映されません。ご教示ください。
y.i asked 4年 ago

p180 チャプター8-10「繰り返さない背景画像」
このテキストでホームページの勉強を始めた初心者です。
“フッターに背景画像を適用する”で行き詰ってしまいました。 
テキスト通り入力していますが、すべてのページでフッター部分に画像が反映されません。
画像が入るであろう場所に空間は出来ていますが画像が表示されません。(この問い合わせに画面やcss,htmlの画像が貼り付けられれば良いのですが、、)
フッター画像はimagesのフォルダに入っています。
ヘッダー部分やその前までは問題なく出来ましたので恐らくhtml・cssの後半がどこかおかしいのではないかと思うのですが、
p119やp180を見ても間違っている箇所が分からず、、
大変お手数ですがご確認、ご教示いただけますでしょうか。
win10 edge、cromeで確認しています。
p206のバリデーションサービスでindexページのアドレスで調べてみましたが、エラーが出てしまい、cssの方は初心者ゆえお恥ずかしながら(アドレス?)何の情報を入力したらよいか分からず調べられませんでした。
また追加でご質問なのですが、同じフッター画像のcssにてfont-size: 12px、color: #3f5170は何の為に書かれているのでしょうか?
追記
初めの投稿の削除が分からず、2回投稿してしまっていたら申し訳ありません。
参照ページを間違えて入力していましたので訂正いたします。p88とp180,p181を参照しています。

3 Answers
狩野 祐東 Staff answered 4年 ago

画像が表示されない原因はいくつかあります。表示させる画像ファイルがimagesフォルダ内にあるなら、HTMLかCSSのどこかが書き間違えています。

まずはバリデーションサービスを最後まで使うのが最初のチャレンジと思って試してみてください。CSSを確認するには、アドレスを入力するのではなく、編集中のファイルをアップロードしてテストします。

y.i replied 4年 ago

ご回答ありがとうございます。
バリデーションサービスを使い、無事フッター画像を表示することができました。
あと1点確認なのですが、もうエラーは無いのですが、フッター画像の線の部分が途中で切れてしまい、テキストの図のように右端まで行きません。ただ単に画像の長さよりも自分のpc画面の横幅の方が長いということでしょうか?repeat-x;で繰り返しにすると線の切れた部分から繰り返しになりました。
この場合解決策は無いでしょうか?

font-size: 12px、color: #3f5170は、最後のコピーライト部分に対しての記述ですね。自己解決しました。

y.i answered 4年 ago

ご回答ありがとうございます。
バリデーションサービスを使い、無事フッター画像を表示することができました。
あと1点確認なのですが、もうエラーは無いのですが、フッター画像の線の部分が途中で切れてしまい、右端まで行きません。ただ単に画像の長さよりも自分のpc画面の横幅の方が長いということでしょうか?repeat-x;で繰り返しにすると線の切れた部分から繰り返しになりました。
この場合解決策は無いでしょうか?
font-size: 12px、color: #3f5170は、最後のコピーライト部分に対しての記述ですね。自己解決しました。

狩野 祐東 Staff replied 4年 ago

repeat-xにすると画像が繰り返すということであれば、画像の横幅が短い、もしくはページの幅が画像よりも大きい(長い)ということだと思います。
ページの横幅は正しく設定されていますか? サンプルのサイトでは、ページの横幅が960ピクセルより大きくならないように設定してありますので、もし画像を作るのであれば、横幅960ピクセルで作れば途中で切れません。

あと、font-size… 以降のCSSはそのとおりです。

y.i replied 4年 ago

すみません、フッター画像の線ですが、次項目チャプター08-11「ページの最大幅の設定」へ進んだら解決(?)しました。
p181の時点では右上の図赤枠②のようにはなりませんでしたが、p182のページの最大幅を設定したらフッター画像が余白なく収まりました。

y.i replied 4年 ago

すみません、フッター画像の線の件ですが、次項目「ページの最大幅の設定」に進んだら解決(?)しました。
p181の時点では赤枠の②のようにはなりませんでしたが、p182でページの最大幅を設定したらフッター画像が余白なく収まりました。

y.i answered 4年 ago

すみません、フッター画像の線の件ですが、次項目チャプター08-11「ページの最大幅の設定」に進んだら解決(?)しました。
p181の時点では赤枠の②のようにはなりませんでしたが、p182でページの最大幅を設定したらフッター画像が余白なく収まりました。