Djangoメモ:DjangoデフォルトのフォームにCSSを適用する方法 – Pycharm

Djangoデフォルトのフォームは見た目がよくないのでCSSでカスタマイズしたい人向けです。今回はPycharmでの操作です。まず、Pycharm画面上から次の通りアクセスします。

File > Settings > Project hogehoge > Project Interpreter > 右上にある+ボタン > 検索ボックスにdjango-widget-tweaksを入力 > Install packagesをクリックで完了

Formのコードを書くファイルに(templatesのhtmlファイル等)、以下を追記

{% load widget_tweaks %}

Djangoのテンプレートタグのform上で、次のように追記:
例 bootstrapのCSS: form-controlを適用する場合(尚、ここではbootstrapの実装は割愛)

{{form.hogehoge|add_class:"form-control"}}
  • URLをコピーしました!

Writer

TIERは、Global、DX、HRの3軸により 大手企業から中小企業、民間企業から行政まで、海外展開に必要なサービスをワンストップで支援しております。海外マーケティングセールスからデジタルマーケティング、多言語サイトや越境ECサイト制作等の海外向けクリエイティブ制作、グローバル人材採用支援まで幅広く対応しております。お気軽にお問い合わせください。

目次