🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1561閲覧

Django cssがbase.html以外読み込まれない

inori10

総合スコア17

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/18 05:06

編集2019/12/18 05:59

djangoでwebアプリ作っているのですが、base.html以外のhtmlファイルにcss読み込まれないです。base.htmlは読み込まれています。ファイル構成は以下の通りです。

├── accounts │ ├── __init__.py │ ├── __pycache__ │ │ ├── __init__.cpython-37.pyc │ │ ├── admin.cpython-37.pyc │ │ ├── apps.cpython-37.pyc │ │ ├── forms.cpython-37.pyc │ │ ├── models.cpython-37.pyc │ │ ├── urls.cpython-37.pyc │ │ └── views.cpython-37.pyc │ ├── admin.py │ ├── apps.py │ ├── forms.py │ ├── migrations │ │ ├── 0001_initial.py │ │ ├── 0002_auto_20191213_2045.py │ │ ├── 0003_auto_20191214_1619.py │ │ ├── 0004_profile_gender.py │ │ ├── 0005_auto_20191215_1143.py │ │ ├── 0006_profile_user.py │ │ ├── __init__.py │ │ └── __pycache__ │ │ ├── 0001_initial.cpython-37.pyc │ │ ├── 0002_auto_20191213_2045.cpython-37.pyc │ │ ├── 0003_auto_20191214_1619.cpython-37.pyc │ │ ├── 0004_profile_gender.cpython-37.pyc │ │ ├── 0005_auto_20191215_1143.cpython-37.pyc │ │ ├── 0006_profile_user.cpython-37.pyc │ │ └── __init__.cpython-37.pyc │ ├── models.py │ ├── tests.py │ ├── urls.py │ └── views.py ├── db.sqlite3 ├── example │ ├── __init__.py │ ├── __pycache__ │ │ ├── __init__.cpython-37.pyc │ │ ├── settings.cpython-37.pyc │ │ ├── urls.cpython-37.pyc │ │ └── wsgi.cpython-37.pyc │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py └── sample ├── __init__.py ├── __pycache__ │ ├── __init__.cpython-37.pyc │ ├── admin.cpython-37.pyc │ ├── forms.cpython-37.pyc │ ├── models.cpython-37.pyc │ ├── urls.cpython-37.pyc │ └── views.cpython-37.pyc ├── admin.py ├── apps.py ├── forms.py ├── migrations │ ├── 0001_initial.py │ ├── 0002_friend.py │ ├── 0003_friend_list.py │ ├── 0004_auto_20191218_1016.py │ ├── __init__.py │ └── __pycache__ │ ├── 0001_initial.cpython-37.pyc │ ├── 0002_friend.cpython-37.pyc │ ├── 0003_friend_list.cpython-37.pyc │ ├── 0004_auto_20191218_1016.cpython-37.pyc │ └── __init__.cpython-37.pyc ├── models.py ├── static │ └── css │ └── ShareFile.css ├── templates │ ├── base.html │ ├── registration │ │ └── login.html │ └── sample │ ├── afterlogin.html │ ├── change_profile.html │ ├── file_share.html │ ├── friend_allow.html │ ├── friend_list.html │ ├── friend_register.html │ ├── friend_register_complete.html │ ├── ho.html │ ├── home.html │ ├── mypage.html │ ├── signup.html │ └── upload.html ├── tests.py ├── uploads ├── urls.py └── views.py

base.html

html

1{% load static %} 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta harset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 6 <title>ShareFile</title> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 9 <link rel="stylesheet" href="{% static 'css/ShareFile.css' %}"> 10 </head> 11 <body> 12 <div class='header'> 13 <h4 class='title'>ShareFile</h4> 14 </div> 15 <div class="cp_cont"> 16 <div class="cp_offcm01"> 17 <input type="checkbox" id="cp_toggle01"> 18 <label for="cp_toggle01"><span></span></label> 19 <div class="cp_menu"> 20 <ul> 21 {% if user.is_authenticated %} 22 <li><a href="{% url 'sample:friend_allow' username=user.username %}" class="friend_allow">フレンドリクエスト</a></li> 23 <li><a href="{% url 'sample:mypage' %}" class="home">Home</a></li> 24 <li><a href="{% url 'logout' %}" class="logout">Logout</a></li> 25 {% else %} 26 <li><a href="{% url 'login' %}" class="login">Login</a></li> 27 <li><a href='{% url 'sign:signup' %}'>SignUp</a></li> 28 {% endif %} 29 </ul> 30 </div> 31 </div> 32 <div class="cp_contents"> 33 {% block content %} 34 {% endblock %} 35 </div> 36 </div> 37 </div> 38 </body> 39</html> 40

upload.html

html

1{% extends 'base.html' %} 2 3{% block content %} 4<h4 class='sss'>アップロード</h4> 5 <form method="POST" enctype="multipart/form-data"> 6 {% csrf_token %} 7 <div class='file_form'> 8 <p>ファイル</p> 9 {{ form.file_models }} 10 </div class> 11 <div class="form-group"> 12 <button type="submit">アップロード</button> 13 </div> 14 </form> 15<hr> 16<h4>ダウンロード</h4> 17 {% if file_list %} 18 {% for file in file_list %} 19 <a href="{% url 'sample:download' username=user.username filename=file %}">{{ file }}</a> 20 <hr> 21 {% endfor %} 22 {% endif %} 23{% endblock %}

ShareFile.css
具体的な場所は一番下の.sssのところです

css

1.header { 2 background-color: gray; 3 margin: 10px; 4 height: 50px; 5} 6.title { 7 color: white; 8 font-size: 45px; 9 text-align: center; 10} 11*, *:before, *:after { 12 padding: 0; 13 margin: 0; 14 box-sizing: border-box; 15} 16ol, ul { 17 list-style: none; 18} 19a { 20 text-decoration: none; 21 color: inherit; 22} 23.cp_cont { 24 height: 65vh; 25} 26.cp_offcm01 { 27 position: absolute; 28 top: 20px; 29 right: 20px; 30 display: inline-block; 31} 32/* menu */ 33.cp_offcm01 .cp_menu { 34 position: fixed; 35 top: 0; 36 right: -100vw; 37 width: 250px; 38 height: 100%; 39 cursor: pointer; 40 -webkit-transition: 0.53s transform; 41 transition: 0.53s transform; 42 -webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99); 43 transition-timing-function: cubic-bezier(.38,.52,.23,.99); 44 background-color: #607D8B; 45 opacity: 0.8; 46} 47.cp_offcm01 .cp_menu ul { 48 margin: 0; 49 padding: 0; 50} 51.cp_offcm01 .cp_menu li { 52 list-style: none; 53} 54.cp_offcm01 .cp_menu li a { 55 display: block; 56 padding: 20px; 57 text-decoration: none; 58 color: #ffffff; 59 border-bottom: 1px solid #ffffff; 60} 61 62.cp_offcm01 #cp_toggle01 { 63 position: absolute; 64 display: none; 65 opacity: 0; 66} 67.cp_offcm01 #cp_toggle01:checked ~ .cp_menu { 68 -webkit-transform: translateX(-100vw); 69 transform: translateX(-100vw); 70} 71/* menu toggle */ 72.cp_offcm01 #cp_toggle01 ~ label { 73 display: block; 74 padding: 0.5em; 75 cursor: pointer; 76 -webkit-transition: 0.5s transform; 77 transition: 0.5s transform; 78 -webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); 79 transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); 80 text-align: center; 81 color: #333333; 82} 83.cp_offcm01 #cp_toggle01:checked ~ label { 84 -webkit-transform: translateX(-250px); 85 transform: translateX(-250px); 86} 87.cp_offcm01 #cp_toggle01 ~ label::before { 88 font-family: 'FontAwesome'; 89 content: 'MENU'; 90 font-size: 1em 91} 92.cp_offcm01 #cp_toggle01:checked ~ label::before { 93 content: 'MENU'; 94} 95/* contents */ 96.cp_contents { 97 color: #333333; 98 text-align: center; 99} 100.sss { 101 size: 10px; 102 color: red; 103}

setting.py

python

1import os 2 3BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 4 5 6SECRET_KEY = 'ml+og-gq(pqvh*)=s%#_--hiyxsptj7k&uy&v@pxz@=8(uu!^3' 7 8DEBUG = True 9 10ALLOWED_HOSTS = [] 11 12 13 14INSTALLED_APPS = [ 15 'django.contrib.admin', 16 'django.contrib.auth', 17 'django.contrib.contenttypes', 18 'django.contrib.sessions', 19 'django.contrib.messages', 20 'django.contrib.staticfiles', 21 'sample', 22 'accounts.apps.AccountsConfig', 23] 24 25MIDDLEWARE = [ 26 'django.middleware.security.SecurityMiddleware', 27 'django.contrib.sessions.middleware.SessionMiddleware', 28 'django.middleware.common.CommonMiddleware', 29 'django.middleware.csrf.CsrfViewMiddleware', 30 'django.contrib.auth.middleware.AuthenticationMiddleware', 31 'django.contrib.messages.middleware.MessageMiddleware', 32 'django.middleware.clickjacking.XFrameOptionsMiddleware', 33] 34 35ROOT_URLCONF = 'example.urls' 36 37TEMPLATES = [ 38 { 39 'BACKEND': 'django.template.backends.django.DjangoTemplates', 40 'DIRS': [os.path.join(BASE_DIR, 'templates')], 41 'APP_DIRS': True, 42 'OPTIONS': { 43 'context_processors': [ 44 'django.template.context_processors.debug', 45 'django.template.context_processors.request', 46 'django.contrib.auth.context_processors.auth', 47 'django.contrib.messages.context_processors.messages', 48 ], 49 }, 50 }, 51] 52 53WSGI_APPLICATION = 'example.wsgi.application' 54 55 56 57DATABASES = { 58 'default': { 59 'ENGINE': 'django.db.backends.sqlite3', 60 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 61 } 62} 63 64AUTH_PASSWORD_VALIDATORS = [ 65 { 66 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 67 }, 68 { 69 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 70 }, 71 { 72 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 73 }, 74 { 75 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 76 }, 77] 78 79 80LANGUAGE_CODE = 'ja' 81 82TIME_ZONE = 'Asia/Tokyo' 83 84USE_I18N = True 85 86USE_L10N = True 87 88USE_TZ = True 89 90STATIC_URL = '/static/' 91STATIC_ROOT = os.path.join(BASE_DIR, 'static') 92 93LOGIN_URL = 'account/login' 94LOGIN_REDIRECT_URL = 'sample:mypage' 95LOGOUT_REDIRECT_URL = '/' 96

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

{% load static %}はすべてのhtmlファイルで書かないとファイルが読み込めません。
きちんと調べたことがないのでこれ以外の方法もあるかもしれませんが、これが確実です。

投稿2019/12/18 06:12

mistn

総合スコア1191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

inori10

2019/12/18 06:30

できました! 前djangoで別のもの作った時は必要なかったのですが、なぜ今回は必要だったのでしょうかね。でもこれは置いておいて、結果できたのでよかったです!ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問