DjangoでcssやJavaScript、画像などの静的ファイルを読み込む方法

: 2018-10-02 | : 2021-03-10

Djangoのプロジェクトで使うスタイルシートやJavaScript、画像ファイルはどこに置けばいいんでしょうねー。

ということでまとめました。

静的ファイルは「static」ディレクトリに置く

次のような感じでアプリケーションのディレクトリ配下にstaticという名前のディレクトリを作成し、静的ファイルを置きます。

.
├── hello
~
├── hello_app
~
│   ├── models.py
│   ├── static # <- ここ
│   │   └── css
│   │       └── custom.css
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views.py
└── manage.py

HTMLファイルから読み込む

テンプレートの最初にloadタグを書き、staticタグでリンクを記述します。

{%!l(MISSING)oad static %!}(MISSING)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{%!s(MISSING)tatic 'css/custom.css' %!}(MISSING)">
  </head>

上の例ではstaticディレクトリに置かれたcssディレクトリの中のcustom.cssを参照しています。

全てのアプリケーションに適用したい場合

アプリケーションが複数あって、かつ全てのアプリケーションで共通のスタイルを当てたい、という場合があると思います。

Railsならassetsに全て突っ込めばいい感じにしてくれるのですが、Djangoでは一工夫必要になります。

settings.pyにSTATIC_ROOTを設定
python manage.py collectstatic を実行

STATIC_ROOTの設定

settings.pyの最後尾などに、STATIC_ROOT変数を追記します。

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

collectstaticの実行

次のコマンドを実行します。

python manage.py collectstatic

全てのアプリケーションにある静的ファイルを自動で一箇所に集めてくれます。

. # <- プロジェクトのルートディレクトリ
├── hello
~
├── hello_app
~
├── manage.py
└── static # <- ここに集めてくれる
    ├── admin
    │   ├── css
    │   ├── fonts
    │   ├── img
    │   └── js
    └── css
        └── custom.css

まとめ

アプリケーションごとに static ディレクトリを用意するのが基本スタイル。

全てのアプリケーションで同じファイルを使いまわしたい場合は collectstatic を使う。という感じです。

これでDjangoアプリの表側はかなりいじれるようになりました。やったね！