More than 3 years have passed since last update.

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

Posted at 2020-10-12

はじめに

みなさん、初めまして。
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とします。

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