DjangoテンプレートにCSS及びBootstrapを読み込む方法

2020年7月5日2022年6月4日

DjangoのテンプレートCSSについて紹介します。

テンプレートCSSの説明

DjangoではテンプレートをHTMLファイルで構成されているためCSSファイルを読み込むことでスタイルを適用することができます。

テンプレートCSSとは、HTMLがCSSをロードすることを指します。

テンプレートCSSの設定

テンプレートにCSSをロードする場合、

特定のコードを入れる以外CSSファイルを置く場所を設定する必要があります。

settings.pyに行き、STATIC_URL = \’/static/\’の後ろに、

以下のコードを入れます。

STATICFILES_DIRS = (
    追加したいディレクトリ
)

デフォルトの場合プロジェクト名/アプリ名の下にstaticというフォルダを作り、

その中にまたCSSというフォルダを作り、

中にCSSファイルを入れれば読み込めます。

今回はデフォルトで説明します。

サンプルは以下になります。

今までの章でフォルダの構造はいかになります。

mysite
|-- db.sqlite3
|-- hello
|   |-- admin.py
|   |-- apps.py
|   |-- __init__.py
|   |-- migrations
|   |   |-- __init__.py
|   |   `-- __pycache__
|   |       `-- __init__.cpython-36.pyc
|   |-- models.py
|   |-- __pycache__
|   |   |-- admin.cpython-36.pyc
|   |   |-- __init__.cpython-36.pyc
|   |   |-- models.cpython-36.pyc
|   |   |-- urls.cpython-36.pyc
|   |   `-- views.cpython-36.pyc
|   |-- static
|   |   `-- css
|   |       |-- bootstrap.min.css
|   |       `-- style.css
|   |-- templates
|   |   `-- index.html
|   |-- tests.py
|   |-- urls.py
|   `-- views.py
|-- manage.py
`-- mysite
    |-- asgi.py
    |-- __init__.py
    |-- __pycache__
    |   |-- __init__.cpython-36.pyc
    |   |-- settings.cpython-36.pyc
    |   |-- urls.cpython-36.pyc
    |   `-- wsgi.cpython-36.pyc
    |-- settings.py
    |-- urls.py
    `-- wsgi.py

このmysite/hello/ディレクトリの下にstaticというファイルを作成してください。

その後mysite/hello/static/の中にCSSというフォルダを作成してください。

これで設定は完了しました。

CSSの表示方法

CSSを表示する方法はいかになります。

htmlファイルの最初の行:

{% load static %}

htmlのhead内:

<link rel=stylesheet href={% static 'cssのディレクトリ' %}>

サンプルコードは以下になります。

まずhello/templatesの中にあるbase.htmlを削除してください。

その後index.htmlを以下の様に編集します。

<html>
<head>
  <meta charset=UTF-8>
  <title>CSS test</title>
</head>
<body>
  <div class = greeting>
    <p>Hello</p>
  </div>
  <div class = function>
    <p>This is css test</p>
  </div>
</body>
</html>

編集し終えたら、hello/static/css内にcssファイルを作ります。

今回のファイルの名前はstyle.cssでございます。

内容は以下になります。

.greeting{
    background-color:#66CCFF;
    height:30px;
}

.function{
    background-color:#66CC99;
    height:30px;
}

そしてindex.htmlにcssを読み込むコードを書きます。

コードは以下の様になります。

{% load static %}
<html>
<head>
  <meta charset=UTF-8>
  <title>CSS test</title>
  <link rel=stylesheet href={% static 'css/style.css' %}>
</head>
<body>
  <div class = greeting>
    <p>Hello</p>
  </div>
  <div class = function>
    <p>This is css test</p>
  </div>
</body>
</html>

最後にhello/のディレクトリの下にあるviews.pyを以下の様に編集してください。

from django.shortcuts import render

def show_index(request):
    return render(request, 'index.html')

そして起動してみましょう。

python manage.py runserver 0:8000

そして<ipアドレス>:8000/helloに行ってみましょう。

以下の様になっております。

CSSの表示に成功しました。

Bootstrapの読み込み

bootstrapの読み込みは二つ方法があります。

一つ目:ダウンロードせずにBootstrapCDNから配信されるコンパイルされたCSSを利用方法はhtmlのhead内に以下のコードを入れます。

<link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css \
      integrity=sha384-jJ2L/Ujk8jWEwtIXPFEk3X+f20QKnj4IIscn+JZzxqkbAUC79idDdiAhAi2E7czT \
      crossorigin=anonymous>

二つ目:bootstrapファイルをダウンロードして中static/cssに配置方法はhtmlの内に以下のコードを入れます。

<link rel=stylesheet href={% static 'staticディレクトリの下の読み込みたいbootstrapファイル' %}>

まず一つ目の方法から説明いたします。

BootstrapCDNから配信されるコンパイルされたCSSを使う場合、

head内に上のコードをいれます。

それではindex.htmlを以下の様に修正してください。

{% load static %}
<html>
<head>
  <meta charset=UTF-8>
  <title>CSS test</title>
  <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css \ 
    integrity=sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk \ 
    crossorigin=anonymous>
</head>
<body>
<table class=table table-dark>
  <thead>
    <tr>
      <th scope=col>#</th>
      <th scope=col>Name</th>
      <th scope=col>Age</th>
      <th scope=col>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope=row>1</th>
      <td>Ken</td>
      <td>25</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <th scope=row>2</th>
      <td>Nathan</td>
      <td>30</td>
      <td>Doctor</td>
    </tr>
    <tr>
      <th scope=row>3</th>
      <td>Jerry</td>
      <td>35</td>
      <td>Lawyer</td>
    </tr>
  </tbody>
</table>
</body>
</html>

そして起動してみましょう

そして<ipアドレス>:8000/helloに行ってみましょう。

以下の様になっております。

二つ目はソースをダウンロードする必要があります。

ダウンロードする場合のurlは以下になります。

Bootstrapソース: ソースのダウンロードページ

このurlに行きコンパイルされたCSSとJSをダウンロードし、

その中にあるCSSのフォルダの中のbootstrap.min.cssを取り出し、

mysite/hello/static/cssに入れてください。

その後、index.htmlを以下の様に修正します。

{% load static %}
<html>
<head>
  <meta charset=UTF-8>
  <title>CSS test</title>
  <link rel=stylesheet href={% static 'css/bootstrap.min.css' %}>
</head>
<body>
<table class=table table-dark>
  <thead>
    <tr>
      <th scope=col>#</th>
      <th scope=col>Name</th>
      <th scope=col>Age</th>
      <th scope=col>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope=row>1</th>
      <td>Ken</td>
      <td>25</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <th scope=row>2</th>
      <td>Nathan</td>
      <td>30</td>
      <td>Doctor</td>
    </tr>
    <tr>
      <th scope=row>3</th>
      <td>Jerry</td>
      <td>35</td>
      <td>Lawyer</td>
    </tr>
  </tbody>
</table>
</body>
</html>

そして起動してみましょう。