はじめに
以前Xserver(レンタルサーバー)に自作サービスをアップしたのですが、CSSファイルを修正して再度アップしてサービスにアクセスしてブラウザで表示したところ・・・
CSSが反映されない！！！！
ということでこの現象の解決方法について調べて試した結果、無事解決することができたので記事として残しておきます。
同じ現象で悩んでいる方の参考にされば幸いです。
対処法
僕が調べた限りでは、下記の通り3つの解決法があります。
(他の方法をご存知の方がいらっしゃいましたら是非コメント欄でコメントをお願いしますm(__)m)
1.ブラウザ側のキャッシュを削除する
2.サーバー側のキャッシュを削除する
3.Disable cacheにチェックを付けてリロードする
では1つずつ説明して行きます。
ちなみに僕は3.Disable cacheにチェックを付けてリロードするで解決しました。
そもそもキャッシュって？
キャッシュについてはサルワカさんのブログで以下の通り解説されています。
キャッシュとはパソコンやスマホに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組み。
サルワカさんのブログ「キャッシュとは？IT初心者でもわかるように解説」
1.ブラウザ側のキャッシュを削除する
これはご存知の方が多いと思います。
方法の順序としては、
①GoogleChromeのデベロッパーツールを開く
GoogleChrome上で表示された画面でoption+⌘command+Iを押すもしくは画面上で右クリック→検証をクリックすることでデベロッパーツールを起動できます。
(ご存知ですよね・・・)
②リロードボタンを右クリックしてキャッシュの消去とハードの再読み込みをクリック
画面左上のリロードボタン（矢印が輪っか状になっているボタン)を右クリックしてキャッシュの消去とハードの再読み込みをクリックします。
ちなみに、PHPファイルをブラウザだけで表示している場合に修正箇所が反映されないことがよくあるのですが、この方法で解決します。
2.サーバー側のキャッシュを削除する
これは僕は今回の現象が起こるまで1.ブラウザ側のキャッシュを削除するしか方法を知らなかったのですが、解決しなかったので調べて新しく知った方法です。
サーバーに公開しているサイト・サービスの場合はブラウザ側だけでなくサーバー側にキャッシュが残っている場合があるみたいなのでこれを削除する方法です。
僕はレンタルサーバーとしてXserverを使用しているのでここではXserverでのサーバー側のキャッシュを削除方法を説明します。
①Xserverのサーバーパネルにログインする
ここはXserverを触ったことのある方ならわかると思いますので割愛させていただきます。
②サーバーキャッシュ設定をクリックする
③修正したいサイトのドメイン名を選択する
④キャッシュを削除する
これでサーバー側のキャッシュを削除することができます。
この方法で解決できる場合もあるみたいです。
3.Disable cacheにチェックを付けてリロードする
こちらも新しく知った方法です。
僕は今回はこちらの方法でCSSの反映に成功しました。では手順です。
①デベロッパーツールを起動する
先ほど説明したのと同じやり方でデベロッパーツールを起動します。
②NetWorkタブを選択してDisable cacheにチェックを入れる
③ページをリロード
画面左上のリロードボタン（矢印が輪っか状になっているボタン)をクリックしてページをリロードします。
このとき、デベロッパーツールは閉じてはいけません！
この方法はキャッシュを削除するというよりは「キャッシュの使用を禁止する」という意味みたいです。
Disable cacheにチェックを入れた状態でページを再読み込みすると、キャッシュは使用せず、サーバーからファイルやデータを読み込むようになります。
よって、新しいCSSファイルの内容を読み込むことができたようです。
この機能はデベロッパーツールを起動させている間のみ有効です。
最後に
この記事ではサーバーにアップしたCSSファイルが反映されない時の解決法について紹介して行きました。
手順自体は簡単なので、比較的覚えやすいかなと思います。
同じような現象でお困りの方の参考になれば幸いです。