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

surprise-imgDjango

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

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

✓当記事でお伝えること

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

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

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

✔月9,800円でWebデザインが学べる

デザナルは、Webデザインに苦手意識がある方におすすめのサブスク型スクールです。

特徴は以下の通り。

  • 初期費用不要
  • 教材が使い放題
  • 案件で収入も得られる

デザナルは稼ぎながら学べる、格安のWebデザインスクールです。

>>詳細はこちら<<

安い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」内を見直したのち、直らなければ簡単なところから見直していきましょう

以上となります

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

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

という方は必見です!

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

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