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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Django

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

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

Q&A

解決済

1回答

3665閲覧

【Python/Django】CSSが効かない

退会済みユーザー

退会済みユーザー

総合スコア0

Django

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

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

0グッド

0クリップ

投稿2018/06/19 11:21

編集2018/06/19 11:31

前提・実現したいこと

Djangoの開発環境でCSSを反映させたいのですが、反映されず困っています。
フォルダ構成・HTML・CSS・settings.pyファイルは下記の通りです。

該当のソースコード

●フォルダ構成
![イメージ説明

●index.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>dekita!</title> 6 {% load static %} 7 <link rel="stylesheet" href="{% static 'dekita/style.css' %}" /> 8 <style type="text/css"></style> 9</head> 10<body> 11<div class="pageCover"> 12 <header> 13 <h1>dekita!</h1> 14 </header> 15 16 <div class="firstMenu"> 17 <h3>直近の開発予定</h3> 18 <a href="{% url 'dekita:add' %}">追加</a> 19 <div class="frame"> 20 <ul class="aaa"> 21 {% for todo in todolist %} 22 <li class="todo"> 23 {{ todo.id }} - {{ todo.todolist|linebreaksbr }} 24 <a href="{% url 'dekita:edit' todo.id %}">編集</a> 25 <a href="{% url 'dekita:done' todo.id %}">できた</a> 26 </li> 27 {% endfor %} 28 </ul> 29 </div> 30 </div> 31</div> 32</body> 33</html>

●style.css

CSS

1@charset "utf-8"; 2/* 全体 */ 3.pageCover{ 4 max-width: 1170px; 5 width:100% 6} 7/* ヘッダー */ 8header{ 9 background-color:red; 10 color:white; 11} 12 13/* 下部メニュー */ 14/* */ 15/* */ 16/* */ 17/* */ 18/* */

●settings.py

Python

1#settings.py 2""" 3Django settings for config project. 4 5Generated by 'django-admin startproject' using Django 2.0.6. 6 7For more information on this file, see 8https://docs.djangoproject.com/en/2.0/topics/settings/ 9 10For the full list of settings and their values, see 11https://docs.djangoproject.com/en/2.0/ref/settings/ 12""" 13 14import os 15 16# Build paths inside the project like this: os.path.join(BASE_DIR, ...) 17BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 18PROJECT_NAME = os.path.basename(BASE_DIR) 19 20# Quick-start development settings - unsuitable for production 21# See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/ 22 23# SECURITY WARNING: keep the secret key used in production secret! 24SECRET_KEY = '5qg^4k05#m-$)8e9=)62@gr)q*el0-s3hfnj5y_1%33w(ld(2x' 25 26# SECURITY WARNING: don't run with debug turned on in production! 27DEBUG = True 28 29ALLOWED_HOSTS = [] 30 31 32# Application definition 33 34INSTALLED_APPS = [ 35 'dekita.apps.DekitaConfig', 36 'django.contrib.admin', 37 'django.contrib.auth', 38 'django.contrib.contenttypes', 39 'django.contrib.sessions', 40 'django.contrib.messages', 41 'django.contrib.staticfiles', 42] 43 44MIDDLEWARE = [ 45 'django.middleware.security.SecurityMiddleware', 46 'django.contrib.sessions.middleware.SessionMiddleware', 47 'django.middleware.common.CommonMiddleware', 48 'django.middleware.csrf.CsrfViewMiddleware', 49 'django.contrib.auth.middleware.AuthenticationMiddleware', 50 'django.contrib.messages.middleware.MessageMiddleware', 51 'django.middleware.clickjacking.XFrameOptionsMiddleware', 52] 53 54ROOT_URLCONF = 'config.urls' 55 56TEMPLATES = [ 57 { 58 'BACKEND': 'django.template.backends.django.DjangoTemplates', 59 'DIRS': [os.path.join(BASE_DIR, 'templates')], 60 'APP_DIRS': True, 61 'OPTIONS': { 62 'context_processors': [ 63 'django.template.context_processors.debug', 64 'django.template.context_processors.request', 65 'django.contrib.auth.context_processors.auth', 66 'django.contrib.messages.context_processors.messages', 67 ], 68 }, 69 }, 70] 71 72WSGI_APPLICATION = 'config.wsgi.application' 73 74 75# Database 76# https://docs.djangoproject.com/en/2.0/ref/settings/#databases 77 78DATABASES = { 79 'default': { 80 'ENGINE': 'django.db.backends.sqlite3', 81 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 82 } 83} 84 85 86# Password validation 87# https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators 88 89AUTH_PASSWORD_VALIDATORS = [ 90 { 91 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 92 }, 93 { 94 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 95 }, 96 { 97 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 98 }, 99 { 100 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 101 }, 102] 103 104 105# Internationalization 106# https://docs.djangoproject.com/en/2.0/topics/i18n/ 107 108LANGUAGE_CODE = 'ja' 109 110TIME_ZONE = 'Asia/Tokyo' 111 112USE_I18N = True 113 114USE_L10N = True 115 116USE_TZ = True 117 118 119# Static files (CSS, JavaScript, Images) 120# https://docs.djangoproject.com/en/2.0/howto/static-files/ 121 122STATIC_URL = '/static/' 123STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 124STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')

試したこと


python manage.py collectstaticを実行したところ、CSSが効きました。
ただ、これは本番環境用のものなので、上記コマンドをせずCSSを効かせたいです。。

②Python manage.py findstatic .
下記を参考に「Python manage.py findstatic .」も実行しています。
リンク内容
実行結果は次の通りになりました。

^C(venv) usernamenoMacBook-puro:tryweb username$ Python manage.py findstatic . Found '.' here: /Users/username/PycharmProjects/tryweb/static /Users/username/PycharmProjects/tryweb/venv/lib/python3.6/site-packages/django/contrib/admin/static

これはtryweb(プロジェクト)フォルダの直下のstaticまでは読んでるけどその下には来てないよ、ということでしょうか。

補足情報(FW/ツールのバージョンなど)

Django 2.0.6
python 3.6.5
MacOS High Sierra 10.13.5

その他不明な点がありましたらご連絡ください。。

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

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

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

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

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

guest

回答1

0

ベストアンサー

原因不明なのですがCSSが効き始めました。。

投稿2018/06/19 11:42

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問