6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Djangoでテンプレートを継承したらCSSが上手く適用出来なかった場合の対処法

Last updated at Posted at 2019-04-30

Djangoではテンプレートを継承することで共通部分を複数回記述することを避けられるという話を聞いたので、
早速Qiitaの記事を参考に下記のコードを書いてみた。

base.html
{% load static %}
<html>
    <head>
      {% block extra_head %}{% endblock %}
        <title>hoge</title>
    </head>
    <body>
      {%block content%}
      {{content}}
      {%endblock%}
    </body>
</html>

extend.html
{% extends 'homepage/base.html' %}
{% block extra_head %}
  <link rel="stylesheet" href="{% static 'css/extend.css'%}">
{% endblock %}
{% block content %}
<h1>Hello,World!</h1>
{% endblock %}

このように書けばbase.htmlを継承したextend.htmlが表示されると思っていたのだが、実際にはTemplateSyntaxErrorが出てしまった。
base.htmlではなくextend.htmlの方でcssを適用しようとしたのだが、どうもそこが上手く行っていないらしい。
その後初心者ながら適当にいじりまわしたところ、なんとか解決法を見つけることが出来た。

extend.html
{% extends 'homepage/base.html' %}
{% load static %}
{% block extra_head %}
  <link rel="stylesheet" href="{% static 'css/extend.css'%}">
{% endblock %}
{% block content %}
<h1>Hello,World!</h1>
{% endblock %}

このようにextend.htmlの2行目に{% load static %}を入れることでエラーを吐かれることなくCSSを適用することが出来た。
どうやらbase.htmlの方に{% load static %}を入れたからといって、extend.htmlの方に入れなくて良いということではなかったらしい。

恐らくほとんどの人は知っていることだとは思うが、俺のような初心者がこの記事を読んで問題を解決出来たら幸いだ。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?