✓当記事はこのような方へ向けて書かれています
「CSSファイルが読み込めない！」
✓当記事でお伝えること
- static cssファイルを読み込めない場合の解決策
「cssファイルを追加、書き換えたのに反映されない」という方へ解決のヒントとなれば幸いです
注意）こちらはローカル環境でのstaticファイル読み込みについてを記載していますデプロイ後の解決策をお探しの方は別の記事にて必要な情報をお探し下さい
✔Webアプリの公開にはVPSがおすすめ
DjangoなどのWebアプリは、レンタルサーバーでの公開ができません。
自由度の高いVPSを使うのです。
VPS11社を比較し、おすすめをご紹介しています。
Webアプリの公開には、Ubuntuが搭載できるVPSを選びましょう。
Ubuntu環境が用意できたら、こちらのチュートリアルで公開方法を無料公開中。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
解決策
ズバリ、解決策は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」内を見直したのち、直らなければ簡単なところから見直していきましょう
以上となります