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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

1回答

2633閲覧

CSS Grid Layoutでフォントサイズが勝手に大きくなる

mimura_yusuke

総合スコア39

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2020/06/25 16:38

前提・実現したいこと

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画面
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>
<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 %}
</div> </body> </html>

〇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>
<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 %}
</div> </body> </html>

〇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で作成すれば問題ないのですが、意図しないフォント拡大が発生する原因が分からず、腑に落ちないので、ご教授いただければ幸いです。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<nav>の使い方が間違っています。
<nav>: ナビゲーションセクション要素 - HTML: HyperText Markup Language | MDN

こちらを参照してみてください

投稿2020/06/26 00:15

編集2020/06/26 00:19
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mimura_yusuke

2020/06/28 13:29

urswtlvin様 ご回答ありがとうございます。 ご提示いただいた<nav>の使い方を確認し、以下のとおり修正することで、フォントサイズが変わらなくなりました。 ※display:flexも追加して、li要素同士の間隔も調整しました。 〇base.py <!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'%}"> <link rel="stylesheet" type="text/css" href="{% static 'css/edit.css'%}"> </head> <body> <div class="container"> <div class="title"><span>重量記録帳</span></div> <nav class="navbar"> <ul class="flex-container"> <li class="item"><a href="{% url 'hello_home' %}">ホーム</a></li> <li class="item"><a href="{% url 'edit' %}">種目設定</a></li> <li class="item"><a href="#">記録確認</a></li> <li class="item"><a href="#">ログイン</a></li> </ul> </nav> {% block content %} {% endblock %} </div> </body> </html> 〇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; } .navbar { text-align: center; grid-row: 2 / 3; grid-column: 1 / 5; margin-bottom: 3vw; } ul { display: flex; flex-wrap: nowrap; justify-content: space-around; 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_list { font-size: 6vw; text-align: center; color: white; background-color:blue; /* border-radius: 3vw; */ margin: 2vw 0vw; grid-column: 1 / 5; } .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; } }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問