スタイルシートと画像を追加する

はじめに

このチュートリアルは、「自動テストを作成する」が終わったところから始まります。テスト済みのウェブ投票アプリケーションを構築しました。これから、スタイルシートと画像を追加します。

Skills Graph

アプリケーションの見た目をカスタマイズする

まず、polls ディレクトリ内に static という名前のディレクトリを作成します。Django はここに静的ファイルを探します。これは、Django が polls/templates/ 内のテンプレートを見つける方法と同様です。

Django の STATICFILES_FINDERS 設定には、さまざまなソースから静的ファイルを見つける方法を知っているファインダーのリストが含まれています。デフォルトの 1 つは AppDirectoriesFinder で、これは各 INSTALLED_APPS 内の "static" サブディレクトリを探します。これは、私たちが作成したばかりの polls 内のもののようなものです。管理サイトも同じディレクトリ構造を静的ファイルに使用しています。

先ほど作成した static ディレクトリ内に、もう 1 つの polls という名前のディレクトリを作成し、その中に style.css という名前のファイルを作成します。つまり、あなたのスタイルシートは polls/static/polls/style.css にあるはずです。AppDirectoriesFinder 静的ファイルファインダーの動作方法のため、Django ではこの静的ファイルを polls/style.css として参照できます。これは、テンプレートのパスを参照する方法と同様です。

静的ファイルの名前空間化

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

そのスタイルシート (polls/static/polls/style.css) に次のコードを入れます：

li a {
  color: green;
}

次に、polls/templates/polls/index.html の先頭に次のコードを追加します：

{% load static %}

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

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

開発に必要なことはこれだけです。

サーバーを起動します（既に実行中の場合は再起動します）：

python manage.py runserver 0.0.0.0:8080

Web 8080 タブを再読み込みすると、質問のリンクが緑色になっているはずです（Django スタイル！）。これは、あなたのスタイルシートが正常に読み込まれたことを意味します。

背景画像の追加

次に、画像用のサブディレクトリを作成します。polls/static/polls/ ディレクトリ内に images サブディレクトリを作成します。このディレクトリ内に、背景として使用したい任意の画像ファイルを追加します。このチュートリアルの目的では、VM の /tmp/background.png ディレクトリにある background.png という名前のファイルを使用しています。

/tmp/background.png を polls/static/polls/images/background.png にコピーする必要があります。

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

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

Web 8080 タブを再読み込むと、画面の左上に背景が読み込まれているはずです。

{% static %} テンプレートタグは、Django によって生成されない静的ファイル（あなたのスタイルシートのようなもの）では使用できません。静的ファイル同士をリンクする際には常に相対パスを使用する必要があります。そうすることで、STATIC_URL（static テンプレートタグが URL を生成する際に使用する）を変更しても、静的ファイル内の多数のパスを変更する必要がなくなるからです。

これが基本事項です。フレームワークに含まれる設定やその他の詳細については、静的ファイルの使い方 </howto/static-files/index> と 静的ファイルのリファレンス </ref/contrib/staticfiles> を参照してください。静的ファイルの展開 </howto/static-files/deployment> では、実際のサーバーで静的ファイルを使用する方法について説明されています。

静的ファイルに慣れたら、Django の自動生成された管理サイトをカスタマイズする方法を学ぶために、「Django の管理サイトのカスタマイズ」を読んでください。

まとめ

おめでとうございます！あなたは、スタイルシートと画像の追加の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。