{"title":"はじめての Django アプリ作成、その 6","version":"1.9","locale":"ja","docname":"intro/tutorial06","url":"/ja/1.9/intro/tutorial06/","canonical":"https://djangodocs.dev/ja/1.9/intro/tutorial06/","summary":"このチュートリアルはチュートリアル 5 の続きです。Web 投票アプリケーションのテストが完成したので、今度はスタイルシートや画像を追加しましょう。","html":"

はじめての Django アプリ作成、その 6Link to this heading#

\n

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

\n

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

\n

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

\n

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

\n
\n

アプリ の構造をカスタマイズするLink to this heading#

\n

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

\n

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

\n

今作った static ディレクトリの中に、polls という名前の新しいディレクトリを作り、さらにその中に、style.css という名前のファイルを作成します。つまり、このスタイルシートは polls/static/polls/style.css に保存します。AppDirectoriesFinder の動作のしくみのおかげで、Django では、ただ polls/style.css と書くだけでこの静的ファイルを参照することができます。これは、テンプレートのパスを参照する時と同じです。

\n\n

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

\n
polls/static/polls/style.css
Css
li a {\n    color: green;\n}\n
\n

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

\n
polls/templates/polls/index.html
Django template
{% load staticfiles %}\n\n<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />\n
\n

{% load staticfiles %} は、{% static %} テンプレートタグを staticfiles のテンプレートライブラリから読み込みます。そして、{% static %} テンプレートタグは、静的ファイルの絶対URLを生成します。

\n

開発でするべきことはこれだけです。http://localhost:8000/polls/ をリロードすれば、質問のリンクが緑色 (Django のスタイル！) に変わったはずです。これで、スタイルシートがちゃんと読み込まれたことがわかりました。

\n
\n
\n

背景画像を追加するLink to this heading#

\n

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

\n

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

\n
polls/static/polls/style.css
Css
body {\n    background: white url("images/background.gif") no-repeat right bottom;\n}\n
\n

http://localhost:8000/polls/ をリロードすれば、画面の右下に、読み込まれた背景画像が表示されるはずです。

\n\n

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

\n

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

\n
","rootId":"writing-your-first-django-app-part-6","toc":[{"title":"アプリ の構造をカスタマイズする","anchor":"customize-your-app-s-look-and-feel","children":[]},{"title":"背景画像を追加する","anchor":"adding-a-background-image","children":[]}],"breadcrumbs":[{"docname":"intro/index","title":"さぁ始めましょう。","url":"/ja/1.9/intro/"}],"prev":{"docname":"intro/tutorial05","title":"はじめての Django アプリ作成、その 5","url":"/ja/1.9/intro/tutorial05/"},"next":{"docname":"intro/tutorial07","title":"はじめての Django アプリ作成、その 7","url":"/ja/1.9/intro/tutorial07/"},"formats":{"html":"/ja/1.9/intro/tutorial06/","markdown":"/ja/1.9/intro/tutorial06.md","json":"/ja/1.9/intro/tutorial06.json"},"source":"https://github.com/django/django/blob/stable/1.9.x/docs/intro/tutorial06.txt","official":"https://docs.djangoproject.com/ja/1.9/intro/tutorial06/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","fr","ja","id","pt-br","es"]}