teratail
回答率
85.49%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.49%
トップDjangoに関する質問
Django

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

Python 3.x

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

Q&A

解決済

1回答

5547閲覧

Djangoでcssが反映されない

mofu_mofu
mofu_mofu

総合スコア73

Django

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

Python 3.x

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

0グッド

2クリップ

投稿2018/01/18 08:37

編集2018/01/18 11:40

0

2

いつもお世話になっております。djangoで静的ファイルが読み込めないので質問をさせていただきます。

#前提
Django girls japan チュートリアルをやっています。
CSSの設定が反映されず困っています。

ファイル構造
イメージ説明

djangogirls/mysite/setting.py

"""
Django settings for mysite project.

Generated by 'django-admin startproject' using Django 1.11.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
print(BASE_DIR)

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'vtwp(uq)%9e^ap0dru-n!#v(-1yd#h##b(d8g=^gp@(5n!zvg5'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'ja-JP'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = False


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'

import dj_database_url
#DATABASES['default'] = dj_database_url.config()

SECURE_PROXY_SSL_HEADER	=('HTTP_X_FORWARDED_PROTO',	'https')
ALLOWED_HOSTS=['*']
STATIC_ROOT='staticfiles'
DEBUG=False

try:
    from	.local_settings	import	*
except	ImportError:
    pass

STATICFILES_DIRS= (
    os.path.join(BASE_DIR, "static"),
)

djangogirls/blog/templates/blog/post_list.html

{% load staticfiles %}

<html>
    <head>
        <title>Django	Girls	blog</title>
        <link	rel="stylesheet"	href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.m
in.css">
        <link	rel="stylesheet"	href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-t
heme.min.css">
        <link	rel="stylesheet"	href="{{  'static/css/blog.css' }}">
        <link	href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext"	rel
="stylesheet"	type="text/css">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="">Django	Girls	Blog</a></h1>
        </div>


    {% for post in posts %}
        <div class="post">
            <p>publish date :{{ post.created_date }}</p>
            <h2>{{ post.title }}</h2>
            <p>{{ post.text|linebreaks }}</p>
        </div>
    {% endfor %}


    </body>
</html>

djangogirls/static/css/blog.css

.page-header {
    background-color:	#ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1	a, .page-header h1	a:visited,	.page-header h1 a:active {
    color:	#ffffff;
    font-size:	36pt;
    text-decoration:	none;
}

.content {
	margin-left: 40px;
}

h1,	h2,	h3,	h4 {
	font-family: 'Lobster', cursive;
}

.date {
	color:	#828282;
}

.save {
	float:	right;
}

.post-form	textarea, .post-form input {
	width:	100%;
}

.top-menu,	.top-menu:hover, .top-menu:visited {
    color:	#ffffff;
    float:	right;
    font-size:	26pt;
    margin-right:	20px;
}

.post {
	margin-bottom:	70px;
}

.post h1 a,	.post h1 a:visited	{
	color:	#000000;
}

body {
    padding-left: 15px;
}

#問題
コンソールに/static/css/blog.css HTTP/1.1" 404と表示されて設定したcssが表示されない

> python .\manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).
January 18, 2018 - 17:01:05
Django version 2.0.1, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[18/Jan/2018 17:01:15] "GET / HTTP/1.1" 200 1675
[18/Jan/2018 17:01:15] "GET /static/css/blog.css HTTP/1.1" 404 93

CSSを設定しているのに以下のようにプレーンな表示になります

イメージ説明

チュートリアルで表示される本来のスタイルは以下のような感じです

イメージ説明

#やったこと

プリントデバッグで定数を出しました

print("STATICFILES_DIRS = %s" % STATICFILES_DIRS)
print("STATIC_ROOT= %s" % STATIC_ROOT)
print("STATIC_URL= %s" % STATIC_URL)
print("BASE_DIR= %s" % BASE_DIR)

STATICFILES_DIRS = C:\Users\xxx\Desktop\gitrepos\djangogirls\static
STATIC_ROOT= staticfiles
STATIC_URL= /static/
BASE_DIR= C:\Users\xxx\Desktop\gitrepos\djangogirls

djangogirls/blog/templates/blog/post_list.htmlの中身をすこし変えてみました。
結果は同じでした。

<link	rel="stylesheet"	href="{%	static	'css/blog.css'	%}">

↓

<link	rel="stylesheet"	href="{{  'static/css/blog.css' }}">

定数の中身はおかしくないと思いますし、cssファイルの場所をきちんと指定していると思うのですが、、、

長くなってしまいましたが以上よろしくお願いいたします。

本当に存在していないのかshellで確認しました

[18/Jan/2018 17:01:15] "GET / HTTP/1.1" 200 1675
[18/Jan/2018 17:01:15] "GET /static/css/blog.css HTTP/1.1" 404 93


(InteractiveConsole)
>>> import os
>>> os.getcwd()
'C:\Users\xxx\Desktop\gitrepos\djangogirls'
>>> abspath = os.path.join(os.getcwd(),"static", "css", "blog.css")
'C:\Users\xxx\Desktop\gitrepos\djangogirls\static\css\blog.css'
>>> os.path.exists(abspath)
True


バージョンのせいかとおもい
非venvだとDjango==2.0.1
venvだとDjango==1.11
で試しても
[18/Jan/2018 20:35:12] "GET / HTTP/1.1" 200 1677
[18/Jan/2018 20:35:12] "GET /static/css/blog.css HTTP/1.1" 404 93
と出た（＝バージョンが原因ではない？）

#バージョンなど

Win10 64bit

> python -V
Python 3.6.4

> pip freeze
dj-database-url==0.4.2
dj-static==0.0.6
Django==2.0.1
psycopg2==2.7.3.2
pytz==2017.3
static3==0.7.0
virtualenv==15.1.0
whitenoise==3.3.1

(myenv) PS C:\Users\xxx\Desktop\gitrepos\djangogirls> pip freeze
dj-database-url==0.4.2
Django==1.11
gunicorn==19.7.1
psycopg2==2.7.3.2
pytz==2017.3
whitenoise==3.3.1

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

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

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

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

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

mofu_mofu
mofu_mofu

2018/01/18 10:21

> pip freezeでDjango==2.0.1とでております。ちょっとドキュメント見てみます。ありがとうございます。
guest

回答1件

0

自己解決

(myenv) PS C:\Users\xxx\Desktop\gitrepos\djangogirls> python manage.py collectstatic

Copying 'C:\Users\xxx\Desktop\gitrepos\djangogirls\static\css\blog.css'
Copying 'C:\Users\xxx\Desktop\gitrepos\djangogirls\myenv\lib\site-packages\django\contrib\admin\static\admin\css\base.css'
Copying 'C:\Users\xxx\Desktop\gitrepos\djangogirls\myenv\lib\site-packages\django\contrib\admin\static\admin\css\changelists.css'
Copying 'C:\Users\xxx\Desktop\gitrepos\djangogirls\myenv\lib\site-packages\django\contrib\admin\static\admin\css\dashboard.css'
Copying 'C:\Users\xxx\Desktop\gitrepos\djangogirls\myenv\lib\site-packages\django\contrib\admin\static\admin\css\fonts.css'

これで解決しました。
setting.pyでDEBUG=Trueとしており、かつ、ローカルで動かしているので、なぜこれを動かすのかちょっとわかりませんでしたが、、

参照
https://stackoverflow.com/questions/24199029/django-cannot-find-static-files-need-a-second-pair-of-eyes-im-going-crazy
http://docs.djangoproject.jp/en/latest/howto/static-files.html

Udomomoさん、お時間を割いていただきありがとうございました。

投稿2018/01/18 11:49

mofu_mofu
mofu_mofu

総合スコア73

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問

トップDjangoに関する質問

Djangoでcssが反映されない