Django 入力フォームの見栄え向上
約596日前
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
ここで1つ重要なことがあります。
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
ここで1つ重要なことがあります。
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です。