Django チュートリアルを進めていく6 (docker-composeを使って)

4 min readMay 29, 2017

どうもこんにちは、ごっちです。

前回の続きです。もう少しでチュートリアルが一通り終わる感じですかね。はい。

今回も公式チュートリアルに沿って進めていきます。

今回やること

単にHTMLだけだとかなりもの寂しいウェブページになるので、CSSとかJSとか画像とか追加したいのです。

/polls の中に /static ディレクトリを作ります。

DjangoはStaticファイルを探すときに /static ディレクトリから探すようです。

っで、この /static ディレクトリ配下に /polls ディレクトリを作ります。これは /templates と同じく、名前空間を作っておきます。

っで、この /polls ディレクトリ配下に style.css ファイルを作ります。 polls/style.css を編集します。

li a {
	color: #00ff00;
}

ファイルを追加しただけでは何も読み込まれないので、とりあえず /polls/index.html の上部に記述します。

{% load static %}

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

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

画像用のディレクトリを追加します。 polls/static/polls 配下に /images を追加します。

っでこのディレクトリの下にテキトーな画像を置きます。とりあえず、 background.jpg を置いておきました。

そして、その画像ファイルをCSSで使いたいので、 polls/style.css に追記します。

body {
	background: #ffffff url('images/background.jpg') no-repeat right bottom;
}

http://localhost:8000/polls/ にアクセスしてみると、スタイルと背景画像がちゃんとなっているはずです。

わかりにくいですがいらすとやの画像をお借りしました。

きょうはここまで。無事にStyle当てれたりできました。JSファイルも同じように読み込ませられるので、そうしていきましょう。

Originally published at gist.github.com.