Python バックエンド プログラム言語

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

こんにちは!TodoONadaの土門(@daikidomon)です。

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の<head>内に以下のコードを入れます。

<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>

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

python manage.py runserver 0:8000

そして<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>

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

python manage.py runserver 0:8000

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

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

Bootstrapを読み込んでいまます。

関連記事

-Python, バックエンド, プログラム言語

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.