【Django】<header>、<footer>タグ内ではCSSが適用できているにも関わらず、<body>タグ内にCSSが適用できない

初学者で必須情報に過不足があるかもしれませんが、下記問題についてご教示頂けますと幸いです。

＜解決したい問題＞
【概要】
DjangoでWebアプリケーションを開発（ユーザー登録フォームを作成中）。
HTMLにCSSを適用したいが、反映がされない。
【詳細】
▼<body>タグ内に「Uえるとともに、新しい一歩を踏み出しましょう」という文章を挿入しているが、CSSが適用されない

＜お伺いしたいこと＞
上記におけるCSSの適用方法

＜現状の理解＞
①HTMLファイルにおける{% load static %}の記述が必要
→記述済み
② <head>タグ内に、<link rel="stylesheet" href="{% static 'CSSファイル名' %}">の記述が必要
→記述済み
③今回はbase.htmlを継承しているため、念のため<body class="content">でセレクタを指定
→CSSファイルにおけるセレクタ名の記述方法もおそらく間違いなし

＜不明点＞
上記三点のどこかに誤認がある、base.htmlの継承によるCSSの運用方法の誤り、 {% block content %}{% endblock content %}の使用におけるCSSの適用方法の誤り、のどの部分に原因が分からずご教示頂けますと幸いでございます。

＜ソースコード＞
signup_2.html（当該HTMLファイル）

signup_2.html
1{% extends 'base.html' %}
2{% load static %}
3
4<html>
5  <head>
6    <title>template test</title>
7    <link rel="stylesheet" href="{% static 'signup_2.css' %}">
8  </head>
9
10  <header>
11    {% block header %}
12      完了
13    {% endblock header %}
14    {% block header2 %}
15      アカウントの作成が完了しました！
16    {% endblock header2 %}
17  </header>
18
19  <body class="content">
20    {% block content %}
21      Uえるとともに、新しい一歩を踏み出しましょう
22    {% endblock content %}
23  </body>
24
25  <footer>
26    {% block footer %}
27      <a href="signup_3", style="text-decoration:none;">始める</a>
28    {% endblock footer %}
29  </footer>
30
31</html>
32

signup_2.css（当該CSSファイル）

signup_2.css
1body.content {
2    color: red;
3}

base.html（継承元テンプレート）

base.html
1{% load static%}
2<!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <meta charset="UTF-8">
6        <title>汎用ビュー</title>
7        <link rel="stylesheet" href="{% static 'base.css' %}">
8    </head>
9
10
11    <header>
12        <h2>
13            {% block header %}
14            {% endblock header %}
15        </h2>
16        <p>
17            {% block header2 %}
18            {% endblock header2 %}
19        </p>
20    </header>
21
22    <body>
23        {% block content %}
24        {% endblock content %}
25    </body>
26
27    <footer>
28        {% block footer %}
29        {% endblock footer %}
30    </footer>
31
32</html>

base.css（継承元テンプレートのCSS）

base.css
1header {
2    text-align: center;
3    color: #777777;
4    margin-top: 100px;
5    margin-bottom: 600px;
6}
7
8footer {
9    margin: 0 auto;
10    border: 3px solid #38B6FF;
11    border-radius: 10px;
12    background-color: white;
13    text-align: center;
14    font-weight: 900;
15    line-height: 4;
16    width: 400px;
17    color: #38B6FF;
18}
19
20a:link,
21a:visited,
22a:active {
23    display: block;
24    color: #38B6FF;
25}
26
27a:hover {
28    display: block;
29    color: white;
30    background-color: #38B6FF;
31}

行動規範の内容に同意します

回答1件

ベストアンサー

signup_2.htmlはbase.htmlの内容を引き継ぎますので、<html>タグや<head>タグ、<body>タグは必要なく、base.htmlの<block content>で囲まれたところのみ記述すれば大丈夫です。
また、CSSを適用する箇所にclassを設定します。

signup_2.html
1{% extends 'base.html' %}
2
3<header>
4  {% block header %}
5    完了
6  {% endblock header %}
7  {% block header2 %}
8    アカウントの作成が完了しました！
9  {% endblock header2 %}
10</header>
11
12{% block content %}
13  <p class="content">Uえるとともに、新しい一歩を踏み出しましょう</p>
14{% endblock content %}
15
16
17<footer>
18  {% block footer %}
19    <a href="signup_3" , style="text-decoration:none;">始める</a>
20  {% endblock footer %}
21</footer>
22
23</html>

そして、元となるbase.htmlからsignup_2.cssを読み込みます。

base.html
1  <link rel="stylesheet" href="{% static 'base.css' %}"/>
2  <link rel="stylesheet" href="{% static 'signup_2.css' %}">  <!--  追記-->

また、signup_2.cssはbody.はいらないので削除します。

signup_2.css
1.content {
2    color: red;
3}

こちらで意図した動作になりませんでしょうか？

投稿2022/06/28 01:59

harakazu

総合スコア150

kakeru0225

2022/06/28 04:26

ご回答頂きありがとうございます！ご教示頂いた方法で無事動作しました。 signup_2.cssをbase.htmlに継承するという考えがなく、大変勉強になりました。前回に引き続き有難うございましたmm

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

【Django】<header>、<footer>タグ内ではCSSが適用できているにも関わらず、<body>タグ内にCSSが適用できない

関連した質問