PythonのDjangoでCSSが反映されない場合の対処法ースーパーリロードで解決するケースも
PythonのWebアプリ用フレームワークであるDjangoに取り組んでいたところ、CSSを修正しても、Chromeブラウザの表示に反映されないケースがありました。
DjangoでCSSの変更してもブラウザ表示が更新されない場合の対処方法を紹介します。
Djangoはプログラミング言語Pythonのフレームワーク
PythonにはWebアプリを作成するためのDjangoというフレームワークがあります。
一般的にPythonは機械学習や数値計算などで利用されるPythonですが、Djangoフレームワークを利用することで、Webアプリ開発をPythonで実装できます。
Djangoはいくつか存在するPythonのWebアプリ用フレームワークの中でも、Webアプリで求められる機能がフルに活用できるのがメリットに挙げられます。
DjangoのCSSがブラウザで更新されない
DjangoでWebアプリを作成するために、Pythonのコードを書く他に、HTMLファイルや見た目を整えるCSSファイルも用意する必要があります。
今回、CSSファイル作成し一度表示確認した後、表示内容のデザインを調整するCSSを修正したのですが、Chromeのブラウザで変更内容が反映されない事象が発生しました。
Chromeの検証ツールでCSSが読み込まれていることや、変更した内容を直接書き換えると反映されることは確認しました。
しかし、F5キーによるブラウザの更新や、テスト環境でDjangoのrunserverを再起動したものの、CSSの変更は反映されませんでした。
CSSなどの静的ファイルはブラウザでキャッシュされる
DjangoでCSSが更新されない原因は、ブラウザのキャッシュ機能です。
ChromeなどのWebブラウザにはキャッシュ機能があり、CSSなどの静的なファイルはブラウザ上でキャッシュとして保存されてしまっています。
リロードしても、サーバーにある修正後のCSSファイルが取得されず、キャッシュされたCSSファイルでWebページが表示されます。
その結果、CSSファイルで行なった修正内容が反映されない事象が発生していました。
DjangoのCSSが更新されない解決策はスーパーリロード
Djangoで修正したCSSが更新されない場合は、スーパーリロードと呼ばれる解決策で解消できます。
スーパーリロードは通常のリロード(更新)と異なり、ブラウザのキャッシュを参照せずに、サーバーからCSSなどの静的ファイルを取得します。
スーパーリロードは、ショートカットキーでShiftキーとF5キーを同時押しすることで実行可能です。
今回DjangoのCSSが反映されないケースも、Chromeでスーパーリロードを実行することで、CSSが更新され、修正後のWebページが表示されました。
もし、これで解消しないケースは、Chromeのシークレットウィンドウや、ゲストユーザーで確認してみましょう。
まとめ・終わりに
今回、PythonのWebフレームワーク「Django」でCSS修正したにも関わらずブラウザ上の表示が反映されない事象の解決方法を紹介しました。
DjangoのCSSファイルを修正して、テストサーバーを再起動してもChromeなどのブラウザのキャッシュが残っているため、変更内容が反映されていないのが原因です。
解決策としては、ショートカットキー「Shift + F5」を押して、スーパーリロードを行います。
スーパーリロードはブラウザキャッシュが聞いている場合でも、サーバー側にファイル取得を行うため、修正後のCSSファイルが反映されます。
DjangoのCSSを修正しても、ブラウザの見た目・デザインが変わらない場合はスーパーリロードを試してみて下さい。