Help us understand the problem. What is going on with this article?

DjangoでWebサービスを作る - 2.アプリを作ってみる その7

More than 1 year has passed since last update.

前回の記事「アプリを作ってみる その6」ではdjangoのテストシステムを使ってテストを作成する方法をみた。今回はチュートリアル06に沿って外部ファイル(javascript,css,images等)と連携する方法を見ていく

記事一覧と開発環境

こちら

アプリを作ってみる その6

初回の手順で仮想環境を立ち上げておく

CSSファイルを使ってみる
CSSファイルを作成

djangoで外部ファイルの連携を担当しているのはdjango.contrib.staticfiles。これまでの流れで何となく予想がつくが、CSS等の外部ファイルを使う場合、djangoはファイルを探すパスとしてデフォルトでそれぞれのアプリケーションのstaticフォルダを見に行く。
templateファイルでみたのと同様、名前空間の問題を回避するために、staticのしたにアプリ名のフォルダをもう一つつくるようにする。というわけで以下のCSSを作る

mysite/polls/static/polls/style.css
li a {
    color: green;
}
templateからCSSファイルを使ってスタイルを指定する

index.htmlに以下の2行を追加。

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

{% load static %}して{% static 'relative path from static folder' %}するだけでよい。

画像ファイルを追加する
画像ファイルを配置

画像ファイルbackground.gifmysite/polls/static/polls/images/background.gifに配置する

CSSで背景に画像を設定
mysite/polls/static/polls/style.css
body {
  background: white url("images/background.gif") no-repeat;
}

CSSはdjangoの関与しないところでつくられるのでdjangoの機能でうまいことパスを管理したりはできない。この例のようにstaticの配下に必要なファイルを配置して、CSSでは(CSSファイルからの)相対パスで指定しておくようにすると移行や管理が楽。

確認する

python manage.py runserver 12345をしてhttp://localhost:12345/pollsする。

django_7_1.JPG

背景画像が表示されることを確認できた。

これでひとまずdjangoを使ったwebアプリケーションの作成はできそうだ。次回以降はVPSを借りて実際に何かしらのWebサービスを公開する方向に向けて進めていきたい。

参考文献

[1] Django - tutorial: Writing your first Django app, part 6

pachira
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした