【Django】Bootstrapのテンプレートを適用する方法

前回、CentOS8で構築したDockerでDjangoのコンテナを構築し、簡単なWebサイトのトップページを設定するまでの手順をまとめました。

2020.06.10

今回は、無料でも使用できるWebサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークの「Bootstrap」を利用してトップページに表示させるまでの設定方法をまとめました。

簡単に適用できる簡単な方法を実施したので参考にしてください。

↓↓↓「エンジニア」無料のおすすめ学習・開発環境の詳細↓↓↓

【Django】Bootstrapのテンプレートを適用する方法（環境：CentOS8、Dockerコンテナ）

今回は、Bootstrapから入手したテンプレートを使用し、Djangoのトップページに反映するまでの流れをまとめます。

まずは、Bootstrapのテンプレートですが、シンプルなデザインで、モバイル表示にも適している「simple-sidebar」のテンプレートを入手します。
以下のURLからダウンロードします。

「simple-sidebar」ダウンロードサイト
https://startbootstrap.com/templates/simple-sidebar/

テンプレートをダウンロードした後は、djangoプロジェクトを展開している海藻で、「templates」フォルダ配下に「index.html」、「static」フォルダ配下にそのほかのcssなどのファイルをアップします。

配置は以下の通りとなります。
※「templates」配下のbase.htmlは無視してください。

django/
|-- Dockerfile
|-- db-data
|-- docker-compose.yml
|-- manage.py
|-- myhp
|-- mysite
|-- requirements.txt
|-- ssl_certs
|-- static
|   |-- LICENSE
|   |-- css
|   |-- gulpfile.js
|   |-- index.html
|   |-- package-lock.json
|   |-- package.json
|   `-- vendor
`-- templates
    |-- base.html
    `-- index.html

Djangoプロジェクトの「setting.py」を編集

次に、「template」フォルダ配下のindex。htmlにcssなどのファイルを読み込ませるために、プロジェクト配下の「settings.py」に以下を追記します。

$ vim mysite/settings.py

ファイル最終行の「STATIC_URL」の下に追記します。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

「template」配下に設置した「index.html」を編集

次にtemplateフォルダ配下にアップしたindex.htmlを編集します。

vim template/index.html

base.htmlを使用している場合は、必ず　{% extends ‘base.html’ %}　が先頭で記載されていないといけないので注意しましょう。

今回はとりあえず、index.htmlで表記したいので以下を参考にしてください。

<!DOCTYPE html>
{% load static %}

------中略------
  <!-- Bootstrap core CSS -->
  #<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> #編集前
  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> #編集後

------中略------

  <!-- Custom styles for this template -->
  #<link href="css/simple-sidebar.css" rel="stylesheet"> #編集前
  <link href="{% static 'css/simple-sidebar.css' %}" rel="stylesheet"> #編集後

------中略------

  <!-- Bootstrap core JavaScript -->
  #<script src="vendor/jquery/jquery.min.js"></script> #編集前
  <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script> #編集後
  #<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> #編集前
  <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script> #編集後

ブラウザでBootstrapのテンプレートが反映されていることを確認

上記設定が完了したら、ブラウザを立ち上げ、対象のURLへアクセスします。
それぞれでテンプレートのページが表示されたことが確認できます。

スマホ

以上で、Dangoで構築したWebサイトにBootstrapテンプレートを適用する手順となります。

Python構築入門

サーバーを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

「Udemy」で無料のPython講座を検索

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ