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

ページ全体の背景色が反映されない

書籍Q&ACategory: スラスラわかるHTML&CSSのきほんページ全体の背景色が反映されない
asked 7年 ago

早い段階で躓きました。無念です。
CSSに入ったとたん反映されません。背景色が見えません。

140ページの下の図では、
@charset や body  や { } や #f5f3eb
が太文字になっていますが、私がやるとbackground-color しか太字になりません。
そしてindex.htmlに背景色が反映しません。
お忙しいところ恐れ入りますがご回答よろしくお願いいたします。

16 Answers
狩野 祐東 Staff answered 7年 ago

TeraPadをお使いでしたら、太字になるのは@chasetbackground-colorだと思います。
具体的な不具合の箇所がどこなのか特定はできませんが、チェックポイントとしては次のあたりです。

・編集モードをCSSにして新規ファイルを作成できているか(p.134)
・「CSSフォルダ」内に「style.css」を作成しているか(p.134〜135)
・文字コードは「UTF-8」になっているか(p.135)
・<link>タグの記述は正しいか(p.137)

また、ここで指定する背景色は、薄くクリーム色がかった、ほとんど白に近い色なので、お使いのモニタによっては適用されているかどうかがわからない場合があるようです(以前出版社のサポートにそういう連絡があったそうです)。
CSSが効いているかどうかを試すために、style.cssのbackground-colorの部分を以下のように書き替えると、色がはっきり変わって確認しやすくなります。確認できれば、「red」の部分を、もとの#f5f3ebに書き替えてください。

background-color: red;

解決しなければ、またお気軽にご連絡ください。

answered 7年 ago

赤にしたら反映していました!
本当に本当にありがとうございました。引き続きやってみます。

狩野 祐東 Staff answered 7年 ago

解決してよかったです。残りもがんばってみてください。

answered 7年 ago

良い教材をありがとうございます。1週間前から毎日勉強し始めました。しかし、大変申し訳ありませんが、私もまったく同じ症状で、cssの項目に入ってすぐ、background-colorのcssがhtmlページに反映しないで困っています。colorをredにしても変わりません。また、NEWSの文字もコゲ茶になりません。さらに、ネットからダウンロードした教材のサンプルも、cssが反映されていません。当然ですが、教材のサンプルとまったく同じに私のcssも書き込んでありますが、反映されません。どうしたらよいのでしょうか。私のPCに問題があるのでしょうか。TeraPadで作成しています。OSはWindows7です。

狩野 祐東 Staff answered 7年 ago

教材サンプルでもCSSが反映されていないというのが問題を探る上で重要だと思います。サンプルデータは圧縮ファイルなので、ダウンロードした後に解凍(展開)して、ドキュメントフォルダーにコピーしてから、siteフォルダ内のindex.htmlをダブルクリックして確認してみてください。ここまでの手順はp.viをご参照ください。

それでCSSが反映されるようであれば、お作りになったHTMLとCSSが正しく書かれているか、もう一度確認してみてください。とくに、index.htmlのタグに設定したhref属性のURLが正しいかどうかが重要です。また、HTMLファイル、CSSファイルとも、タグなどに全角文字や全角スペースが紛れ込んでいると表示されないことがあります。こちらも確認してみてください。

もし教材データを解凍して、ドキュメントフォルダにコピーしているのにCSSが反映されない場合や、ソースを確認してみたけれどもやっぱり直らない場合は、もう一度ご連絡いただけますか?

answered 7年 ago

本に書かれているように、もう一度、ドキュメント内にダウンロードして、ライブラリのマイドキュメント内にコピーしました。そして、site内のindexをダブルクリックすると、やはりcssが反映されていません。

サンプルのindexと自分がここまで作ってきたindexを、両方コピーしたものを自分がレンタルしているサーバーにアップしましたのでご覧になってください。おそらく同じだと思います。

サンプルindex
[管理者より]問題が解決したためURLを削除しました。

自分のindex
[管理者より]問題が解決したためURLを削除しました。

answered 7年 ago

連続で投稿してすみません。ついでに、自分がここまで作ってきたindex.htmlとcssもアップしました。

わかりやすいように、画面を大きくしていますが、見にくかったらすみません。

index.html
[管理者より]問題が解決したためURLを削除しました。

css
[管理者より]問題が解決したためURLを削除しました。

狩野 祐東 Staff answered 7年 ago

送っていただいた画面キャプチャのCSSのほうですが、テキストエディタが認識している文字コードがShiftJISになっていますね。@charsetで指定している文字コードと実際の文字コードが違うのが原因かもしれません。
TeraPadでstyle.cssを開き、[ファイル]メニュー─[文字コード指定保存]を選ぶとダイアログが出てきます。文字コードを[UTF-8N]にして[OK]をクリックして保存しなおしてみてください。まずはそれを試してみていただけますか?

answered 7年 ago

おっしゃるとおり、文字コードをUTF-8Nに変えました。サンプルのほうも同じです。しかし、index.htmlは、今までと同じで何も変わりません。

狩野 祐東 Staff answered 7年 ago

IEがキャッシュしたままでデータが更新されていないかもしれません。IEのキャッシュを消去してみてください。キャッシュを消去する方法はこのコメント欄で書くには少し操作手順が多くてややこしいので、検索して試していただけますか?

answered 7年 ago

IEのキャッシュを削除しましたが変わりません。サンプルも同じです。今まで、ネット上のテンプレートを使って、ドリームウィーバー8でサイトを作成していましたので、ドリームウィーバー8(以下D8)が、何か影響しているのでしょうか。

実は、最近、D8を使って、今までの自分のサイトを更新しましたら、それまで文字コードがSHIFT-JISだったんですが、今回、htmlとcssの勉強を始めて、TeraPadでUTF-8を使うようになってから、突然、D8で、文字コードがUTF-8にしてくださいとかなんとか・・・・早朝で、頻繁に行ういつもと同じ作業でしたので、半分眠った状態でサイトを更新していて、はっきり見てませんでしたが、いつもと違う何かエラーが出てるな・・・と思いながら、そのまま保存して、そのhtmlファイルをネット上にアップしましたら、ページ全体が?????だらけの文字化けしてしまって、今もその状態です。

つまり、D8とTeraPadが、お互いに何か影響しているのかもしれません。

ド素人の憶測ですが、何かの手がかりになれば・・・と思って、数日前にこのようなことが起きましたので、お伝えしています。

狩野 祐東 Staff answered 7年 ago

通常はほかのソフト同士で影響しあうというのはあまり起こらないような気がしますが、何とも言えません。
ところで、IE以外のブラウザでもCSSは効きませんか? 効くようであれば、HTMLやCSSの書き間違いではなくて、IEのなにかが問題の可能性が高いと言えます。また、サーバー環境をお持ちのようですので、作業したファイルをいったんアップロードしてみて、そのURLにブラウザでアクセスしてみるというのも有効です。すみません、わたしも原因がいまのところよく分かりません。文字コードかキャッシュが問題のような気がしているのですが……

answered 7年 ago

すべて削除して、もう一度、サンプルをダウンロードして、中のindex.htmlを開いたら、cssが反映されたページがきちんと表示されました。ですから、私が、htmlを作る段階で、何か間違えていたんだと思います。お騒がせしました。

狩野 祐東 Staff answered 7年 ago

いや良かったです。内心ドキドキしていました。
原因は不明ですが、出版社にも文字コードがらみや、IEの挙動と思われる問題がときどき発生しているとの連絡が入っているようで、わたしも調査します。

answered 5年 ago

こんにちは。最近勉強をはじめました。
私も他の方とおなじくbackground-colorのCSSがHTMLに反映されず困っています。redにしても変わりませんでした。
TeraPadでかいています。文字コードはUTF-8です。サンプルはダウンロードしなおしました
編集モードもCSSです。何回も見直して書き直してみましたが、一向に反映されません。
サンプルと自分のかいたHTMLを見比べてみましたがまったく一緒でした。
なにが原因なのか教えていただけないでしょうか。

狩野 祐東 Staff answered 5年 ago

こんにちは。

書籍p.140の部分ですよね? まず、style.cssがHTMLに正しく読み込まれていないかもしれないので、p.137に戻って、index.htmlに書かれたタグが正しく書かれているか、style.cssへのパスがあっているか、確かめてみてください。

もしタグが正しいなら、やはりCSSのどこかが書き間違えている可能性があります。CSSの文法チェックツールを使って、間違いがないかどうか探してみてください。

「CSS Validation Service」というサイトがあります。このサイトでCSSをチェックできるのでおすすめです。このサイトに簡単な使い方を説明した記事もありますので、そちらも参考にしてみてください。

CSS Validation Service
https://jigsaw.w3.org/css-validator/

HTML Validator / CSS Validation Service の使い方の記事

HTMLやCSSの書き間違いをチェックする「バリデーションサービス」

takenisi2002 replied 12か月 ago

初めまして。
私も背景の色が変わらない現象が出ました。
cssもhtmlも同じに見えました。が、検索でcssのファイルに
「全角スペース」があり、その部分を削除(半角スペースでもいいかも?)したところ、
背景が正常に現れました。
今後の参考になればと思い、コメントしました。

狩野 祐東 Staff replied 12か月 ago

ご報告ありがとうございます。
全角スペースがあったら正しく動かないとのことで、そうですね、削除すれば大丈夫ですし、半角スペースで書き換えるのでもかまいません。