Djangoチュートリアルを適当に進める~その6~

2019年3月8日

Djangoのチュートリアルの備忘録。
公式チュートリアルだと以下の部分。
https://docs.djangoproject.com/en/2.1/intro/tutorial06/

webアプリには画像ファイルやjavascriptのファイルやcssファイルが必要だ。
Djangoではこれらをstatic files(静的なファイル)と呼んでる。Djangoに限らず、他のフレームワークでもそう呼ぶ気がする。
Djangoでこのstatic filesを適切に管理する方法を学ぶ。

アプリのUXいじり

まず、pollsフォルダ下にstaticフォルダを作る。
その下にpollsをつくる。
ややこしいけど、こんな感じ。

polls
 └static
   └polls

どうやらDjangoは静的なファイルが求められたとき、他のアプリのstaticも見に行って、その中で名前がマッチングするものを探すみたい。
もう少し進めていくと、相対パスでファイルを指定するところがあって、そこの指定の仕方をみると、staticの下のpollsフォルダが基点になってるとわかる。

さて、今作ったpollsフォルダにstyle.cssファイルを作る。
その中に次のコードを書く。

li a {
    color: green;
}

liの中のaのタグの文字は緑にするよって意味。
次にpolls/templates/polls/index.htmlのドタマ(DOTAMA)に次のコードを書く。

{% load static %}

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

これで、さっき作ったスタイルシート(style.css)を指定することが出来た。
ここで出てくる {% static ‘polls/style.css’ %}の
staticはさっき作ったフォルダーを指定している。
さて、サーバーを起動してみる。
http://localhost:8000/polls/
のページはこんな画面になるはず。

ポートフォワーディング、7777にして実行したのは気にしないでいただきたい。

背景を加える

画像を使おう。
polls/static/polls/の下にimageフォルダを作る。
そんで、適当な画像ファイルを入れよう。
っていわれても、「適当な画像ファイルってなんだよ」って思うだろう。
そんな時は画像処理の演習をするときによく使われる玲奈氏を使おう。
ただ、これはフリー素材ではない。本番のホームページで使ってはいけないぞ。
https://en.wikipedia.org/wiki/File:Lenna_(test_image).png

んで、style.cssに次のコードを加える

body {
    background: white url("images/「ここに背景にしたい画像のファイル名」") no-repeat;
}

さあ、もう一度サーバーを起動しよう。

できたね。ところでこれは何の画像だろう?