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

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

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

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

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

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

## *アプリ* のルック & フィールをカスタマイズする

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

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

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

> **静的ファイルの名前空間**
>
> テンプレートと同様に、 `polls` という別のサブディレクトリを作らずに、直接 `polls/static` の中に静的ファイルを置いてもいいのではないか、と思うかもしれませんね。しかし、それは実際には悪い考えです。Django は、名前がマッチした最初のテンプレートを使用するので、もし *異なる* アプリケーションの中に同じ名前のテンプレートがあった場合、Django はそれらを区別できません。そのため、Django に正しいテンプレートを教えてあげる必要がありますが、一番簡単な方法は、それらに *名前空間を与える* ことです。アプリケーションと同じ名前をつけた *もう一つの* ディレクトリの中にテンプレートを置いたのは、そういうわけなのです。

スタイルシートに次のコードを配置します (`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" href="{% static 'polls/style.css' %}">
```

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

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

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

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

*Windows*

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

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

## 背景画像を追加する

次に画像用にサブディレクトリを作成します。 `polls/static/polls/` ディレクトリの中に `images` サブディレクトリを 作ります。ディレクトリの中に背景と使用したい画像ファイルを追加します。このチュートリアルでは  `background.png` という名前ファイルを使用します。このファイルのフルパスは  `polls/static/polls/images/background.png` となるようにします。

さらに、スタイルシート (`polls/static/polls/style.css`) に画像への参照を追加します。

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

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

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

> **Warning**
>
> `{% static %}` テンプレートタグは、スタイルシートのように Django によって生成されない静的ファイルで使用することはできません。静的ファイル間で相互にリンクする際には、常に **相対パス** を使用すべきです。なぜなら、 [`STATIC_URL`](/ja/5.1/ref/settings/#std-setting-STATIC_URL) ([`static`](/ja/5.1/ref/templates/builtins/#std-templatetag-static) テンプレートタグがURLを生成するために使用する) を変更した場合でも、静的ファイル内の多くのパスを修正する必要がなくなるからです。

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

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