【CSS不要！】Django リストビュー｜ディテールビューの見た目を整える【Bootstrap】

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

「一覧ページ、詳細ページの見た目を整えたい！」

「でも、そんなに時間をかけるのは嫌だ！」

というDjango初学者の方へ向けて朗報です

当記事を通じて、人気のフロントエンドライブラリ「Bootstrap」を使って、

一覧ページ
詳細ページ

の見た目を短時間で整えていく方法を実際のコードと共にご紹介していきます

当記事はアプリ開発～公開までをご紹介しているシリーズの一記事になります

最終的には、下記リンク先のような日報アプリを開発、公開できるように進めていきます

https://nippo.itc-app.site/

ようこそ！簡易日報アプリ「D-Repo」へ！こちらは無料で使える日報アプリのデモサイトになります！「Webアプリはとてもカンタンで便利！」を感じてみよう！

興味のある方は下記よりシリーズをまとめたページへお進みください

【Django】チュートリアル｜日報アプリの開発から公開まで

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

ビフォーアフター
【実例コード】ListView
【実例コード】DetailView
まとめ

ビフォーアフター

まずはそれぞれのページがどんなふうに変わったかをご覧ください

【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 %}