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

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

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

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

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

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

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

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

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

Within the `static` directory you have just created, create another directory
called `polls` and within that create a file called `style.css`. In other
words, your stylesheet should be at `polls/static/polls/style.css`. Because
of how the `AppDirectoriesFinder` staticfile finder works, you can refer to
this static file in Django as `polls/style.css`, similar to how you reference
the path for templates.

> **静的ファイルの名前空間**
>
> Just like templates, we *might* be able to get away with putting our static
> files directly in `polls/static` (rather than creating another `polls`
> subdirectory), but it would actually be a bad idea. Django will choose the
> first static file it finds whose name matches, and if you had a static file
> with the same name in a *different* application, Django would be unable to
> distinguish between them. We need to be able to point Django at the right
> one, and the best way to ensure this is by *namespacing* them. That is, by
> putting those static files inside *another* directory named for the
> application itself.

スタイルシートに次のコードを配置します (`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 が生成しない静的ファイル内では使用できません。そのため、2つの静的ファイルを互いにリンクするときには、必ず **相対パス** を使用するべきです。そうすれば、[`STATIC_URL`](/ja/3.0/ref/settings/#std-setting-STATIC_URL) ([`static`](/ja/3.0/ref/templates/builtins/#std-templatetag-static) テンプレートタグが URL を生成する時に使われる) を変更しても、静的ファイルのパスを書き換えずに済みます。

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

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