😎

DjangoでCSSが反映されないときの完全ガイド（静的ファイル404対策）

に公開
Django
Python
初心者向け
web開発
tech

🐍 はじめに

DjangoでWebアプリを作っていると、
「CSSが反映されない！」「404 (Not Found) が出る！」
というトラブルに必ず一度は遭遇します。

この記事では、実際に私が遭遇した
「style.css が読み込まれない」問題を題材に、
原因から解決までをわかりやすく整理します。

💡 現象

GET http://127.0.0.1:8000/static/style.css net::ERR_ABORTED 404 (Not Found)

あるいは、ターミナルにこんな警告が出ることもあります。

WARNINGS:
?: (staticfiles.W004) The directory '/path/to/project/static' in the STATICFILES_DIRS setting does not exist.

プロジェクト構成を確認しよう

まずはDjangoの基本構成を見直しましょう

watanabe-meat-judge/
├── manage.py
├── watanabe_meat_judge/
│   └── settings.py
└── judge/
    ├── static/
    │   └── style.css   ←ここにCSSを置く
    ├── templates/
    │   └── base.html
    └── views.py

settings.py の正しい設定

静的ファイルのURL

STATIC_URL = '/static/'

Djangoに「どこを探せばいいか」を教える

STATICFILES_DIRS = [
BASE_DIR / 'judge' / 'static', # ← アプリ名を指定
]

本番用：collectstaticでまとめる場所

STATIC_ROOT = BASE_DIR / 'staticfiles'

よくある原因と対処法

  1. ファイル名にスペースがある
ls -l judge/static
# 出力例:
style.css␣   ← スペースがある！
  1. collectstatic を忘れている
    静的ファイルを一括収集：
python manage.py collectstatic

結果

128 static files copied to '/project/staticfiles'
  1. サーバー再起動をしていない
python manage.py runserver

再起動後、ブラウザで確認

http://127.0.0.1:8000/static/style.css

CSSコード（body { ... }）が出れば成功です

終わりに

この記事は、私が現在作っている「渡辺さんの肉か肉じゃないかクイズ」アプリ開発中に遭遇したエラーをきっかけにまとめた備忘録です。

Discussion