サーバーにアップしたCSSファイルが反映されない時の解決法

XserverにWEBサイトをアップしたのですが、CSSファイルを修正して再度アップしてサービスにアクセスしてブラウザで表示したところ・・・

CSSが反映されない！！！！

ことが何回かありました。

対処法

下記の解決法を試してみました。

1.ブラウザ側のキャッシュを削除する

2.サーバー側のキャッシュを削除する

3.Disable cacheにチェックを付けてリロードする

ちなみに私は1.ブラウザ側のキャッシュを削除するで解決しました。

そもそもキャッシュって？

キャッシュとはパソコンやスマホに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組み。

1.ブラウザ側のキャッシュを削除する

①GoogleChromeのデベロッパーツールを開く

GoogleChrome上で表示された画面でoption+⌘command+Iを押すもしくは画面上で右クリック→検証をクリックすることでデベロッパーツールを起動できます。

②リロードボタンを右クリックしてキャッシュの消去とハードの再読み込みをクリックします。

ちなみに、PHPファイルをブラウザだけで表示している場合に修正箇所が反映されないことがよくあるのですが、この方法で解決します。

2.サーバー側のキャッシュを削除する

サーバーに公開しているサイト・サービスの場合はブラウザ側だけでなくサーバー側にキャッシュが残っている場合があるみたいなのでこれを削除する方法です。

Xserverでのサーバー側のキャッシュを削除方法を説明します。

①Xserverのサーバーパネルにログインする

②サーバーキャッシュ設定をクリックする

③修正したいサイトのドメイン名を選択する

④キャッシュを削除する

これでサーバー側のキャッシュを削除することができます。

この方法で解決できる場合もあるみたいです。

3.Disable cacheにチェックを付けてリロードする

①デベロッパーツールを起動する

先ほど説明したのと同じやり方でデベロッパーツールを起動します。

②NetWorkタブを選択してDisable cacheにチェックを入れる

③ページをリロード

画面左上のリロードボタン

このとき、デベロッパーツールは閉じてはいけません！

この方法はキャッシュを削除するというよりは「キャッシュの使用を禁止する」という意味みたいです。

Disable cacheにチェックを入れた状態でページを再読み込みすると、キャッシュは使用せず、サーバーからファイルやデータを読み込むようになります。

よって、新しいCSSファイルの内容を読み込むことができたようです。

この機能はデベロッパーツールを起動させている間のみ有効です。