今回は以前作ったDjangoチュートリアルアプリ「Polls」を元に、CSSやJS、画像ファイルなどの静的ファイルをテンプレートから読み込む方法を紹介する。

staticディレクトリの作成

Djangoはデフォルトで、静的ファイルは「app_name/static/app_name」から読み込もうとするのでまずはstaticディレクトリを作成する。

cd polls

mkdir static/polls

静的ファイルの作成

今回はCSSファイルを例にとる。

作成したディレクトリにファイルを作成する。
polls/static/polls/style.css

li a {
	color: green;
}

テンプレートファイルから読み込む

続いてテンプレートファイルを開き、静的ファイル読み込み用のコードを追記する。
polls/templates/polls/index.html

{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">

staticタグは、デフォルトでapp_name/staticディレクトリを読み込むので、続けて読み込みたいファイルパスを指定すれば良い。

開発サーバーで確認

python manage.py runserverで開発サーバーを起動し、確認するとソースコード内に以下のタグが出力されていることが分かる。

<link rel="stylesheet" href="/static/polls/style.css">

補足として、開発サーバーを起動しっぱなしの状態で新たに静的ファイルを配置し読み込んだところ、テンプレートファイルのstaticタグが正しく機能しなかった。

静的ファイルがうまく読み込めない場合はサーバーを再起動することで解決する。