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

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

ただいまの
回答率

90.61%

  • Django

    981questions

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

  • URL

    197questions

    URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,141

Delpy

score 27

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
(投稿文字数制限があるので省略できるところは省略しています)

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'portfolio',
)

ROOT_URLCONF = 'avdatapage.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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 = 'avdatapage.wsgi.application'

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

STATIC_URL = '/static/'


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

urls.py
from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),

    url(r'^$', 'avdatapage.views.top', name='top'),

    url(r'^portfolio/', include('portfolio.urls')),

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

    url(r'^contact/$', 'avdatapage.views.contact', name='contact'),
]

views.py
from django.shortcuts import *
from portfolio.models import ActressMaster

def top(request):
    all_actress = ActressMaster.objects.all()

    return render_to_response('index.html', {'all_actress': all_actress}, context_instance=RequestContext(request))

def about(request):
    return render_to_response('about.html', locals(), context_instance=RequestContext(request))


def contact(request):
    return render_to_response('contact.html', locals(), context_instance=RequestContext(request))

base.html
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>データページ</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Bootstrap Core CSS -->
    <link href="static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="static/portfolio/bootstrap/css/4-col-portfolio.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'top' %}">データページ</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="{% url 'about' %}">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="{% url 'contact' %}">Contact</a>
                    </li>
                    <li>
                        <a href="#">Login</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

    {% block main %}
        
    {% endblock main %}

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="static/portfolio/bootstrap/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/static/portfolio/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

index.html
{% extends "base.html" %}

{% block main %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header"><i class="fa fa-heart-o"></i> リスト
                    <small>名前の順</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->
    
        {% for actress in all_actress %}
            <div class="col-md-3 portfolio-item">
                <h4>{{ actress.idolname }}</h4>
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/750x450" alt="">
                </a>
            </div>
        {% endfor %}

        <hr>

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li>
                        <a href="#">&laquo;</a>
                    </li>
                    <li class="active">
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>
    
{% endblock main %}

about.html
{% extends "base.html" %}

{% block main %}
    This is about page
{% endblock main %}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

<link href="static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">
この表記だとブラウザは相対パスでcssをとってきます。
そのため
url(r'^about/$', 'avdatapage.views.about', name='about'),
で処理されるURLのページでは頭にaboutがついたパスのcssを探します。
解決策としては
<link href="/static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">
という感じで頭にスラッシュつけて絶対パスで表記するのがいいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/08/25 21:12

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

    キャンセル

0

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

結局、下記のようにしました。しかし、{% url 'top' %}とせずに、単純に/だけでも同じことですね。
<link href="{% url 'top' %}static/portfolio/bootstrap/css/bootstrap.min.css" rel="stylesheet">

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/08/26 03:06

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

    キャンセル

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

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

関連した質問

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

  • Django

    981questions

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

  • URL

    197questions

    URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。