More than 3 years have passed since last update.

Djangoの入力フォームにCSSを適用する方法

Last updated at 2021-01-10Posted at 2019-08-29

はじめに

Djangoのtemplateで入力フォームを

{{ form.username }}

のように作る時、入力フォームにCSSを適用する方法が分からず、調べてみたのでまとめておきます。

例えば、ユーザー登録をするフォームを作るために、views.pyでUserCreationFormをformという名前でtemplateに渡してフォームの画面を作るとします。
usernameを記入する欄を

{{ form.username }}

のように作ると、class名をつけることができず、CSSを適用することができません。

CSSを適用するための方法を解説します。
まず、仮想環境で

$ pip install django-widgets-improved

というコマンドを実行します。

次に、プロジェクトのsettings.pyで

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

のように追加します。

そして、templateの最初の方に以下を追加します。

{% load widget_tweaks %}

そしたら、

{{ form.username|add_class:'class-name' }}

のように書くことでclass名を設定できます。
あとはCSSで自由に装飾してください。