【Django(初学者向け)】HTMLを分割「include」タグを使ってスッキリ見やすくする方法

Django

(最終更新月:2021年11月)

「ゴチャゴチャしてきたHTMLファイルを整理したい!」

「何度も使うHTMLコードを別ファイルに保存したい!」

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

当記事を通じて、

  • 別HTMLファイルを読み込む「include」タグを使う方法

について解説していきます

✔月9,800円でWebデザインが学べる

デザナルは、Webデザインに苦手意識がある方におすすめのサブスク型スクールです。

特徴は以下の通り。

  • 初期費用不要
  • 教材が使い放題
  • 案件で収入も得られる

デザナルは稼ぎながら学べる、格安のWebデザインスクールです。

>>詳細はこちら<<

安いWebデザインスクール「デザナル」を徹底分析

別ファイルを読み込む「include」タグ

「include」タグを使って、別のHTMLファイルを読み込むことができます

読み込みたい箇所で、

{% include “templatesフォルダ以下のパス” %}

を記述することで対象のファイルをそのまま読み込むことが可能です

開発中の日報アプリでのコード例を見てみましょう!

分割元のベーステンプレート

今回、ベースとしているHTMLテンプレートがゴチャゴチャしてきましたので、別ファイルに保存し、整理していきたいと思います

【templates > base.html】

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/footer.css' %}">
    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-primary">
      <div class="container-fluid">
        <div>
          <a class="navbar-brand" href="#">
              <i class="bi bi-bootstrap-fill" style="font-size: 2rem;"></i>
          </a>
        </div>
        <div class="flex-grow-1" style="max-width:500px;">
          <form class="d-flex" method="GET">
            <input class="form-control me-2" type="search" placeholder="検索..." aria-label="Search" name="search">
            <button class="btn btn-outline-light" type="submit">search</button>
          </form>
        </div>
        <div class="text-light nav-item dropdown">
            <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              ユーザー名
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">アカウント設定</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">ログアウト</a></li>
            </ul>
        </div>
      </div>
    </nav>
    {% block content %}{% endblock %}
    <footer class="bg-primary">
      <div id="footer-logo">
      <a href="#">
        <i class="bi bi-bootstrap-fill footer-logo" style="font-size: 3rem;"></i>
      </div>
      </a>
      <div class="footer-content">
          <div>
              <a href="#">
                  プライバシーポリシー
              </a>
          </div>
          <div>|</div>
          <div>
              <a href="#">
                  利用規約
              </a>        
          </div>
          <div>|</div>
          <div>
              <small>Copyright &copy; 2021 yulikepython</small>
          </div>
      </div>
    </footer>
    <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>

こちらのコードを一部、

  1. nav.html
  2. footer.html
  3. css.html
  4. js.html

に分けて記述し、どこに何を書いたかわかりやすくしていきます

まずは、テンプレート内にそれぞれのファイルを作り下記のとおりコピペしていきます

分割先のファイル

【nav.html】

  <div class="container-fluid">
    <div>
      <a class="navbar-brand" href="#">
          <i class="bi bi-bootstrap-fill" style="font-size: 2rem;"></i>
      </a>
    </div>
    <div class="flex-grow-1" style="max-width:500px;">
      <form class="d-flex" method="GET">
        <input class="form-control me-2" type="search" placeholder="検索..." aria-label="Search" name="search">
        <button class="btn btn-outline-light" type="submit">search</button>
      </form>
    </div>
    <div class="text-light nav-item dropdown">
        <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          ユーザー名
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">アカウント設定</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">ログアウト</a></li>
        </ul>
    </div>
  </div>
</nav>

【footer.html】

<footer class="bg-primary">
  <div id="footer-logo">
    <a href="#">
        <i class="bi bi-bootstrap-fill footer-logo" style="font-size: 3rem;"></i>
    </a>
  </div>
  <div class="footer-content">
      <div>
          <a href="#">
              プライバシーポリシー
         </a>
      </div>
      <div>|</div>
      <div>
          <a href="#">
              利用規約
          </a>        
      </div>
      <div>|</div>
      <div>
          <small>Copyright &copy; 2021 yulikepython</small>
      </div>
  </div>
</footer>

【css.html】

<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
{% load static %}
<link rel="stylesheet" href="{% static 'css/footer.css' %}">

【js.html】

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

分割後のベーステンプレート「includeを使う」

HTMLの分割が完了したら、あとはそのファイルをベーステンプレートで読み込んでいきます

【templates > base.html】

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

ずいぶんとすっきりしました!

まとめ

他のHTMLファイルを読み込むには

{% include “templates以下のパス” %}

を記述します!

ファイルを分割しておくことで、ゆくゆく編集が必要になった時どこを変更すれば良いかの特定容易になります

是非うまく活用しましょう

さて、現状ナビゲーションバー、フッターで使っているロゴはBootstrapのアイコンになっています

【ナビゲーションバー】

【フッター】

このままだとオリジナル感の出にくいサイトになってしまいますので、次回はオリジナルなロゴ(背景透過)を作成する便利ツールのご紹介をしていきます

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

公式LINEも始めました。ブログの更新や最新の業界情報などを随時配信します!

友だち追加

タイトルとURLをコピーしました