Django-formsでフォームにCSSスタイルを適用する
2024-07-27
DjangoでCSSを使用する方法
静的ファイルを使用する
Djangoでは、staticfiles ディレクトリに保存された静的ファイル (CSS、JavaScript、画像など) を配信することができます。
手順
- プロジェクトディレクトリに
staticfilesディレクトリを作成します。 staticfilesディレクトリ内に、CSSファイルを保存します。- Djangoの設定ファイル (
settings.py) に、以下の設定を追加します。
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'staticfiles'),
]
- テンプレートファイルで、
{% load static %}タグを使用して、CSSファイルをロードします。
{% load static %}
<link rel="stylesheet" href="{% static 'style.css' %}">
インラインスタイルを使用する
テンプレートファイル内に直接CSSコードを記述することができます。
- テンプレートファイルで、
style属性を使用して、CSSコードを記述します。
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p style="color: red;">This text is red.</p>
</body>
</html>
Django-formsを使用する
django-forms ライブラリを使用すると、フォームにCSSスタイルを簡単に適用することができます。
- プロジェクトに
django-formsライブラリをインストールします。
pip install django-forms
- フォームクラスで、
widget属性を使用して、CSSクラスを指定します。
from django.forms import ModelForm
class MyForm(ModelForm):
class Meta:
model = MyModel
fields = ['name', 'email']
widgets = {
'name': forms.TextInput(attrs={'class': 'form-control'}),
'email': forms.EmailInput(attrs={'class': 'form-control'}),
}
3. テンプレートファイルで、フォームをレンダリングします。
{% load crispy_forms_tags %}
<form action="{% url 'my_view' %}" method="post">
{% csrf_token %}
{{ form|crispy }}
<button type="submit">Submit</button>
</form>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
<h1>Hello, World!</h1>
<p>This text is normal.</p>
<p class="important">This text is important.</p>
</body>
</html>
/* style.css */
body {
font-family: sans-serif;
}
h1 {
color: blue;
}
.important {
color: red;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p style="color: red;">This text is red.</p>
</body>
</html>
from django.forms import ModelForm
class MyForm(ModelForm):
class Meta:
model = MyModel
fields = ['name', 'email']
widgets = {
'name': forms.TextInput(attrs={'class': 'form-control'}),
'email': forms.EmailInput(attrs={'class': 'form-control'}),
}
{% load crispy_forms_tags %}
<form action="{% url 'my_view' %}" method="post">
{% csrf_token %}
{{ form|crispy }}
<button type="submit">Submit</button>
</form>
- Django-formsを使用する場合は、
crispy-formsなどのライブラリを使用すると、より簡単にフォームにCSSスタイルを適用することができます。 - 上記のコードはあくまでサンプルです。実際のコードは、プロジェクトの要件に合わせて変更する必要があります。
Sass/SCSSは、CSSをより効率的に記述するための言語です。Djangoには、Sass/SCSSをコンパイルしてCSSファイルに生成するためのツールがいくつかあります。
CSSフレームワークを使用する
BootstrapやMaterializeなどのCSSフレームワークを使用すると、共通のスタイルを簡単に適用することができます。
css django django-forms
