Q&A
プログラミング初心者で現在DJANGOでWebアプリを開発しています。
業務でなくプライベートで勉強しており、質問できる知り合いがおらずここで皆さんのご知見をお借りできればと思います。
●質問背景
テンプレート(HTMLファイル)に埋め込んだフォーム(ex:{{ form.usermname}})をCSSでデザインしたく「Django-widgets-improved」でadd_classしcssファイルで装飾(paddingとbackground-color)しようとしていますが、paddingは反映されているもののbackground-colorは反映されていません。
※フォームに対し文字を入力する等操作をすると反映されます。
初期状態から反映させたいのですが、なぜ上記のような動きになるのでしょうか。
●参考にした情報
・https://pypi.org/project/django-widgets-improved/
(django-widgets-improved 1.5.0 )
・https://wonderwall.hatenablog.com/entry/2018/03/18/210000
(Djangoメモ(18) : django-widget-tweaksを使用してBootstrapのフォームを作成する )
●基本情報
・OS:Windows 10
・python:3.6.5
・Django:2.0.2
・仮想環境:venv
●行ったこと
①下記コマンドで「Django-widgets-improved」をインストール
pip install django-widgets-improved
②setting.pyのINSTALLED_APPSに「'widget_tweaks'」を追加
setting
1INSTALLED_APPS = [ 2 'django.contrib.admin', 3 'django.contrib.auth', 4 'django.contrib.contenttypes', 5 'django.contrib.sessions', 6 'django.contrib.messages', 7 'django.contrib.staticfiles', 8 'widget_tweaks', **←追加** 9 ~ 10]
③base.htmlに{% load widget_tweaks %}を追加
base
1{% load static %} 2{% load widget_tweaks %} **←追加** 3<!DOCTYPE html> 4<html> 5~
④テンプレートファイルのフォームにadd_class
HTML
1{% csrf_token %} 2<p>ユーザー名</p> 3{{ form.username|add_class:"form-field"}} **←add_classを追加** 4<br> 5~
⑤CSSファイルにadd_classしたクラスの装飾内容を記述
CSS
1.form-field { 2 background-color: red; 3 padding: 200px; 4}
⑥ブラウザで確認しCSSファイルの内容が反映されていないことを確認
上記、情報が不足していましたらご指摘下さい。
お力をお借りできますと幸いです。宜しくお願い致します。
回答1件
0
padding だけ反映されて background-color が反映されないのであれば、以下のパターンのいずれかではないでしょうか。
- a) CSS 上の別のスタイル指定で
background-colorが上書きされている - b) 対象の要素が
background-colorに対応していない - c)
background-colorを追加したときの css が反映されていない（ブラウザキャッシュ等が原因）
input 関連の要素に関して b) のようなことが起こることは考えづらいので、可能性が高いのは a) や c) （あるいは他の原因）かと思います。
上記、情報が不足していましたらご指摘下さい。
form.username に対応する form クラスの定義と関連する model の定義、それと、実際に生成された html と css （＝ブラウザが受け取った html と css ）をご提示されると、有意義な回答がもらえやすくなると思います。
投稿2019/03/02 09:42
総合スコア1407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。