Django 入力フォームの見栄え向上
約424日前
2020年9月28日20:49
デジタル
Django CSS
2020/9/28 投稿
先日作ったアプリの入力フォームの見栄えが簡素だった為、改良することにしました。
Django入力フォームの見栄え向上。
Bootstrap CSSの適用。
見栄え向上の手段として「Bootstrap CSS」を使用します。
html上で上記CSSを適用させるところから説明します。
まず簡単に語句を説明します。
「CSS」はhtmlで書かれたウェブページの見た目を良くする道具です。
「●●●.css」というファイルに決められたルールで装飾条件を記載していきます。
htmlの<head></head>内でCSSを読み込ませることで、htmlが装飾されます。
「Bootstrap」は色々な装飾パーツがセットになったCSSのパッケージのようなものです。
誰でも簡単にプロ並（プロの方に失礼ですが）の装飾が可能です。
Bootstrapの適用方法は簡単で、自分でCSSを書いたり、インストールしたりする必要はありません。
html上で下記を記載するだけです。
上記では2020年9月現在で最新安定板のBootstrap4.5が適用されています。
公式サイトを読むとより一層理解が深まると思います。
はじめに - Bootstrap 4.5
適用させる装飾の種類によってはJavaScriptプラグインが必要なので、
公式サイトの説明にならって導入下さい。
本記事内ではJavaScriptは不要です。
Bootstrapを導入したので早速入力フォームを改良しましょう。
Bootstrapの「Forms」ページを見ると、適用方法が書いてあります。
Forms - Bootstrap 4.5
ここで１つ重要なことがあります。
DjangoのフォームにBootstrapを適用させる場合、リンク先の方法だけでは失敗します。
（失敗というよりかは、そもそもCSSが適用されない）
最初、私は下記のようにフォームを書いていました。
※Bootstrapのモーダルも導入している為、上記のようになっています。
上記のコード例ではフォームにCSSが適用されず、簡素なフォームになってしまいます。
![]()
原因はDjango特有の変数の表現方法 {{ field }} にあります。
この形式にはCSSのクラスを適用できない為、上記のようになります。
そこで問題を解決する方法が
「django-widgets-improved」のインストールです。
下記コマンドでインストール可能です。
■仮想環境の場合
■ConoHaサーバー上の場合
ローカルの仮想環境で動作確認する場合は上側のコマンドを実行下さい。
インストールが完了したら、
「settings.py」の「INSTALLED_APPS」に下記を追加します。
次に先ほどの{{ field }}の部分を下記のように書き換えます。
また、htmlファイルの最初に下記一文を追加下さい。
※一番上 or {% load static %}の下
これで入力フォームにBootstrapが適用されます。
![]()
上記では見出し（追加画面）部分に背景色も設定しています。
※下記を追記しただけ
早速CSSが適用されたフォームを確認しましょう！
ローカルの開発環境の場合はサーバー再起動下さい。
ConoHaサーバーの場合も同様にサーバーを再起動下さい。
（再起動しないと500エラーでました。）
無事フォームの見栄えが良くなっていたらOKです。
デジタル
Django CSS
改訂履歴
2020/9/28 投稿
1. 背景
先日作ったアプリの入力フォームの見栄えが簡素だった為、改良することにしました。
2. ゴール
Django入力フォームの見栄え向上。
Bootstrap CSSの適用。
3. はじめに
見栄え向上の手段として「Bootstrap CSS」を使用します。
html上で上記CSSを適用させるところから説明します。
4. 見栄え向上手順
4.1 - Bootstrap CSS
まず簡単に語句を説明します。
「CSS」はhtmlで書かれたウェブページの見た目を良くする道具です。
「●●●.css」というファイルに決められたルールで装飾条件を記載していきます。
htmlの<head></head>内でCSSを読み込ませることで、htmlが装飾されます。
「Bootstrap」は色々な装飾パーツがセットになったCSSのパッケージのようなものです。
誰でも簡単にプロ並（プロの方に失礼ですが）の装飾が可能です。
Bootstrapの適用方法は簡単で、自分でCSSを書いたり、インストールしたりする必要はありません。
html上で下記を記載するだけです。
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
上記では2020年9月現在で最新安定板のBootstrap4.5が適用されています。
公式サイトを読むとより一層理解が深まると思います。
はじめに - Bootstrap 4.5
適用させる装飾の種類によってはJavaScriptプラグインが必要なので、
公式サイトの説明にならって導入下さい。
本記事内ではJavaScriptは不要です。
4.2 - FormとBootstrap
Bootstrapを導入したので早速入力フォームを改良しましょう。
Bootstrapの「Forms」ページを見ると、適用方法が書いてあります。
Forms - Bootstrap 4.5
ここで１つ重要なことがあります。
DjangoのフォームにBootstrapを適用させる場合、リンク先の方法だけでは失敗します。
（失敗というよりかは、そもそもCSSが適用されない）
最初、私は下記のようにフォームを書いていました。
<form method="POST" class="post-form">
{{ stock_form.non_field_errors }}
{% for field in stock_form %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label_tag }}</label>
<br />
{{ field }}
{{ field.errors }}
</div>
{% endfor %}
{% csrf_token %}
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
キャンセル
</button>
<button type="submit" class="save btn btn-primary">追加する</button>
</div>
</form>
※Bootstrapのモーダルも導入している為、上記のようになっています。
上記のコード例ではフォームにCSSが適用されず、簡素なフォームになってしまいます。
原因はDjango特有の変数の表現方法 {{ field }} にあります。
この形式にはCSSのクラスを適用できない為、上記のようになります。
そこで問題を解決する方法が
「django-widgets-improved」のインストールです。
下記コマンドでインストール可能です。
■仮想環境の場合
(myvenv) C:\Users\~> pip install django-widgets-improved #インストールコマンド
■ConoHaサーバー上の場合
[user@ip ~]$ sudo python3.6 -m pip install django-widgets-improved #インストールコマンド
ローカルの仮想環境で動作確認する場合は上側のコマンドを実行下さい。
インストールが完了したら、
「settings.py」の「INSTALLED_APPS」に下記を追加します。
INSTALLED_APPS = [
.
.
.
'widget_tweaks', #←追加
]
次に先ほどの{{ field }}の部分を下記のように書き換えます。
{% render_field field class="form-control" %}また、htmlファイルの最初に下記一文を追加下さい。
※一番上 or {% load static %}の下
{% load widget_tweaks %}これで入力フォームにBootstrapが適用されます。
上記では見出し（追加画面）部分に背景色も設定しています。
※下記を追記しただけ
class="bg-primary text-white"
5. 動作確認
早速CSSが適用されたフォームを確認しましょう！
ローカルの開発環境の場合はサーバー再起動下さい。
ConoHaサーバーの場合も同様にサーバーを再起動下さい。
（再起動しないと500エラーでました。）
無事フォームの見栄えが良くなっていたらOKです。
添付ファイル
関連記事
Djangoでコメント機能を作る
Django備忘録 今回はコメント機能の実装方法を記します。 ①Commen...
投稿日時 2021年4月17日9:57
Djangoの日付フォームをカレンダーで入力
DateTimeフィールドのフォームを入力する際にカレンダーで選択できる機能を実...
投稿日時 2021年4月28日18:14
Django フォームのバリデーションルール作り
フォームのバリデーションとは、フォームの入力内容に一定のルールを設け、ルールを満...
投稿日時 2021年5月10日23:40
Django formsetの絞り込みと同時編集
Djangoの機能「formset」を使い、登録済みのモデルを複数表示して同時に...
投稿日時 2021年7月14日21:26