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

Django

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

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

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

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

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

  • 一覧ページ
  • 詳細ページ

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

ビフォーアフター

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

【ListView】

ビフォー

Bootstrap適用前のListView

アフター

Bootstrap適用後のListView

Bootstrapのカードを使い、タイトル、内容、他ページへのリンクを貼るように設定しました

追加した機能は下記のとおりです

  • +ボタンでクリエイトビューへ
  • タイトルをクリックするとディテールビューへ
  • 編集をクリックするとアップデートビューへ
  • 削除をクリックするとデリートビューへ

【DetailView】

ビフォー

Bootstarp適用前のディテールビュー

アフター

Bootstrap適用後のディテールビュー

追加した機能は下記のとおりです

  • 編集をクリックするとアップデートビューへ
  • 削除をクリックするとデリートビューへ

【実例コード】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ファイルなどを使用することなく見た目を整えることができます

「もっと知りたい!」という方は、公式ドキュメントにて詳しくご覧いただくことをオススメします

はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

次回は、一覧ページ、詳細ページにつづきk、フォームを扱う「新規登録ページ」「編集ページ」のUIを整えていきます

当記事のHTMLテンプレートを変更した方法とは全く違う方法でのアプローチになりますので、是非ご覧ください!

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

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

という方は必見です!

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

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

友だち追加

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