Django1.8.3 index.htmlにはCSSが読み込まれるのに、about.htmlには読み込まれない。

Django初心者です。Django1.8.3で画像portfolioを表示させる簡単なアプリを作っています。
base.htmlでcssを読み込んで、extendsしてindex.htmlにもabout.htmlにもスタイルが当たるようにしたいです。
index.htmlはうまくスタイルが当たるのですが、about.htmlの方が

"GET /about/static/portfolio/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 2542

となり、/static/の前に"about"がついてしまってCSSが読み込まれません。なぜでしょうか？

ちなみにindex.htmlの方は、

"GET /static/portfolio/bootstrap/css/bootstrap.min.css HTTP/1.1" 304 0

となります。

ディレクトリ構造

myapp
    ├── myapp
    │   ├── __init__.py
    │   ├── __init__.pyc
    │   ├── settings.py
    │   ├── settings.pyc
    │   ├── urls.py
    │   ├── urls.pyc
    │   ├── views.py
    │   ├── views.pyc
    │   ├── wsgi.py
    │   └── wsgi.pyc
    ├
    ├── db.sqlite3
    ├── manage.py
    ├── portfolio
    │   ├── __init__.py
    │   ├── __init__.pyc
    │   ├── admin.py
    │   ├── admin.pyc
    │   ├── migrations
    │   │   ├── 0001_initial.py
    │   │   ├── 0001_initial.pyc
    │   │   ├── 0002_auto_20150817_0851.py
    │   │   ├── 0002_auto_20150817_0851.pyc
    │   │   ├── __init__.py
    │   │   └── __init__.pyc
    │   ├── models.py
    │   ├── models.pyc
    │   ├── sql
    │   │   └── actressmaster.sql
    │   ├── templates
    │   │   ├── about.html
    │   │   ├── base.html
    │   │   ├── contact.html
    │   │   ├── index.html
    │   │   └── portfolio
    │   ├── tests.py
    │   ├── urls.py
    │   ├── urls.pyc
    │   ├── views.py
    │   └── views.pyc
    ├── static
    │   └── portfolio
    │       └── bootstrap
    │           ├── css
    │           │   ├── 4-col-portfolio.css
    │           │   ├── bootstrap.css
    │           │   └── bootstrap.min.css
    │           ├── fonts
    │           │   ├── glyphicons-halflings-regular.eot
    │           │   ├── glyphicons-halflings-regular.svg
    │           │   ├── glyphicons-halflings-regular.ttf
    │           │   ├── glyphicons-halflings-regular.woff
    │           │   └── glyphicons-halflings-regular.woff2
    │           └── js
    │               ├── bootstrap.js
    │               ├── bootstrap.min.js
    │               └── jquery.js

settings.py
（投稿文字数制限があるので省略できるところは省略しています）

python
1
2import os
3
4BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
5
6ALLOWED_HOSTS = []
7
8
9# Application definition
10
11INSTALLED_APPS = (
12    'django.contrib.admin',
13    'django.contrib.auth',
14    'django.contrib.contenttypes',
15    'django.contrib.sessions',
16    'django.contrib.messages',
17    'django.contrib.staticfiles',
18    'portfolio',
19)
20
21ROOT_URLCONF = 'avdatapage.urls'
22
23TEMPLATES = [
24    {
25        'BACKEND': 'django.template.backends.django.DjangoTemplates',
26        'DIRS': [os.path.join(BASE_DIR, 'templates')],
27        'APP_DIRS': True,
28        'OPTIONS': {
29            'context_processors': [
30                'django.template.context_processors.debug',
31                'django.template.context_processors.request',
32                'django.contrib.auth.context_processors.auth',
33                'django.contrib.messages.context_processors.messages',
34            ],
35        },
36    },
37]
38
39WSGI_APPLICATION = 'avdatapage.wsgi.application'
40
41# Static files (CSS, JavaScript, Images)
42# https://docs.djangoproject.com/en/1.8/howto/static-files/
43
44STATIC_URL = '/static/'
45
46
47STATICFILES_DIRS = (
48    os.path.join(BASE_DIR, 'static'),
49)
50

urls.py

python
1from django.conf.urls import include, url
2from django.contrib import admin
3
4urlpatterns = [
5    url(r'^admin/', include(admin.site.urls)),
6
7    url(r'^$', 'avdatapage.views.top', name='top'),
8
9    url(r'^portfolio/', include('portfolio.urls')),
10
11    url(r'^about/$', 'avdatapage.views.about', name='about'),
12
13    url(r'^contact/$', 'avdatapage.views.contact', name='contact'),
14]

views.py

python
1from django.shortcuts import *
2from portfolio.models import ActressMaster
3
4def top(request):
5	all_actress = ActressMaster.objects.all()
6
7	return render_to_response('index.html', {'all_actress': all_actress}, context_instance=RequestContext(request))
8
9def about(request):
10	return render_to_response('about.html', locals(), context_instance=RequestContext(request))
11
12
13def contact(request):
14	return render_to_response('contact.html', locals(), context_instance=RequestContext(request))

base.html

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5
6    <meta charset="utf-8">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <meta name="description" content="">
10    <meta name="author" content="">
11
12    <title>データページ</title>
13    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
14    <!-- Bootstrap Core CSS -->
15    <link href="static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">
16
17    <!-- Custom CSS -->
18    <link href="static/portfolio/bootstrap/css/4-col-portfolio.css" rel="stylesheet">
19
20    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
21    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
22    <!--[if lt IE 9]>
23        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
24        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
25    <![endif]-->
26
27</head>
28
29<body>
30
31    <!-- Navigation -->
32    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
33        <div class="container">
34            <!-- Brand and toggle get grouped for better mobile display -->
35            <div class="navbar-header">
36                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
37                    <span class="sr-only">Toggle navigation</span>
38                    <span class="icon-bar"></span>
39                    <span class="icon-bar"></span>
40                    <span class="icon-bar"></span>
41                </button>
42                <a class="navbar-brand" href="{% url 'top' %}">データページ</a>
43            </div>
44            <!-- Collect the nav links, forms, and other content for toggling -->
45            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
46                <ul class="nav navbar-nav">
47                    <li>
48                        <a href="{% url 'about' %}">About</a>
49                    </li>
50                    <li>
51                        <a href="#">Services</a>
52                    </li>
53                    <li>
54                        <a href="{% url 'contact' %}">Contact</a>
55                    </li>
56                    <li>
57                        <a href="#">Login</a>
58                    </li>
59                </ul>
60            </div>
61            <!-- /.navbar-collapse -->
62        </div>
63        <!-- /.container -->
64    </nav>
65
66    <!-- Page Content -->
67    <div class="container">
68
69    {% block main %}
70        
71    {% endblock main %}
72
73    </div>
74    <!-- /.container -->
75
76    <!-- jQuery -->
77    <script src="static/portfolio/bootstrap/js/jquery.js"></script>
78
79    <!-- Bootstrap Core JavaScript -->
80    <script src="/static/portfolio/bootstrap/js/bootstrap.min.js"></script>
81
82</body>
83
84</html>

index.html

html
1{% extends "base.html" %}
2
3{% block main %}
4
5        <!-- Page Heading -->
6        <div class="row">
7            <div class="col-lg-12">
8                <h1 class="page-header"><i class="fa fa-heart-o"></i> リスト
9                    <small>名前の順</small>
10                </h1>
11            </div>
12        </div>
13        <!-- /.row -->
14	
15		{% for actress in all_actress %}
16			<div class="col-md-3 portfolio-item">
17				<h4>{{ actress.idolname }}</h4>
18                <a href="#">
19                    <img class="img-responsive" src="http://placehold.it/750x450" alt="">
20                </a>
21            </div>
22		{% endfor %}
23
24        <hr>
25
26        <!-- Pagination -->
27        <div class="row text-center">
28            <div class="col-lg-12">
29                <ul class="pagination">
30                    <li>
31                        <a href="#">&laquo;</a>
32                    </li>
33                    <li class="active">
34                        <a href="#">1</a>
35                    </li>
36                    <li>
37                        <a href="#">2</a>
38                    </li>
39                    <li>
40                        <a href="#">3</a>
41                    </li>
42                    <li>
43                        <a href="#">4</a>
44                    </li>
45                    <li>
46                        <a href="#">5</a>
47                    </li>
48                    <li>
49                        <a href="#">&raquo;</a>
50                    </li>
51                </ul>
52            </div>
53        </div>
54        <!-- /.row -->
55
56        <hr>
57
58        <!-- Footer -->
59        <footer>
60            <div class="row">
61                <div class="col-lg-12">
62                    <p>Copyright &copy; Your Website 2014</p>
63                </div>
64            </div>
65            <!-- /.row -->
66        </footer>
67	
68{% endblock main %}

about.html

html
1{% extends "base.html" %}
2
3{% block main %}
4	This is about page
5{% endblock main %}

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

回答2件

kokardyさんありがとうございました。

結局、下記のようにしました。しかし、{% url 'top' %}とせずに、単純に/だけでも同じことですね。

html
1<link href="{% url 'top' %}static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">

投稿2015/08/25 12:31

退会済みユーザー

総合スコア0

kokardy

2015/08/25 18:06

将来的にアドレス変更するかもしれなくて、staticファイルを｛top｝taticのアドレスに使用と思っているのなら、そちらの方が抽象化されていていいと思います。ただ、settings.pyのSTATIC_ROOTを使う方が一般的かと思います。

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

ベストアンサー

HTML
1<link href="static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">

この表記だとブラウザは相対パスでcssをとってきます。
そのため

Python
1url(r'^about/$', 'avdatapage.views.about', name='about'),

で処理されるURLのページでは頭にaboutがついたパスのcssを探します。
解決策としては

HTML
1<link href="/static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">

という感じで頭にスラッシュつけて絶対パスで表記するのがいいと思います。

投稿2015/08/23 14:11

kokardy

総合スコア781

退会済みユーザー

2015/08/25 12:12

ありがとうございました！参考になりました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

Django1.8.3 index.htmlにはCSSが読み込まれるのに、about.htmlには読み込まれない。

関連した質問