下記問題についてご教示頂けますと幸いです。
<解決したい問題>
【概要】
同一のソースコードを使用しているにもかかわらず、①単一テンプレートと②他のテンプレートを継承しているテンプレート、常時が異なる問題について
【詳細】
①navbar_base.html(単一テンプレート)
②home.html(他のテンプレートを継承しているテンプレート)
<お伺いしたいこと>
上記の解決方法。
<現状の理解>
①navbar_base.html(単一テンプレート)の場合は正しく出力できている
②home.htmlにhome_base.htmlを継承して、①と同じソースコードを記述した時にフォントが崩れてしまう(navbar_base.htmlを継承できれば良いのですが、二つのテンプレートを継承することはできないと認識しているため、home.htmlではhome_base.htmlを継承しています)
<不明点>
②のナビゲーションバーがリストになってしまっている要因がどこにあるのかを現在探しております
<ソースコード>
home.html
home.html
1{% extends 'home_base.html' %} 2{% load static %} 3{% load widget_tweaks %} 4 5 6<head> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 13 14<head> 15 16<!-- header --> 17 {% block header %} 18 今日を振り返ると?? 19 {% endblock header %} 20 21 22<!-- body --> 23 {% block content %} 24 <form method='POST' class='form'> 25 {% csrf_token %} 26 {{ form.condition | add_class:"form-control" }} 27 </form> 28 <input type='submit' value='➡' class="submit-bottun"> 29 {% endblock content %} 30 31 32 {% block footer %} 33 <nav class="navbar navbar-expand-sm navbar-dark fixed-bottom p-3" style="background-color:#38B6FF" mt-3 mb-3"> 34 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> 35 <span class="navbar-toggler-icon"></span> 36 </button> 37 <div class="collapse navbar-collapse"> 38 <ul class="navbar-nav w-100 nav-justified"> 39 <li class="nav-item active"> 40 <a class="nav-link" href="#"> <img src="{% static 'img/home.png' %}"> </a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#1"> <img src="{% static 'img/think.png' %}"> </a> 44 </li> 45 <li class="nav-item"> 46 <a class="nav-link" href="#2"> <img src="{% static 'img/history.png' %}"> </a> 47 </li> 48 <li class="nav-item"> 49 <a class="nav-link" href="#3"> <img src="{% static 'img/share.png' %}"> </a> 50 </li> 51 <li class="nav-item"> 52 <a class="nav-link" href="#4"> <img src="{% static 'img/with_us.png' %}"> </a> 53 </li> 54 </ul> 55 </div> 56 </nav> 57 58 <!-- Optional JavaScript --> 59 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 60 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 61 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 62 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 63 {% endblock footer %}
home.css
home.css
1header { 2 margin-top: 15%; 3 text-align: center; 4 font-size: 25px; 5 font-weight: 600; 6 color: #30FF95; 7 -webkit-text-stroke: 2px #38B6FF; 8} 9 10.form-control { 11 margin: auto; 12 margin-top: 3%; 13 display: flex; 14 align-items: center; 15 text-align: center; 16 background-color: white; 17 border: 3px solid #38B6FF; 18 border-radius: 10px; 19 line-height: 4; 20 width: 400px; 21} 22 23.form-control:focus { 24 outline: solid 1px #38B6FF; 25} 26 27.submit-bottun { 28 margin: auto; 29 margin-top: 5%; 30 display: block; 31 align-items: center; 32 border: 3px solid #38B6FF; 33 border-radius: 10px; 34 background-color: white; 35 text-align: center; 36 font-weight: 900; 37 line-height: 4; 38 width: 100px; 39 color: #38B6FF; 40} 41 42.submit-bottun:link, 43.submit-bottun:visited, 44.submit-bottun:active { 45 color: #38B6FF; 46} 47 48.submit-bottun:hover { 49 color: white; 50 background-color: #38B6FF; 51} 52 53.nav-item img { 54 width: 30px; 55 height: 35px; 56}
home_base.html(継承元のテンプレート)
home_base.html
1{% load static %} 2 3<!doctype html> 4<html lang="ja"> 5 6 <head> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- CSS --> 12 <link rel="stylesheet" href="{% static 'css/Linguistic_HealthData/home_base.css' %}"> 13 <link rel="stylesheet" href="{% static 'css/Linguistic_HealthData/home.css' %}"> 14 15 </head> 16 17 <header> 18 {% block header %} 19 {% endblock header %} 20 </header> 21 22 <body> 23 {% block content %} 24 {% endblock content %} 25 </body> 26 27 <footer> 28 {% block footer %} 29 {% endblock footer %} 30 </footer> 31 32</html> 33
home_base.css
home_base.css
1header { 2 margin-top: 15%; 3 text-align: center; 4 font-size: 25px; 5 font-weight: 600; 6 color: #30FF95; 7 -webkit-text-stroke: 2px #38B6FF; 8}
navbar_base.html
navbar_base.html
1{% load static %} 2 3<!doctype html> 4<html lang="ja"> 5 6 <head> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- CSS --> 12 <link rel="stylesheet" href="{% static 'css/Linguistic_HealthData/navbar_base.css' %}"> 13 14 <!-- Bootstrap CSS --> 15 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 16 17 </head> 18 19 <header> 20 <p> 21 {% block header %} 22 {% endblock header %} 23 </p> 24 </header> 25 26 <body> 27 {% block content %} 28 {% endblock content %} 29 </body> 30 31 <footer> 32 <nav class="navbar navbar-expand-sm navbar-dark fixed-bottom p-3" style="background-color:#38B6FF" mt-3 mb-3"> 33 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> 34 <span class="navbar-toggler-icon"></span> 35 </button> 36 <div class="collapse navbar-collapse"> 37 <ul class="navbar-nav w-100 nav-justified"> 38 <li class="nav-item active"> 39 <a class="nav-link" href="#"> <img src="{% static 'img/home.png' %}"> </a> 40 </li> 41 <li class="nav-item"> 42 <a class="nav-link" href="#1"> <img src="{% static 'img/think.png' %}"> </a> 43 </li> 44 <li class="nav-item"> 45 <a class="nav-link" href="#2"> <img src="{% static 'img/history.png' %}"> </a> 46 </li> 47 <li class="nav-item"> 48 <a class="nav-link" href="#3"> <img src="{% static 'img/share.png' %}"> </a> 49 </li> 50 <li class="nav-item"> 51 <a class="nav-link" href="#4"> <img src="{% static 'img/with_us.png' %}"> </a> 52 </li> 53 </ul> 54 </div> 55 </nav> 56 57 <!-- Optional JavaScript --> 58 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 59 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 60 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 61 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 62 63 </footer> 64 65</html>
navbar_base.css
navbar_base.css
1.nav-item img { 2 width: 30px; 3 height: 35px; 4}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/08 08:38
2022/07/08 08:48
2022/07/08 08:52
2022/07/08 08:53