Djangoで静的ファイルを読み込む方法について説明します。
「static」ディレクトリにCSSファイルやJavaScriptファイルを格納し、それをDjango Templateで読み込むイメージです。
作業手順は以下のとおりです。
[list class=”ol-circle li-accentbdr acc-bc-before”]
- staticディレクトリを作成し、CSSを格納する
- settings.pyに「STATICFILES_DIRS」変数を追加する
{% static 'css/base.css' %}
でCSSファイルを読み込む
[/list]
staticディレクトリを作成する
プロジェクトのルートディレクトリにstatic
ディレクトリ、static/css
ディレクトリを作成します。

static/css
ディレクトリの下にbase.css
を作成しましょう。
header h1 a {
color: red;
}
このbase.css
をDjangoのテンプレートで読み込みます。
どのようなタグを書けば読み込めるのかを紹介していきます。
settings.pyに「STATICFILES_DIRS」変数を追加する
タグを通してCSSファイルを読み込むために、プロジェクトのsettings.pyを編集します。
「プロジェクト」というのは、
django-admin startproject hogehoge_project .
のコマンドで生成したものを指します。
hogehoge_project/settings.pyの一番下に「STATIC_URL = ‘/static/’」があると思いますが、その下に「STATICFILES_DIRS」変数を追加します。
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # 追加したもの
CSSファイルを読み込む
上記の手順でstaticファイルを読み込む準備はできました。
HTMLファイルで読み込んでみましょう。
HTMLファイルの一番上に{% load static %}
を書いて、staticタグを読み込みます。
そうすると、staticタグで読み込めます。
<link href="{% static 'css/base.css' %}" rel="stylesheet">
HTML全体では以下のようなイメージです。
{% load static %}
<html>
<head>
<title>Django Easy Blog</title>
<link href="{% static 'css/base.css' %}" rel="stylesheet">
</head>
<body>
<header>
<h1><a href="{% url 'home' %}">Django Easy blog</a></h1>
</header>
<div>
{% block content %}
{% endblock content %}
</div>
</body>
</html>
これでCSSファイルを読み込んでテンプレートのHTMLに反映させることができました。