【Django(エラー処理)】static cssファイルが読み込めない

surprise-imgDjango

✓当記事はこのような方へ向けて書かれています

「CSSファイルが読み込めない!」

✓当記事でお伝えること

  • static cssファイルを読み込めない場合の解決策

「cssファイルを追加、書き換えたのに反映されない」という方へ解決のヒントとなれば幸いです

注意)こちらはローカル環境でのstaticファイル読み込みについてを記載していますデプロイ後の解決策をお探しの方は別の記事にて必要な情報をお探し下さい

筆者プロフィール

筆者プロフィールアイコン

【現職】プロマネ/システムプランニング

【副業】ブログ(月間7万PV)/YouTube/Web・アプリ制作

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

解決策

ズバリ、解決策はsettings.py内の、

STATICFILES_DIRS = [ BASE_DIR / 'static']

にありました

プロジェクト内のstaticファイル保管場所として、フォルダー名を

static

にしていたので、それをSTATICFILES_DIRSで指定する必要がりました

仮に、cssファイルを

mystatic

など、別名のフォルダーに保存していた場合は、

STATICFILES_DIRS = [ BASE_DIR / 'mystatic']

などとする必要があります

「STATICFILES_DIRSとか、STATIC_ROOTとか、役割って何なの?」という方も多いかと思います

↓の記事で、一通り”STATIC”についてまとめましたので、興味のある方はご覧ください!

その他にも?

これでも直らないという方は簡単な方法ではありますが下記もお試し下さい

ローカルサーバーの再起動

シンプルですが意外とこれで解決することも!

staticをロードする

staticURLを記述する前に

{% load static %}

タグは入ってますか?

staticURLを確認

staticファイル以下にcssなどのフォルダーを作っている場合の指定先は、

{% static "css/main.css" %]

などとなります

念のため確認してみましょう!

キャッシュのクリアとリロード(スーパーリロード)

CSSファイル名が同一の場合、過去のCSSを更新せず読み込んでいる可能性があります

キャッシュをクリアしてみましょう!

Google Chromeの場合、

ctrl + shift + Rキー

で、スーパーリロードができますので、ご活用下さい!

まとめ

1日かけて原因を探したら、こんな簡単なことだった!というのはコーディングにはつきものかと思います

まずは最初に記載した「settings.py」内を見直したのち、直らなければ簡単なところから見直していきましょう

以上となります

✔当ブログは以下のような方に向けて書かれています

「Djangoでのアプリ開発を学びたい!」

「Djangoで開発したアプリをWebで公開するにはどうするの?」

✔当ブログ掲載の記事

  • Djangoで作る日報アプリ開発
  • WebアプリをWeb上に公開する方法
  • Webアプリ開発に必要なそのほかの情報
【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

ITCブログにご協力いただける方は、以下もご検討いただけると嬉しいです。

ITCへ投げ銭をする

タイトルとURLをコピーしました