Djangoにてcssファイルなどの設定方法をまとめてみた

静的ファイルとは

cssファイル
jsファイル
画像ファイル
動画ファイル

などのクライアントからのリクエストによって、内容が変化しないファイルのことを静的ファイルと言います。今回はその中でcssファイルやjsファイルなどhtmlテンプレート関連ファイルの設定についてまとめます。
画像ファイルや動画ファイル（ユーザからアップロードを受ける静的ファイル）の場合についてはこちらをご参照ください。
https://qiita.com/Suchmos7/items/ca75b7daf969403735e1

Setting.pyでの設定

設定が必要なパラメータは主に3つです。

STATIC_URL
STATICFILES_DIRS
STATIC_ROOT

STATIC_URL
静的ファイル（css,js）配信用のURLを指定する。
デフォルトで'/static/'となっている。
http(s)://ホスト名/static/...
でアクセスできるようになる。

settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS
プロジェクト内で静的ファイルを保存する場所を指定します。
デフォルトでの保存先は
プロジェクト名/アプリ名/static/アプリ名/...
となっているが、複数のアプリケーション内でcssファイルを用いたい時などにいちいちstatic/アプリ名/...と配置するのは面倒なので、
以下のように定義し、manage.pyやアプリケーションフォルダがあるプロジェクトディレクトリ直下に置くのが好ましい。

settings.py

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

ちなみにBASE_DIRはプロジェクト直下を指すパスで、以下のように同じくsettings.pyにて定義した変数。

settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_ROOT
setting.pyにてDEBUG=Falseの時に参照される静的ファイルの保存先。つまり本番用。
セキュリティの観点からプロジェクト内での静的ファイルの保存先と本番での保存先は違ったほうが良いという理由から、保存先を変更する。

settings.py

STATIC_ROOT = '/var/www/プロジェクト名/static'

urls.pyでの設定

urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app1.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

まず、settingsとstaticをインポートします。
そしてurlpatterns変数に上記のように付け足します。
第一引数には静的ファイルの配信URL、document_root引数には静的ファイルの保存先を指定します。
これによりURLと保存先が紐づけられ、URLにアクセスしたとき、静的ファイルの保存先につながるようになります。
ここでSTATICFILES_DIRSは使わないのか？と思われたと思うのですが、これはSTATIC_ROOTが設定されていなかったときSTATICFILES_DIRSが参照される。

htmlテンプレートでの呼び出し方

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<img src="{% static 'images/logo.png' %}">

まず{% load static %}でstaticが使えるようにします。
そして、各タグ内のurl指定にて
{% static 'ファイル名' %}
と指定します。これはSTATICFILES_DIRSまたはSTATIC_ROOT以下からのパスを記載します。

上の例だと

project -static - images - logo.png
                L style.css
        Lmanage.py

といった構造になります。