2016/11/10

CSSで書いたコードが突然反映しなくなった原因は、サーバー側のキャッシュ・ほか思い当たること

先日、ふわリンクと、ふわふわナビを導入しました♪装飾して導入後、翌日まで反映していたものが、急に反映しなくなってしまって。

仕方ないから、「 transition: 1s;」の位置をかえたり、コメントアウトも削除したり、Firefox、IE、Chromeでブラウザを変えたり、キャッシュを削除などもしたんです。

まさに、摩訶不思議の世界へようこそぉ♪って手招きされた気分が、2日位かかってやっと、結論がわかったので書いてます。

その他、原因として思いつくことを書き出したので、目次で飛ばして見てくださいね。無事、解決できますように^^

シャボン玉がふわふわ

スポンサーリンク

CSSで書いたコードが反映したのに、突然反映しなくった理由

優先順位と、サーバー側のキャッシュの関係だった可能性が大きいと、断定する他、理由が見当たらないのが結論ですが、どうぞ。

解らないなりに、考えてみた様子と結果。強引に腑に落とす為に…

このaタグとかとtransitionのコードをCSSの一番下に書いて、その後、ふわふわ動くナビゲーションを入れたんです。ナビゲーションのコードを書いた場所は、また一番下。

どちらもCSS3。その後反映されたけど、突然ふわリンクがダメになったのは、キャッシュが原因かなぁ?って思ってみました。PC側のキャッシュは出来てます

  1. ふわナビ入れても、ふわリンクは反映していた
  2. PCのキャッシュは、行っている
  3. 反映してたものが、突然反映しなくなる
  4. これ▲ココがさっぱりわからなかったんです。(THE I・MI・HU)
  5. ふわナビを入れたからかも?って気付く
    優先順位問題でした
  6. 反映しましたぁ♪ヤッタァ~✧\\ ٩( ‘ω’ )و //✧
  7. でも、何で3.の記述、突然反映しなくなったのぉ?(MATA I/MI/HU)
  8. もしかしたら、サーバー側のキャッシュ問題かも?と、推測なう
  9. .htaccessを確認したら、設定はCSSのキャッシュが1日になってます。
    ふわナビを入れて1日経ってサーバー側のキャッシュがクリアされたって可能性!?
  10. って事は、PC側のキャッシュと、サーバー側のキャッシュは別
  11. 昨日ブログ見てくれた人は、今日・・ふわリンクが反映されないっ♪それは、PC側のキャッシュの問題
    今日初めてブログに来た人は、ふわリンクがおかしい状態。サーバー側のキャッシュの問題。
    きっとそう言う事♪ 裏付けはありません。。(๑ơ ₃ ơ)♥
  12. 次は、ふわナビがどう動くか・・翌日まで待つ。
  13. 翌日→よしっ、ちゃんと動いてる♪

結論まとめ:反映していたCSSのコードが突然反映しなくなった時、何を疑うか?

1つ目のポイント:優先順位

新たに追加したコードの内容が被ってる、それでCSSの優先順位が関係して反映しなくなったって事です。

そこで気になるのが、なぜCSSに新たなコード、私の場合はふわふわナビを入れた時に、その前に書いたふわリンクのコードが優先順位落ちしなかったのか?ですよねっ。PC画面からキャッシュの削除をしてるのに・・。

LINK初心者のCSSが反映されない原因の1つ!優先順位の詳細度とは

LINKCSSの基本、class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定方法と優先順位

サーバー側のキャッシュ♪.htaccessに記載してる事項が関係している。

PC側と、サーバー側のキャッシュは別。ではないかとしか思いつかない。サーバー側のCSSのキャッシュは、1日でクリアされる設定にしています。条件が合致♪

って、結論に落ち着かせました。それ以外全く思いつかないので。

2015/12/14追記

キャッシュされる場所は3カ所

コンテンツがキャッシュされる場所は、図1のように大きく分けて以下の3つの場所がある。

  • クライアントマシン上のブラウザ
  • クライアントマシンとWebサーバの間に位置するProxyサーバ
  • Webサーバの背後にあるアプリケーションサーバ

キャッシュをうまく制御することによって、システムの正しい動作を保証するだけではなく、応答時間の短縮、回線の有効活用、サーバリソースの節約といった重要な性能対策になる。

 

コメントアウト

CSSでコメントを書くとき、/*コメントアウト*/を使いますよね。新たに/*コメントアウト*/を付け足しませんでしたか?

コメントアウトの中にコメントアウトを使うと、装飾のみが残され、他のスタイルに影響があることもあります。例えばこんな感じです。

1行目の/*から、次にある*/5行目ですね。ここまでコメントアウトが適用されて、それ以降が、ただの文字がむき出しになった状態になると、CSSが言うこと聞いてくれない事があります。

どの装飾をしたいのか、書かれてませんよね。

この部分がないので、不具合が起きた可能性がありますので、確認してください。

閉じるマーク} や、書き終わり;など、決してないか確認

装飾するには、タグの指定と、装飾の始まり{と終わり}が必要です。またプロパティ:値;とコロンやセミコロンが抜けてないか。間違って決してしまった場合反映しなくなります。

CSS検証サービス|W3CでCSSを検証してみると、おかしな場所が見つかります。

一度試してみてくださいね^^

さいごに

何かあったら、すぐググれる、調べられるのって便利ですよねっ♪「ビバ★りずむ」私のブログタイトルですけど、調べるのって楽しいねって意味です。人に聞いても楽しいですので、聞ける時は聞いてください♪

調べたら、少ないながらも知識は付きます。ただ難点があるとしたら、調べるのにめちゃくちゃ時間を費やして、記事が書けない!

書いてる内容が解かりにくいって時は、お声かけください。解かる内容の範囲でお答え出来ますが、わからない事も多いです。なので、知識の共有させてくださいねぇ♪

解決したらシェアで教えてください。このページで解決できますように…

それでは、かうたっくでした!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー