(最終更新月:2021年12月)
「一覧ページ、詳細ページの見た目を整えたい!」
「でも、そんなに時間をかけるのは嫌だ!」
というDjango初学者の方へ向けて朗報です
当記事を通じて、人気のフロントエンドライブラリ「Bootstrap」を使って、
- 一覧ページ
- 詳細ページ
の見た目を短時間で整えていく方法を実際のコードと共にご紹介していきます
当記事はアプリ開発~公開までをご紹介しているシリーズの一記事になります
最終的には、下記リンク先のような日報アプリを開発、公開できるように進めていきます
興味のある方は下記よりシリーズをまとめたページへお進みください

ビフォーアフター
まずはそれぞれのページがどんなふうに変わったかをご覧ください
【ListView】
ビフォー

アフター

Bootstrapのカードを使い、タイトル、内容、他ページへのリンクを貼るように設定しました
追加した機能は下記のとおりです
- +ボタンでクリエイトビューへ
- タイトルをクリックするとディテールビューへ
- 編集をクリックするとアップデートビューへ
- 削除をクリックするとデリートビューへ
【DetailView】
ビフォー

アフター

追加した機能は下記のとおりです
- 編集をクリックするとアップデートビューへ
- 削除をクリックするとデリートビューへ
【実例コード】ListView
{% extends "base.html" %}
{% block head_title %}日報アプリ一覧{% endblock %}
{% block content %}
<div class="container">
<div class="mt-3 d-flex justify-content-end">
<a href={% url "nippo-create" %} class="btn btn-outline-primary float-right">
<i class="bi bi-plus"></i>
</a>
</div>
{% for obj in object_list %}
<div class="card my-3">
<div class="card-body">
<h5 class="card-title">
<a href={% url 'nippo-detail' obj.pk %}>
{{ obj.title}}
</a>
</h5>
<p class="card-text">
{{ obj.content }}
</p>
<a href={% url 'nippo-update' obj.pk %} class="card-link">
編集
</a>
<a href={% url 'nippo-delete' obj.pk %} class="card-link">
削除
</a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
詳細ページや編集ページへのリンクには、「pk」を渡す必要があります
href={% url ‘ページ名’ 渡したい「pk」 %}
を覚えておきましょう!
【実例コード】DetailView
{% extends 'base.html' %}
{% block head_title %}{{ object.title }}の詳細{% endblock %}
{% block content %}
<div class="container">
<div class="card mx-auto my-5 w-50" style="min-width:300px;">
<div class="card-header">
{{ object.timestamp }}
</div>
<div class="card-body">
<h3 class="card-title">{{ object.title }} </h3>
<p class="card-text">{{ object.content }}</p>
<div class="w-50">
<a href={% url 'nippo-update' object.pk %} class="btn btn-primary btn-sm">編集</a>
<a href={% url 'nippo-delete' object.pk %} class="btn btn-danger btn-sm">削除</a>
</div>
</div>
</div>
</div>
{% endblock %}
まとめ
Bootstrapを使うとCSSファイルなどを使用することなく見た目を整えることができます
「もっと知りたい!」という方は、公式ドキュメントにて詳しくご覧いただくことをオススメします

次回は、一覧ページ、詳細ページにつづきk、フォームを扱う「新規登録ページ」「編集ページ」のUIを整えていきます
当記事のHTMLテンプレートを変更した方法とは全く違う方法でのアプローチになりますので、是非ご覧ください!
当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています
「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」
という方は必見です!
