Django

Django 簡単なアプリを作って基礎を覚える⑥ Bootstarpを使って見た目を整える

今回は、見た目をよくしていきたいと思います。

Bootstarpを使って見た目を整える

見た目を整える方法として、htmlとcssがセットになったようなイメージである、Bootstrapを利用します。

公式サイトはこちらになります。https://getbootstrap.jp/

毎回、htmlファイルを作るたびにコピーしてくるのは、大変なので、ベースとなるhtmlファイルを作り、新しく作るhtmlファイルは、それを読み込みするようにします。

base.html ファイルを作成する

templatesフォルダの中に、base.htmlファイルを作成します。

Bootstrapのドキュメントをクリックして、明細部の少し下にスターターテンプレートの内容をコピーします。

コピーした内容をbase.htmlファイルに貼り付けします。

一部修正をしますので、コピーして貼り付けしてください。

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

    <!-- Bootstrap CSS -->
    <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 %}
    </title>
  </head>
  <body>
    {% block header %}
    {% endblock header %}

    {% block content %}
    {% endblock content %}

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

htmlの言語を日本語に変更し、{ % %}は、このテンプレートを読み込んだときに、読込先で文章を差し込みするときに使います。

今は、わらかなくても先に進めばわかるので、ふーん、程度で進んでください。

次は、list.htmlがこのテンプレートを読み込んで使えるようにしましょう❕

base.html を読み込みしつかう

templatesフォルダにある、list.htmlファイルをあけましょう。

そして、先ほど作ったbase.htmlを読み込みするようにします。

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
{% for task in object_list %}
    <p><a href="{% url 'task:detail' task.pk %}">{{ task.title }}</a>{{ task.user }}</p>
{% endfor %}
{% endblock content %}

これで、読込すると今までと同じように読み込みされると思います。

では、今から見た目を整えましょう❕

Bootstrapのページから先ほどのドキュメントの中にあるContentにあるTableを選択します。

今回は、一番上のデザインで今回は作っていこうと思います。

これをlist.htmlに貼り付けて編集します。

{% block content %}
    <table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">タイトル</th>
        <th scope="col">担当者</th>
        </tr>
    </thead>
    <tbody>
    {% for task in object_list %}
        <tr>
        <th scope="row"><a href="{% url 'task:detail' task.pk %}">{{task.pk}}</th>
        <td>{{task.title}}</td>
        <td>{{task.user}}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endblock content %}

これは、表形式での表示になります。

thead = タイトルになります

tbody = レコードを表示する部分になります

これで一度、ブラウザで表示させてみましょう❕

いい感じになりましたねー😃

さらにリンクが数字ですが、ボタンに変更しようと思います❕

Componentsの中にButtons があるので、その中で今回は、一番infoを使ってみようと思います。

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
    <table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">タイトル</th>
        <th scope="col">担当者</th>
        </tr>
    </thead>
    <tbody>
    {% for task in object_list %}
        <tr>
        <th scope="row"><a href="{% url 'task:detail' task.pk %}" button type="button" class="btn btn-info">詳細</button></th> <!--変更-->
        <td>{{task.title}}</td>
        <td>{{task.user}}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endblock content %}

これだけで、ボタンを作ってくれます。再読み込みしてみましょう❕

やりました😁Bootstrapは、cssがわかっていなくても、簡単に実装できる便利なものです。

詳細画面も見た目もBootstrapでととのえよう

詳細画面も見た目を整えてみましょう。

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
<table class="table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">タイトル</th>
      <th scope="col">内容</th>
      <th scope="col">開始予定日</th>
      <th scope="col">終了予定日</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">内容</th>
      <td>{{ object.title }}</td>
      <td>{{ object.memo }}</td>
      <td>{{ object.plants_startdate }}</td>
      <td>{{ object.plants_enddate }}</td>
    </tr>
  </tbody>
</table>
{% endblock content %}

詳細画面から一覧に戻るためのボタンを追加しましょう

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
<table class="table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">タイトル</th>
      <th scope="col">内容</th>
      <th scope="col">開始予定日</th>
      <th scope="col">終了予定日</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">内容</th>
      <td>{{ object.title }}</td>
      <td>{{ object.memo }}</td>
      <td>{{ object.plants_startdate }}</td>
      <td>{{ object.plants_enddate }}</td>
    </tr>
  </tbody>
</table>

<a href="{% url 'task:list' %}" button type="button" class="btn btn-secondary">戻る</button> #追加
{% endblock content %}

ポイント

  • 見た目はBootstrapを使って整えよう!
  • ベースとなるテンプレートを作成し、ページを作るごとにそのファイルを読み込んで流用しましょう
Django-createview
Django 簡単なアプリを作って基礎を覚える⑦ CreateViewを作る

次は、登録する画面を作っていきましょう❕ もくじ1 CreateVeiwで登録画面を作成1.1 views.py 登録を追加1.2 create.htmlを作成1.3 create htmlを作成しよ ...

続きを見る

-Django

© 2021 ごろう@縁紡ぐ