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

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

ただいまの
回答率

90.50%

  • Python 3.x

    6401questions

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

  • Django

    1052questions

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

Djangoでcssが反映されない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,706

mofu_mofu

score 28

いつもお世話になっております。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
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Udomomo

    2018/01/18 19:14

    Djangoのバージョンはいくつですか?そのチュートリアルは若干古く、最新のDjangoでは書き方が若干異なります。https://docs.djangoproject.com/en/2.0/howto/static-files/

    キャンセル

  • mofu_mofu

    2018/01/18 19:21

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

    キャンセル

回答 1

check解決した方法

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さん、お時間を割いていただきありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Python 3.x

    6401questions

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

  • Django

    1052questions

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