Python Django templateにcssを適用する

今回は、templateのhtmlにcssを適用する方法について見ていきます。

外部サービスの提供しているcssを利用する場合
自作のcssファイルやダウンロードしたcssファイルを読み込む場合

外部サービスの提供しているcssを利用する場合

たとえば、Bootstrapを使いたい場合、サイトのホームページからcssファイルをダウンロードして、利用する方法と、インターネット経由でcssファイルを読み込む方法の2つがあります。
インターネット経由でcssを読み込む場合は、djangoであっても使用方法は同じです。
headタグ内にlinkタグで指定してあげるだけでOKです。

<head>
	<meta charset="UTF-8">
		<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

	<title>{{ title }}</title>
</head>

本題と少しそれますが、Bootstrapを利用する場合は、合わせてJavaScriptも読み込む必要があります。Bootstrapの利用機会は多いと思いますので、ここに書いておきます。

JavaScriptは、templateファイルとして切り出しておきます。（必須ではありません。）

javascript.html

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

切り出したファイルは、bodyタグ内に紐付けてあげます。

base.html

<!DOCTYPE html>
<html lang="ja">
	{% include 'app_name/head.html' %}
<body>
	<p>共通部分です</p>
{% block content %}
{% endblock %}
{% include 'app_name/javascripts.html' %}
</body>
</html>

フォルダ構成は、こんな感じです。

.
├── app_name
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── admin.cpython-36.pyc
│   │   ├── models.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── views.cpython-36.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       └── __init__.cpython-36.pyc
│   ├── models.py
│   ├── templates
│   │   └── app_name
│   │       ├── base.html
│   │       ├── head.html
│   │       ├── index.html
│   │       └── javascripts.html　　　　　　　# javascriptをまとめるためのファイルを追加しました
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── project_name
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-36.pyc
    │   ├── settings.cpython-36.pyc
    │   ├── urls.cpython-36.pyc
    │   └── wsgi.cpython-36.pyc
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

準備完了です。
ちゃんと動くか確認するため、index.htmlファイルにスタイルを設定してみます。

{% extends 'app_name/base.html' %}

{% block content %}
<h1 class="text-center text-primary">見出しを追加しました</h1>
<p class="display-1">ここから、index.htmlで指定しています。</p>
{{ message }}
<p class="display-2 text-warning">ここまで、index.htmlで指定しています。</p>
{% endblock %}

ページを確認してみます。

バッチリですね！

自作のcssファイルやダウンロードしたcssファイルを読み込む場合

自分で作ったcssファイルを利用したい場合は、先のbootstrapをダウンロードして利用したい場合は、こちらになります。
まず、cssファイル用のフォルダを用意します。

アプリケーションフォルダの中に、staticフォルダを作成します。
staticフォルダの中に、app_nameフォルダを作成します。
app_nameフォルダの中に、cssフォルダを作成します。

.
├── app_name
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── admin.cpython-36.pyc
│   │   ├── models.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── views.cpython-36.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       └── __init__.cpython-36.pyc
│   ├── models.py
│   ├── static　　　　　　　　　　　　# ここから
│   │   └── app_name
│   │       └── css　　　　　　　　　# ここまで
│   ├── templates
│   │   └── app_name
│   │       ├── base.html
│   │       ├── head.html
│   │       ├── index.html
│   │       └── javascripts.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── project_name
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-36.pyc
    │   ├── settings.cpython-36.pyc
    │   ├── urls.cpython-36.pyc
    │   └── wsgi.cpython-36.pyc
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

作成したcssフォルダの中に、cssファイルを作成します。
ここでは、style.cssファイルを作成します。
ファイルには、ページ背景に色を付けるように設定を入れておきます。

style.css

body {
	background: skyblue; 
}

次に、headタグ内にいま作成したcssファイルを読み込むためのlinkタグを作成します。

head.html

{% load static %}
<head>
	<meta charset="UTF-8">
		<!-- Bootstrap CSS -->
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    	<!-- Original CSS -->
    	<link rel="stylesheet" href="{% static 'app_name/css/style.css' %}">
	<title>{{ title }}</title>
</head>

ポイントは、２つ！

staticフォルダ以下に配置したファイルを読み込む場合は、ファイルの先頭に
{% load static %}を記述する。
staticフォルダ以下のファイルのリンク先は、{% static ‘パス’ %}で指定できる。

では、ページにアクセスしてみましょう。

ちゃんと反映されてますね。

次回は、javascriptを利用する方法について見ていきます。