Q&A
前提・実現したいこと
DjangoでWebアプリを作成しています。
home画面とinput画面からなり、Grid Layoutを用いてデザインしています。
タイトルとナビゲーション部分は両画面ともに同じ内容が表示されます。
bese.htmlにタイトルとナビゲーション部分を記載し、home画面及びinput画面の個別部分はそれぞれhome.html、input.htmlにそれぞれ記載しています。
なお、bese.htmlとhome.htmlはhome.cssファイルで装飾し、input.htmlはinput.cssで装飾しています。
発生している問題・エラーメッセージ
home画面からinput画面に遷移した際にナビゲーション部分のフォントサイズが意図せず拡大されます。
また、input画面のみGrid Layoutの縦横比が変化してしまいます。
※home画面の「ベンチプレス」「スクワット」「デッドリフト」の部分をクリックするとそれぞれの種目の重量を入力するinput画面に遷移する仕組み。
〇画面イメージ
home画面
input画面
該当のソースコード
〇base.html
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> <title>重量記録帳</title> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'css/home.css'%}"> <link rel="stylesheet" type="text/css" href="{% static 'css/input.css'%}"> </head> <body> <div class="container"> <div class="title"><span>重量記録帳</span></div></div> </body> </html><nav class="item nav_home"><a href="{% url 'hello_home' %}">ホーム</a></nav> <nav class="item nav_register"><a href="#">種目登録</a></nav> <nav class="item nav_record"><a href="#">過去の記録</a></nav> <nav class="item nav_login"><a href="#">ログイン</a></nav> {% block content %} {% endblock %}
〇home.html
{% extends 'base.html' %}
{% block content %}
{% for menu in menu_list %}
<div class="menu"><a href="input/{{menu.id}}" data-value="{{menu.id}}">{{menu.menu_name}}</a></div> {% endfor %} <!--テスト画面 <div class="menu"><a href="#">ベンチプレス</a></div> <div class="menu"><a href="#">スクワット</a></div> <div class="menu"><a href="#">デッドリフト</a></div> <div class="menu"><a href="#">ラットプルダウン</a></div> -->
{% endblock %}
〇input.html
{% extends 'base.html' %}
{% block content %}
<div class="selected_menu">{{ latest_rec.weight_menu }}</div>
<form method="post" action="">
{% csrf_token %}
<!--formでattrsを設定してclassを明示的にする-->
{{ form.weight_record }}Kg
<!--リンク扱いにして↑と要素が被らないようにする-->
<input class="button" type="submit" value="入力">
</form>
<div class="record latest_date">前回の日付:{{latest_rec.created_at|date:"Y-m-j"}}</div> <div class="record latest_record">前回の記録:{{latest_rec.weight_record}}Kg</div> <div class="record max_date">MAX記録日:{{max_rec.created_at|date:"Y-m-j"}}</div> <div class="record max_record">MAX重量:{{max_rec.weight_record}}Kg</div>
{% endblock %}
〇home.css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.title {
font-size: 10vw;
text-align: center;
background: white;
color: blue;
grid-column: 1 / 5;
}
.title span {
position: relative;
}
.title span::before, .title span::after {
content: "";
position: absolute;
color: blue;
border-bottom: thick solid blue;
width: 15vw;
bottom: 7vw;
}
.title span::before{
right: 50vw;
}
.title span::after{
left: 50vw;
}
.nav_home {
text-align: center;
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.nav_register {
text-align: center;
grid-row: 2 / 3;
grid-column: 2 / 3;
}
.nav_record {
text-align: center;
grid-row: 2 / 3;
grid-column: 3 / 4;
}
.nav_login {
text-align: center;
grid-row: 2 / 3;
grid-column: 4 / 5;
}
.item a {
font-size: 4.5vw;
color: blue;
display: block;
}
.menu {
font-size: 6vw;
text-align: center;
background-color: skyblue;
margin: 2vw 0vw;
grid-column: 2 / 4;
border-radius: 3vw;
}
.menu a {
color: black;
text-decoration: none;
}
@media screen and (min-width:1000px){
.item {
color: white;
font-size: 3vw;
text-align: center;
background: red;
/*
border-radius: 8px;
border: 3px solid white;
*/
}
.title { font-size: 5vw; text-align: center; grid-column: 1 / 5; }
}
〇input.css
.selected_menu {
font-size: 6vw;
text-align: center;
background-color: skyblue;
border-radius: 3vw;
grid-column: 2 / 4;
}
form {
font-size: 6vw;
text-align: center;
grid-column: 2 / 4;
}
input {
width: 20vw;
height: 5vw;
}
.record {
font-size: 5vw;
text-align: center;
margin-top: 2vw;
grid-column: 1 / 5;
}
試したこと
ナビゲーション部分をulとliで作成した場合は、上述の問題は発生していません。
〇base.html（ul、li使用バージョン）
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> <title>重量記録帳</title> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'css/home.css'%}"> <link rel="stylesheet" type="text/css" href="{% static 'css/input.css'%}"> </head> <body> <div class="container"> <div class="title"><span>重量記録帳</span></div></div> </body> </html><nav class="navbar"> <ul> <li class="item"><a href="{% url 'hello_home' %}">ホーム</a></li> <li class="item"><a href="#">種目登録</a></li> <li class="item"><a href="#">過去の記録</a></li> <li class="item"><a href="#">ログイン</a></li> </ul> </nav> {% block content %} {% endblock %}
〇home.css（ul、li使用バージョン）
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.title {
font-size: 10vw;
text-align: center;
background: white;
color: blue;
grid-column: 1 / 5;
}
.title span {
position: relative;
}
.title span::before, .title span::after {
content: "";
position: absolute;
color: blue;
border-bottom: thick solid blue;
width: 15vw;
bottom: 7vw;
}
.title span::before{
right: 50vw;
}
.title span::after{
left: 50vw;
}
.navbar {
text-align: center;
grid-row: 2 / 3;
grid-column: 1 / 5;
margin-bottom: 3vw;
}
ul {
padding: unset;
font-size: 0;
}
li {
display: inline-block;
list-style: none;
font-size: 4.5vw;
}
li:not(:last-child){
border-right: medium solid black;
}
.item a {
color: blue;
text-decoration: none;
display: block;
}
.menu {
font-size: 6vw;
text-align: center;
background-color: skyblue;
margin: 2vw 0vw;
grid-column: 2 / 4;
border-radius: 3vw;
}
.menu a {
color: black;
text-decoration: none;
}
@media screen and (min-width:1000px){
.item {
color: white;
font-size: 3vw;
text-align: center;
background: red;
/*
border-radius: 8px;
border: 3px solid white;
*/
}
.title { font-size: 5vw; text-align: center; grid-column: 1 / 5; }
}
補足情報（FW/ツールのバージョンなど）
Windows10
python3.7.4
django3.0.6
ナビゲーション部分をulとliで作成すれば問題ないのですが、意図しないフォント拡大が発生する原因が分からず、腑に落ちないので、ご教授いただければ幸いです。
回答1件
0
ベストアンサー
<nav>の使い方が間違っています。
<nav>: ナビゲーションセクション要素 - HTML: HyperText Markup Language | MDN
こちらを参照してみてください
投稿2020/06/26 00:15
編集2020/06/26 00:19
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/28 13:29