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

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

質問する

ただいまの
回答率

88.13%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 463
mimura_yusuke

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1 件

checkベストアンサー

0

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/28 22: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;
    }
    }

    キャンセル

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る