【初心者】【Python/Django】駆け出しWebエンジニアがDjangoチュートリアルをやってみた～その6～

4634 ワード
Webアプリケーション チュートリアル Python 初心者 Django Python テキストリンク

はじめに

みなさん、初めまして。
Djangoを用いた投票 (poll) アプリケーションの作成過程を備忘録として公開していこうと思います。
Qiita初心者ですので読みにくい部分もあると思いますがご了承ください。

シリーズ

作業開始

今回はstaticファイルを操作していきます。staticファイルとはJavaScript、CSS、画像などのことです。

アプリ の構造をカスタマイズする

SCCファイルを作成します。
まずはCSSファイルを格納するディレクトリを作成します。

Djangoのデフォルト仕様に則り「polls/static/polls/」ディレクトリを作成します。その配下にstyle.cssファイルを作成しましょう。

CSSを記述します。

polls/static/polls/style.css

li a {
    color: red;
}

HTMLにCSSを読み込みます。
この時、{% static %}テンプレートタグを使用するのを忘れないでください。

polls/templates/index.html

{% load static %}

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

サーバを起動しSCCが適用されていることを確認します。


(poll-HcNSSqhc) C:\django\poll>python manage.py runserver

リンクが赤になりました。

より自然な緑にしておきます。

polls/static/polls/style.css

li a {
    color: green;
}

背景画像を追加する

画像フォルダを作成します。
画像もstaticファイルの一種ですので、「polls/static/polls/images」フォルダを作成し、配下にDjangoのロゴを配置します。

polls/static/polls/style.css
body {
    background-image: url("images/django.png");
    background-size: 30%;
    background-repeat: no-repeat;
}

背景画像が表示されました。画像読み込みができたので、とりあえずOKとします。

本日はここまでにします。ありがとうございました。