---
title: "はじめての Django アプリ作成、その 6"
version: 3.2
locale: ja
source: https://docs.djangoproject.com/ja/3.2/intro/tutorial06/
canonical: https://djangodocs.dev/ja/3.2/intro/tutorial06/
---
# はじめての Django アプリ作成、その 6

このチュートリアルは [チュートリアル 5](/ja/3.2/intro/tutorial05/) の続きです。Web 投票アプリケーションのテストが完成したので、今度はスタイルシートや画像を追加しましょう。

サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために、画像、JavaScript、CSSなど必要なファイルを提供する必要があります。Djangoでは、これらのファイルを "静的 (static) ファイル" と呼びます。

小さなプロジェクトではこのことは大きな問題になりません。 ウェブサーバが見つけられる場所で静的ファイルを単に管理することができるからです。しかし、もっと大きなプロジェクトで、特に複数のアプリケーションからなる場合は、各アプリケーションが 持っている静的ファイルの集まりを複数扱うことになり、ややこしくなってきます。

`django.contrib.staticfiles` はまさにそのためにあります。これは静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくするものです。

> **困ったときは:**
>
> このチュートリアルの実行に問題がある場合は、FAQ の [Getting Help](/ja/3.2/faq/help/) セクションに進んでください。

## *アプリ* の構造をカスタマイズする

最初に、 `polls` ディレクトリの中に、 `static` ディレクトリを作成します。Django はそこから静的ファイルを探します。Django が `polls/templates/` からテンプレートを探す方法と同様です。

Django の [`STATICFILES_FINDERS`](/ja/3.2/ref/settings/#std-setting-STATICFILES_FINDERS) は、さまざまなソースから静的ファイルを検索する方法を知っているファインダのリストです。デフォルトのファイダの一つは `AppDirectoriesFinder` で、[`INSTALLED_APPS`](/ja/3.2/ref/settings/#std-setting-INSTALLED_APPS) に書かれた各アプリケーションに対して、ちょうど今作った `polls` のような "static" サブディレクトリを検索してくれます。管理サイトの静的ファイルにも、これと同じディレクトリ構造が使われます。

先ほど作成した `static` ディレクトリ内に `polls` という名前のディレクトリを作り、その中に `style.css` というファイルを作成します。言い換えれば、スタイルシートは `polls/static/polls/style.css` にあるはずです。 `AppDirectoriesFinder` のスタティックファイルファインダがどのように動作するかによって、Djangoではこのスタティックファイルを `polls/style.css` として参照することができます。

> **静的ファイルの名前空間**
>
> テンプレートと同じように、静的ファイルを直接 `` polls/static` `` に置くこともできますが（別の `polls` サブディレクトリを作るのではなく）、実際には良くない考えです。Django は最初に見つけた静的ファイルの中から名前が一致するものを選んでしまいます。Django に正しいものを指し示す必要がありますが、それを確実にするための最良の方法は、それらを *namespacing* することです。つまり、静的ファイルをアプリケーション自身の名前を付けたディレクトリの中に置くのです。

スタイルシートに次のコードを配置します (`polls/static/polls/style.css`):

*`polls/static/polls/style.css`*

```css
li a {
    color: green;
}
```

次に、`polls/templates/polls/index.html` の上部に追加します:

*`polls/templates/polls/index.html`*

```html+django
{% load static %}

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

`{% static %}` テンプレートタグは、静的ファイルの完全 URL を生成します。

あなたが開発する必要があるのは、これですべてです。

次のコマンドを実行して、サーバーを起動します (すでに起動済みの場合は再起動します)。

```console
$ python manage.py runserver
```

*Windows*

```doscon
...\> py manage.py runserver
```

`http://localhost:8000/polls/` をリロードすると、質問のリンクが緑色 (Django のスタイルです！) になり、スタイルシートが適切に読み込まれたことが確認できるでしょう。

## 背景画像を追加する

つぎに、画像のためのサブディレクトリを作りましょう。`images` サブディレクトリを `polls/static/polls/` ディレクトリの中に作成します。このディレクトリの中に、`background.gif` という名前の画像を置きます。つまり、画像は `polls/static/polls/images/background.gif` に置きます。

さらに、スタイルシート (`polls/static/polls/style.css`) に次のコードを追加します。

*`polls/static/polls/style.css`*

```css
body {
    background: white url("images/background.gif") no-repeat;
}
```

`http://localhost:8000/polls/` をリロードすると、読み込んだ背景画像がスクリーンの左上部に確認できるでしょう。

> **Warning**
>
> テンプレートタグ `{% static %}` は、スタイルシートのように Django が生成しない静的ファイルでは使えません。静的ファイルをリンクするには、常に **相対パス** を使うべきです。なぜなら、 [`STATIC_URL`](/ja/3.2/ref/settings/#std-setting-STATIC_URL) ( [`static`](/ja/3.2/ref/templates/builtins/#std-templatetag-static) テンプレートタグがURLを生成する際に使用する) [`STATIC_URL`](/ja/3.2/ref/settings/#std-setting-STATIC_URL) を変更することができるからです。

これらは静的ファイルの **基本** です。設定方法やフレームワークの機能の詳細については、[静的ファイルの配信](/ja/3.2/howto/static-files/) と [staticfiles のリファレンス](/ja/3.2/ref/contrib/staticfiles/) を読んでください。[静的ファイルのデプロイ](/ja/3.2/howto/static-files/deployment/) では、実際のサーバでの静的ファイルの使い方について説明しています。

静的ファイルを使いこなせるようになったら、[チュートリアル その7](/ja/3.2/intro/tutorial07/) に進んで、Django が自動生成する管理サイトのカスタマイズをしてみましょう。