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

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

\n

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

\n

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

\n

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

\n

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

\n\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
\n
Css
li a {\n    color: green;\n}\n
\n

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

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

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

\n

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

\n

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

\n

Linux / macOS

Shell
$ python manage.py runserver\n
\n

Windows

Windows
...\\> py manage.py runserver\n
\n

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

\n
\n
\n

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

\n

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

\n

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

\n
polls/static/polls/style.css
\n
Css
body {\n    background: white url("images/background.png") no-repeat;\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/6.0/intro/"}],"prev":{"docname":"intro/tutorial05","title":"はじめての Django アプリ作成、その 5","url":"/ja/6.0/intro/tutorial05/"},"next":{"docname":"intro/tutorial07","title":"はじめての Django アプリ作成、その 7","url":"/ja/6.0/intro/tutorial07/"},"formats":{"html":"/ja/6.0/intro/tutorial06/","markdown":"/ja/6.0/intro/tutorial06.md","json":"/ja/6.0/intro/tutorial06.json"},"source":"https://github.com/django/django/blob/stable/6.0.x/docs/intro/tutorial06.txt","official":"https://docs.djangoproject.com/ja/6.0/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","sv","zh-hans","ga","fr","ja","id","it","pt-br","ko","es","el","pl"]}