webアプリ制作中にhtmlにcssが読み込まれず、表示できない問題

前提・実現したいこと

pythonのdjangoを使い、webアプリを制作しています。
htmlとcssを用意して、いざ表示するとなったらエラーが起きてしまいます。

発生している問題・エラーメッセージ

TemplateSyntaxError
'"static/css/main.css"' is not a registered tag library. Must be one of: admin_list admin_modify admin_static admin_urls cache i18n l10n log static staticfiles tz

該当のソースコード

python
111	<head>
212	    <meta charset="utf-8">
313	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
414	    <title>Home</title>
515	    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
616	    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
717	    <link rel="stylesheet" type=text/css href=" {% load static "static/css/main.css" %}">
818	    <link rel="stylesheet" type=text/css href=" {% load static "static/css/skin.css" %}">

settings.pyのstaticの部分にコードを追加したり,


STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'
VENV_PATH = os.path.dirname(BASE_DIR)
STATIC_ROOT = os.path.join(VENV_PATH, 'static_root')

staticの前にloadを加えたりしましたが、うまくいきません。

pythonに詳しい方、ご教授をお願いします。

m.ts10806

2020/11/06 04:36

Django知らないのでエラーとドキュメント読んだ感じ https://docs.djangoproject.com/ja/3.1/intro/tutorial06/ そこに文字列指定したいときにダブルクォートじゃなくシングルクォートなんじゃないかと。

Lhankor_Mhy

2020/11/06 05:21

Django はあまりくわしくないのですが、static/css/main.css の static/ って必要なんでしたっけ？

Ryuunosuke

2020/11/06 08:35

お忙しいところ、ありがとうございます。細かい部分を直したり加えたりした結果、繋がりました。とても助かります。

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

回答2件

そもそもがload staticの使い方が間違っていること
staticファイルの呼び出し方
ダブルクォーテーションとシングルクォーテーションの使い分け

この辺に問題があるかなというところです

html
1<!-- 1,2行目最初の記述 -->
2{% extends 'base.html' %}<!-- templateの呼び出し -->
3{% load static %}
4
5<!-- 間違い -->
6<link rel="stylesheet" type=text/css href=" {% load static "static/css/main.css" %}">
7<!-- 正しい -->
8<link rel="stylesheet" type=text/css href="{% static 'css/main.css' %}">

という感じで指定する必要があります
{% static 'static/css/main.css' %}にすると、

static/
└── static/
    ├── js/
    └── css/
        └── main.css

というファイル構成にする必要がありますのでご注意ください
{% static 'css/main.css' %}にすると、

static/
├── js/
└── css/
    └── main.css

多分ドキュメント読めば全部載ってる気がしますのでゼロから振り返るといいと思われます

投稿2020/11/06 05:26

sk-sora--ypi

総合スコア528

Ryuunosuke

2020/11/06 08:36

回答ありがとうございます！補足までしていただき、とても勉強になります。ありがとうございます！

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

自己解決

htmlの欄にload staticfailsをついかしましたら繋がりました！

python
1{% load staticfiles %}
2
3<!DOCTYPE html>
4<html>
5
6<head>
7    <meta charset="utf-8">
8    <meta http-equiv="X-UA-Compatible" content="IE=edge">
9    <title>Home</title>
10    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
11    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
12    <link rel="stylesheet" type=text/css href="{% static 'css/main.css' %}">
13    <link rel="stylesheet" type=text/css href="{% static 'css/skin.css' %}">
14    
15