cssがうまく読み込めなくてプチはまりした話
phpの勉強をしていて、cssを修正した時にうまく読み込めなくてプチはまりしたので対策を備忘録で書いておきます。
結論から言うと、ブラウザキャッシュが残っているのが原因だったので、キャッシュをクリアすることで解決しました。
以下エラー解決までの手順です。
状況としてはindex.htmlに以下のように記述した後に、cssファイルを修正したがその修正内容が反映されなくなってしまいました。
<link href="../css/style.css" rel="stylesheet" type="text/css">
最初に確認したのが相対ルートパスの書き方です。「../css/style.css」の書き方とファイル名「style.css」ですが、これは正しいことが確認できました。
次にstyle.cssをindex.htmlと同じフォルダに格納して以下のように書くと問題なくcssが反映されることも確認。cssの記述が間違っていると言うことはなさそう。
<link href="./style.css" rel="stylesheet" type="text/css">
次にweb画面からソースコードを表示させて、cssへのリンクをクリックしてみる。
上記画像のhref="../css/style.css"をクリックしてみると、「修正する前」のcssの記述ページにリンクされることがわかりました。
さらに、style.cssファイルを削除しても同じように修正前の記述ページにリンクする。
この時点で何かゴミファイルが残っているのではと思い、隠しファイルを表示させて見たが特に何もファイルが残っていない。
googleで「css 過去 残る」で検索してみるとブラウザキャッシュが原因でcssファイルの反映がうまく行かないと言う記事が一番に出てくる。
これだ！と思って、chromeのブラウザキャッシュをクリアする方法を調べて試した、無事cssファイルの修正が反映されました。
webプログラミングの勉強だとコードのミスが一番多かったんですが、こういうのが原因でうまく行かないこともあるんだと勉強になりました。
