Djangoで静的ファイル（static）を利用する

Djangoにおいて、画像やCSSなどの静的ファイルを利用してみます。

静的ファイルは主にプロジェクト単位とアプリケーション単位において分けることができます。

hello_projcectというプロジェクトおよびmyapp1アプリケーションという名前のアプリケーションを作成した前提で説明していきます。

関連ページ

アプリケーション単位での静的ファイル

まずアプリケーションであるmyapp1ディレクトリの下にstaticディレクトリを作成し、更にアプリケーション名と同じmyapp1ディレクトリを作成、style.cssを適当に記述し配置します。

myapp1/static/myapp1/style.css

h1{
    color:#F00;
    font-size: 22px;
}

h1{

color:#F00;

font-size: 22px;

}

適当な画像も用意し配置します。

myapp1/static/myapp1/sample.png

1	myapp1/static/myapp1/sample.png

テンプレートを下記のように編集します。

myapp1/templates/myapp1/index.html

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>静的ファイル</title>
    <link rel="stylesheet" type="text/css" href="{% static 'myapp1/style.css' %}">
</head>

<body>
    <h1>静的ファイル</h1>
    <img src="{% static 'myapp1/sample.png' %}" alt="サンプル画像">
</body>

</html>

{% load static %}

<!DOCTYPE html>

<html>

<head>

<title>静的ファイル</title>

</head>

<body>

<h1>静的ファイル</h1>

</body>

</html>

以上でCSSが反映され、画像も表示されていることが確認できます。myapp1という名前は名前空間としての役目を持ち、他のアプリケーション内においても利用できます。

静的ファイル自体のURLは下記のようになります。

http://127.0.0.1:8000/static/myapp1/style.css

1	http://127.0.0.1:8000/static/myapp1/style.css

staticの名前の部分は、settings.pyにおいて設定されています。

STATIC_URL = '/static/'

1	STATIC_URL = '/static/'

もし「STATIC_URL = ‘/aiueo/’」のように変更した場合、URLは下記のように変わります。

http://127.0.0.1:8000/aiueo/myapp1/style.css

1	http://127.0.0.1:8000/aiueo/myapp1/style.css

プロジェクト単位での静的ファイル

次にすべてのアプリケーションにおいて共通して利用する場合の、すなわちプロジェクト単位での静的ファイルを作成してみます。

まずsettings.pyに、STATICFILES_DIRS の項目を下記のように追記します。

hello_project/settings.py

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATICFILES_DIRS = (

os.path.join(BASE_DIR, "static"),

)

次にmanage.pyと同階層に、上述したos.path.join()の第2引数と同じ名前のstaticディレクトリを作成し、その中にstyle.cssを作成します。

├── hello_project
    ├── db.sqlite3
    ├── hello_project
    ├── manage.py
    ├── myapp1
    ├── myapp2
    ├── static
    │   └── style.css
    └── templates

├── hello_project

├── db.sqlite3

├── hello_project

├── manage.py

├── myapp1

├── myapp2

├── static

│ └── style.css

└── templates

テンプレートを下記のように編集します。

myapp1/templates/myapp1/index.html

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>静的ファイル</title>
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
</head>

<body>
    <h1>静的ファイル</h1>
    <img src="{% static 'myapp1/sample.png' %}" alt="サンプル画像">
</body>

</html>