この記事の要点
Django の静的ファイル (static) をプロジェクト単位で読み込む設定 settings.py: STATIC_URL = '/static/' + STATICFILES_DIRS = [BASE_DIR / "static"] テンプレートで {% load static %} → {% static 'css/app.css' %} で参照 本番は collectstatic で STATIC_ROOT に集約

 

settings.py

以下はプロジェクト共通のstaticディレクトリを使う例です。2026年10月にDjango 6.0.7 / Python 3.12でパスの検出とテンプレートのURL生成を確認しました。開発中の配信と本番の配信は分けて考えます。

settings.pyにて静的ファイルを読み込むURLと静的ファイルを格納するディレクトリを定義する。

以下の例ではURLはstatic始まり、ディレクトリはプロジェクト直下のstaticディレクトリを指定している。

STATIC_URL = '/static/' STATICFILES_DIRS = (     [         os.path.join(BASE_DIR, "static"),     ] )

 

上のos.path.join例はimport osとBASE_DIRの定義が必要です。丸括弧の内側がリストなので、全体もリストであり、誤ったタプルではありません。以下はPath型のBASE_DIRを使う設定例です。既存のBASE_DIRは確認して利用し、プロジェクトの他の設定を消して丸ごと置き換えないでください。

from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_URL = "/static/"
STATICFILES_DIRS = [BASE_DIR / "static"]
# collectstaticの出力先。入力のstaticディレクトリとは分ける。
STATIC_ROOT = BASE_DIR / "staticfiles"

INSTALLED_APPSにdjango.contrib.staticfilesがあることも確認します。STATICFILES_DIRSは収集元、STATIC_ROOTはcollectstaticの出力先であり、同じディレクトリにしません。STATIC_URLはブラウザのURLの接頭辞で、ディスク上のパスではありません。

静的ファイルの設置

以下の様にプロジェクト直下にstaticディレクトリを作成して更にその中にcssおよびjsディレクトリを作成する。

プロジェクト名/     db.sqlite3     manage.py     プロジェクト名/         __init__.py         settings.py         urls.py         wsgi.py     アプリケーション名/         __init__.py         __pycache__/         admin.py         apps.py         migrations/         models.py         views.py     static/         css         js

cssおよびjsディレクトリの中に適当なファイルを設置する。（今回はtest.css, test.jsとする）この例ではstatic/css/test.cssとstatic/js/test.jsを次の内容にします。

 

static/css/test.css

h1 { color: #173c66; }

static/js/test.js

console.log('static test loaded');

テンプレートの記述

テンプレート側では以下のように記述することで静的ファイルを読み込むことが出来る。

{% load static %}
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link href="{% static 'css/test.css' %}" rel="stylesheet">
  <script src="{% static 'js/test.js' %}" defer></script>
</head>
<body><h1>静的ファイルの読み込み確認</h1></body>
</html>

 

開発環境で確認する

テンプレートを既存のビューから表示し、見出しの色とブラウザのConsoleを確認します。DEBUG=Trueかつdjango.contrib.staticfilesを有効にした開発環境では、runserverが静的ファイルを配信します。次は対象プロジェクトの仮想環境を有効にし、manage.pyがある場所で実行する例です。

python manage.py findstatic css/test.css --verbosity 2
python manage.py findstatic js/test.js --verbosity 2
python manage.py runserver

findstaticで今回のstatic配下の実ファイルが見つかることを確認します。ブラウザのNetworkで/static/css/test.cssと/static/js/test.jsが200になり、HTMLではなくCSS・JavaScriptが返るかも確認してください。ファイルが見つからなければ、BASE_DIRの位置・ファイル名・STATICFILES_DIRS・staticfilesアプリを順に見ます。

本番では収集と配信を分ける

本番向けの設定でSTATIC_ROOTを指定し、正式なデプロイ手順の中で実行します。

python manage.py collectstatic --noinput

この処理は収集元からSTATIC_ROOTへファイルを集めます。STATIC_ROOTを指定しただけ、またはcollectstaticを実行しただけでは、Webサーバーの配信設定は完成しません。STATIC_URLに対応するURLから、収集先のファイルをWebサーバーや利用中の配信基盤が返すように設定してください。runserverは本番公開用ではありません。

混同しやすい点

• 画像アップロードなど利用者のファイルはMEDIA_ROOT / MEDIA_URL側の設計です。静的なCSS・JSの収集先に混ぜません。
• {% load static %}はそのタグを使うテンプレート内で必要です。読み込みとファイルの存在確認は別です。
• 同じ相対パスのファイルが複数ある場合はfindstaticの結果を見ます。アプリごとのファイルは名前空間付きディレクトリで衝突を避けます。
• 開発で動いて本番だけ404になる場合は、収集の実行結果・STATIC_ROOTの実ファイル・URLと配信先の対応を確認します。

今回の検証はCSS/JSの検出、テンプレートでのURL生成、収集元と出力先の分離です。本番のWebサーバー設定やcollectstaticの実行はこの記事の検証では行っていません。

公式資料: Django 6.0の静的ファイル管理（2026年10月確認）。