サイトアイコン ITC Media

【Django Templates】base.htmlの作成

ITC運営

（最終更新月：2021年11月）

「HTMLの繰り返す記述を省略したい！」

「Python、Djangoらしい記述方法でWebアプリを作っていきたい！」

というDjango初学者の方へ向けての記事となります

当記事を通じて、

方法を解説していきます

各HTMLを単独で記述していくとどうしても同じような記述を繰り返すことになります

当記事でベースとなるHTMLを作成しておけば今後の記述がグッと短くなりますので参考になれば幸いです

実践Django Pythonによる本格Webアプリケーション開発 [ 芝田 将 ]
created by Rinker
¥3,850 (2024/12/26 23:44:13時点 楽天市場調べ-詳細)

さいしょに

当記事では、別記事でご紹介した下記の2ファイルを使って解説を進めていきます

【nippo-list.html】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日報アプリ</title>
  </head>
  <body>
    <h1>こちらは日報アプリのページになります</h1>
  </body>
</html>

【nippo-detail.html】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Views.pyからHTMLへ</title>
  </head>
  <body>
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
    <p>あなたの入力した数字は→ {{ number}} </p>
    <p> {{random_number}} + {{number}} = {{ random_number|add:number}}</p>
  </body>
</html>

下記のようにまとめると2つのファイルで共通している箇所、そうでない箇所がはっきり分かります

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトルは各ページで異なります</title>
  </head>
  <body>
    コンテンツは各ページで異なります
  </body>
</html>

こちらを使い、ベーステンプレートを作成していきます

ベーステンプレートの作成

ベーステンプレートの名前、保存先は下記の通りとします

当アプリ開発では、プロジェクトフォルダが「src」になりますので、下記のようになります

src > templates > base.html

前章のコードをコピペし、ブロックタグと呼ばれるものを配置していきます

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        {% block title %}{% endblock %}
    </title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

ブロックタグについては次章でご説明しています

ブロックタグ の配置

上記のテンプレートでは2箇所にブロックタグを配置しました

設置した箇所は

  1. title内
  2. body内

です

ブロックタグは、

{% block タグ名 %} {% endblock %}

で構成されています

コードで見てみると、

....
<title>{% block title %}{% endblock %}</title>
....
....
<body>
{% block content %}{% endblock %}

となります

対して、ベーステンプレートを継承したHTMLファイルでは、このブロックタグ内にそれぞれの記述を加えていきます

言葉だけではわかりにくいと思いますので、「継承」と「実際の記述」について一緒に見ていきましょう

ベーステンプレートの継承「extends」

HTMLの継承を「extendsタグ」で行います

{% extends 継承元のHTMLファイル名 %}

により、base.htmlから内容を継承することを宣言します

それぞれのファイルでベーステンプレートを継承して、ブロックタグでページ特有のコードを記述していきます

【nippo-list.html】

{% extends "base.html" %}
{% block title %}日報アプリ{% endblock %}
{% block content %}
  <h1>こちらは日報アプリのページになります</h1>
  <p>ブロッックタグを使って表示してます</p>
{% endblock %}

【nippo-detail.html】

{% extends "base.html" %}
{% block title %}ブロックタグで表示{% endblock %}
{% block content %}
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
    <p>あなたの入力した数字は→ {{ number}} </p>
    <p> {{random_number}} + {{number}} = {{ random_number|add:number}}</p>
{% endblock %}

抜粋すると、

などとなっています

【nippo-list.htmlのビフォーアフターは↓の通りです】

【継承前】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日報アプリ</title>
  </head>
  <body>
    <h1>こちらは日報アプリのページになります</h1>
  </body>
</html>

【継承後】

{% extends "base.html "%}
{% block title %}日報アプリ{% endblock %}
{% block content %}
  <h1>こちらは日報アプリのページになります</h1>
  <p>ブロッックタグを使って表示してます</p>
{% endblock %}

随分とスッキリしました！

ただ、今後アプリ開発を進めていくにあたり、ベーステンプレートにBootstrapのCDNを追加しておきましょう

【参考】ベーステンプレートのテンプレート

今後のアプリ開発は下記のベーステンプレートで進めていきます

Bootstrapのスターターテンプレートを元に作成してます

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>{% block title %}{% endblock %}</title>

  </head>
  <body>

    {% block content %}{% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>

※Bootstrapの公式ドキュメントはこちらです↓

https://getbootstrap.com/docs/5.0/getting-started/introduction/

もしくはご自身で使いたいものがあれば、お好きに変更していただいて構いません！

まとめ

当記事を通じて、

  1. ベーステンプレートの作成方法
  2. ブロックタグについて
  3. テンプレートの継承と実際のコード

を解説させていただきました

なかなか文章だけで理解するのも難しいと思います

現段階では、

という2点を頭に入れておきましょう

次回の記事では、テンプレートでフォームを表示、作成したフォームから値を受け取る方法をお伝えします

【Django】formの値を取得する方法をたったの１行で解説
モバイルバージョンを終了