Q&A
「どこまで出来ているのか」が、分からないので、画面やエラーなどの情報があると分かり易いのではないでしょうか。
TakaiYさんの回答にある「エラーにある通り、」のエラーってどこに書いてあるのでしょうか？
見当違いだったらごめんなさい。
前提・実現したいこと
Djangoのフレームワークを用いてサイトを作成中です。
Header,Bodyが表示できない状態です。
static のロードができていない?
該当のソースコード
html
1{% load static %} 2<html lang="ja"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> 7 <meta name="description" content=""> 8 <meta name="author" content=""> 9 10 <title>{% block title %}{% endblock %}</title> 11 12 <!-- Booststrap core CSS--> 13 <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet"> 14 <!--Custom font for this template--> 15 <link href="https://fonts.googleapis.com/css?familiy=Catamaran:100,200,300,300i,400,700,700i,900,900i" rel="stylesheet"> 16 <link href="https://fonts.googleapis.com/css?familiy=Lato:100,200,300,300i,400,700,700i,900,900i" rel="stylesheet"> 17 <!--Custom styles for this template--> 18 <link href="{% static 'css/one-page-wonder.min.css' %}"> 19 <!-- My style --> 20 <link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %"> 21 {% block head %}{% endblock %} 22 </head> 23 <body> 24 <div id ="wrapper"> 25 <!--Navigation--> 26 <nav class="navbar-expand-lg navbar-dark navbar-customfixed-top"> 27 <div class ="container"> 28 <a class="navbar-brand" href="{% url 'diary:index' %}">BLOG</a> 29 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-Responsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 30 <span class="nabar-toggler-icon"></span> 31 </button> 32 <div class ="collapse navbar-collaspe" id="navbarResponsive"> 33 <ul class="navbar-nav mr-auto"> 34 <li class="nav-item{% block active_inquiry %}{% endblock%}"> 35 <a class="nav-link" href="{% url 'diary:inquiry'%}">INQUIRY</a> 36 </li> 37 </ul> 38 <ul class ="navbar-nav ml-auto"> 39 <li class ="nav-item"> 40 <a class="nav-link" href="#">SignUp</a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#">Login</a> 44 </li> 45 </ul> 46 </div> 47 </div> 48 </nav> 49 {% block header%}{% endblock %} 50 {% block contents%}{% endblock %} 51 <!--Footer--> 52 <footer class="py-5 bg-block"> 53 <div class="container"> 54 <p class="m-0 text-center text-white small">Copylight ©Blog</p> 55 </div> 56 <!-- /.container --> 57 </footer> 58 59 <!-- Bootstrap core Javascript --> 60 <script src="{% static 'vender/jquery/jquery.min.js'%}"></script> 61 <script src="{% static 'vender/bootstrap/js/bootstrap.bundle.min.js'%}"></script> 62 </div> 63 </body> 64</html>
html
1 2{% extends 'base.html' %} 3{% load static %} 4{% block title %}Web上で質問や悩みを投稿できるサービス|Akilog{% endblock %} 5{% block header%} 6<header class="masthead text-center text-while"> 7 <div class="masthead-content"> 8 <div class="container"> 9 <h1 class="masthead-heading mb-0">Akilog</h1> 10 <h2 class="masthead-subheading mb-0">質問投稿フォーラム</h2> 11 <a href="#" class="btn btn-primary btn-xl rounded-pillmt-5">Login</a> 12 </div> 13 </div> 14 <div class="bg-circle-1 bg-circle"></div> 15 <div class="bg-circle-2 bg-circle"></div> 16 <div class="bg-circle-3 bg-circle"></div> 17 <div class="bg-circle-4 bg-circle"></div> 18</header> 19{% endblock %} 20{% block contents %} 21<section> 22 <div class="container"> 23 <div class="row align-items-center"> 24 <div class="col-lg-6 order-lg-2"> 25 <div class="p-5"> 26 <img class="img-fluid rounded-circle" src="{% static 'img/01.jpg' %}" alt=""> 27 </div> 28 </div> 29 <div class="col-lg-6 order-lg-1"> 30 <div class="p-5"> 31 <h2 class="display-4">Forum</h2> 32 <p>WEB上で編集/作成/削除まで可能</p> 33 </div> 34 </div> 35 </div> 36 </div> 37</section> 38 39<section> 40 <div class="container"> 41 <div class="row align-items-center"> 42 <div class="col-lg-6"> 43 <div class="p-5"> 44 <img class="img-fluid rounded-circle" src="{% static 'img/02.jpg' %}" alt=""> 45 </div> 46 </div> 47 <div class="col-lg-6"> 48 <div class="p-5"> 49 <h2 class="display-4">Save your Forum</h2> 50 <p>あなたの投稿を保存</p> 51 </div> 52 </div> 53 </div> 54 </div> 55</section> 56 57<section> 58 <div class="container"> 59 <div class="row align-items-center"> 60 <div class="col-lg-6 order-lg-2"> 61 <div class="p-5"> 62 <img class="img-fluid rounded-circle" src="{% static 'img/03.jpg' %}" alt=""> 63 </div> 64 </div> 65 <div class="col-lg-6 order-lg-1"> 66 <div class="p-5"> 67 <h2 class="display-4">Membership System</h2> 68 <p>会員専用ページ</p> 69 </div> 70 </div> 71 </div> 72 </div> 73</section> 74{% endblock %}
python
1TEMPLATES = [ 2 { 3 'BACKEND': 'django.template.backends.django.DjangoTemplates', 4 'DIRS': [], 5 'APP_DIRS': True, 6 'OPTIONS': { 7 'context_processors': [ 8 'django.template.context_processors.debug', 9 'django.template.context_processors.request', 10 'django.contrib.auth.context_processors.auth', 11 'django.contrib.messages.context_processors.messages', 12 ], 13 }, 14 }, 15] 16
]
ご指摘いただきありがとうございます。エラーコード自体はなくなりましたので修正させていただきます。ただ、コードの一部のみしか反映されていない状態です。
質問する側としては何度も同じような質問をするのは面倒や気がひけると思うかもしれませんが、回答したことで一歩前進しているのであれば、重ねて質問ではなく、一度質問を閉じ（ベストアンサーを付与し）、改めて質問をした方が以降の回答もされやすくなるかと思います。
質問と回答の乖離が出てくるのでわかりにくくなりますし。
お手本となるコードは大高隆さんの「Django開発入門」を参考にされたのでしょうか？
MorningMushroomさん、はい。そうです。
大高さんの本のコードは出版社のホームページからダウンロードできますので、オリジナルの状態でご自分の環境で動かしてみてください。まず動くと思いますので、そうしたら、段階的にご自分のコードに近づくように、少しずつ修正して、動作確認して、修正して・・・と最終的に上記のコードになるように修正します。
その段階で出てきた問題でご自分で解決できなければ、あらためてこのサイトで質問されれば、より具体的になると思います。
MorningMushroomさん：返信が遅れてすいません。アドバイスありがとうございます。ファイルも無事ダウンロードできました。比較しながら修正させていただきます。
自分の把握できる分量だけ修正して、動作確認して、分からなければ、大高さんの本を参照して、・・・を繰り返していけば、おそらく自力で解決できるのではないかと思います。頑張ってください(^^
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
