「同じコードで表示に違いが出る件」と「Bootstrapが正しく作動しない件」

前提・実現したいこと

Bootstrapを使用してポートフォリオを作成中です。

Navbar-Togglerを使い、ハンバーガーを正しく作動させたいです。

発生している問題・エラーメッセージ

トップページ（index.html）だけやたらとNavbarが大きく表示されます。

また、Navbar-Togglerが正しく作動せず、タイトルと被ってしまいます。

該当のソースコード

HTML
1<html lang="ja">
2  <head>
3
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10    <link rel="stylesheet" href="css/style.css">
11
12    <!-- Favicon -->
13    <link rel="icon" href="img/favicon-glasses_64.png">
14
15    <!-- Font Awesome -->
16    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
17    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
18
19    <!-- Font Awesome Animation -->
20    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
21
22    <title>めがねん's Portfolio</title>
23      
24  </head>
25
26  <body>
27
28    <nav class="navbar navbar-expand-md navbar-light">
29      <div class="container-fluid">
30        <a class="navbar-brand" href="#"><img src="img/mylogo50pxblack.png" alt="ロゴ"></a>
31        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
32            <span class="navbar-toggler-icon"></span>
33        </button>
34        <div class="collapse navbar-collapse" id="navbarResponsive">
35          <ul class="navbar-nav ml-auto">
36            <li class="nav-item active">
37              <a class="nav-link" href="index.html">Home</a>
38          </li>
39            <li class="nav-item">
40              <a class="nav-link" href="about.html">About</a>
41          </li>
42            <li class="nav-item">
43              <a class="nav-link" href="works.html">Works</a>
44          </li>
45            <li class="nav-item">
46              <a class="nav-link" href="contact.html">Contact</a>
47          </li>
48          </ul>
49        </div>
50      </div>
51      </nav>
52
53  <div id="main" class="container-fluid">
54    <h2 class="page-title">why don't you work with me?</h2>
55    <h4 class="sub-title">I can cording your web site.</h4>
56  </div>
57       
58    <footer>
59      <p>&copy;meganen2020</p>
60      <a href="https://twitter.com/iammeganen"><i class="fab fa-twitter-square faa-bounce animated"></i></a>
61    </footer>
62
63    <!-- Optional JavaScript -->
64    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
65    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
66    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
67    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
68    <!-- <script src="script.js"></script> -->
69    </body>
70    </html>

CSS
1@charset "UTF-8";
2@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
3
4html {
5  font-size: 100%;
6
7}
8body {
9  width: 100%;
10  position: relative;
11  padding-bottom: 100px;
12  box-sizing: border-box;
13  font-family: 'Gotu', sans-serif;
14  line-height: 1.7;
15  background: rgb(255, 238, 0);
16  color: #432;
17}
18a {
19  color: #432;
20  text-decoration: none;
21}
22img {
23  width: 80%;
24}
25.logo {
26  width: 50px;
27  margin-top: 14px;
28}
29.page-header {
30  display: flex;
31  justify-content: space-between;
32  max-width: 100%;
33}
34.wrapper {
35  max-width: 1300px;
36  margin: 0 4%;
37  text-align: center;
38}
39nav {
40  width: 100%;
41  height: 50px;
42  position: relative;
43  font-size: 20px;
44  z-index: 1;
45}
46.navbar {
47  padding: .8rem;
48}
49.navbar-nav li {
50  padding-right: 10px;
51}
52#main {
53  width: 100%;
54  min-height: 100vh;
55  padding-top: 5rem;
56  text-align: center;
57  color: black;
58  background-image: url(../img/gate.jpg);
59  background-color: rgb(255, 238, 0);
60  background-size: cover;
61  background-position: center;
62  background-repeat: no-repeat;
63}
64.page-title {
65  font-size: 4rem;
66  text-transform: uppercase;
67  font-weight: bold;
68  color: black;
69}
70.sub-title {
71  font-size: 1.5rem;
72  font-weight: bold;
73  color: black;
74}
75/* footer */
76footer {
77  position: absolute;
78  width: 100%;
79  height: 100px;
80  background: royalblue;
81  color: white;
82  padding: 5px 0 5px 5px;
83  bottom: 0;
84  text-align: center;
85  display: flex;
86  justify-content: space-between;
87}
88footer p {
89  padding: 1rem 0 1rem 1rem;
90}
91.fa-twitter-square{
92  color: white;
93  font-size: 2em;
94  margin: .5rem 1rem 1rem 1rem;
95}
96.fa-twitter-square:hover {
97  color: yellow;
98  font-size: 2.5rem;
99}
100
101
102
103
104@media (max-width: 1200px) {
105  nav {
106    height: 4rem;
107  }  
108  .home-content {
109    margin: 0 auto;
110    text-align: center;
111  }
112  .page-title {
113    font-size: 3.5rem;
114  }
115  .page-sentence {
116    font-size: 2rem;
117  }
118  .main-nav {
119    font-size: 1rem;
120    margin-top: 10px;
121    color: black;
122  }
123  .nav-link {
124    font-size: 1.5em !important
125  }
126  .container-fluid {
127    width: 100%;
128    height: 100%;
129  }
130
131  footer {
132    width: 100%;
133  }
134}
135
136@media (max-width: 992px) {
137  #main {
138    padding-top: 2rem;
139  }
140    .page-title {
141    font-size: 2rem;
142    margin: 0 auto;
143  }
144  .sub-title {
145    font-size: 1rem;
146  }
147  .page-sentence {
148    font-size: 1rem;
149  }
150  .main-nav {
151    font-size: 1rem;
152    margin-top: 10px;
153  }
154}

試したこと

ためしに同じコードで別名のファイルを作り、
ブラウザで表示させると正しいサイズで表示されましたが(写真右側)、
この正しく表示された方のファイル名を「index.html」と書き換えると
また表示が崩れてしまいました（写真左側）。

ファイル名に依存する要因などは何か考えられますでしょうか？

よろしくお願い致します。

退会済みユーザー

2020/04/18 05:16

キャッシュだろ

退会済みユーザー

2020/04/18 05:26

ブラウザのキャッシュであればスーパーリロードしてください。お使いのOS、ブラウザによってやり方がとこなるので以下参考に。 http://www.netyasun.com/browser/reload.html

tomohikohanano

2020/04/18 05:49

asahina1979さん　BEKKOさんありがとうございます。スーパーリロードをしてみても、変化はありませんでした。

kai0310

2020/04/18 07:29

一つの質問に複数の問題を記述することは良くないでしょう。

tomohikohanano

2020/04/18 07:37

k011510さん大変失礼致しました。非常識でした。ご指摘いただいてありがとうございます。

行動規範の内容に同意します

回答3件

両方のページでキーボードのCtrl+0を押してみてください。（マックなら⌘+0）

【Google Chrome でページ画面を拡大縮小（ズーム）する - パソコントラブルＱ＆Ａ】
https://www.724685.com/weekly/qa191023.htm

投稿2020/04/18 10:27

kei344

総合スコア69424

tomohikohanano

2020/04/18 11:02

kei344さんありがとうございます。拡縮はどちらも同じでした。

kei344

2020/04/18 11:04

では、スクリーンショットが違う要素をハイライトしていますが、同じ要素（H2とか）をハイライトするようにしてみてください。

tomohikohanano

2020/04/18 13:10

添付画像を訂正しました。ご確認いただけますでしょうか？

退会済みユーザー

2020/04/18 13:16 編集

renameしてるだけのわりには違いがあるようですが

kei344

2020/04/18 14:10

To: tomohikohananoさんハイライトした要素にあたっているCSSの状態が見られればと思ったのですが、伝え方が悪かったですねすみません。また、asahina1979さんのおっしゃるように「同じコードで表示に違いが出る件」「左右のコードはまったく同じです」が成り立たないスクリーンショットになっています。「同じコードで別名のファイル」と書かれたものとは、別のファイルを確認していませんか？

退会済みユーザー

2020/04/18 14:16

OneDriveの外でrenameしてね結構コンフリクトで戻されるときがあるから

tomohikohanano

2020/04/18 15:40

その可能性があるんですね検証方法を検索してみますちなみにですが、Bootstrapが上手く作動しない件に関しては海外サイトに似たような質問があり、どうにか解決できました

tomohikohanano

2020/04/18 15:49

kei344さんたしかに「左右のコードはまったく同じです」が成り立たないですね最初に質問させていただいたあとにまた色々といじって検証していたので、原型をとどめていませんが、今あらためて冷静に「main.html」という名前で上手く表示されているものを「index.html」に名前を変えたら表示が崩れました。

行動規範の内容に同意します

こんにちは。
まずは、一つずつ解決していきましょう。

トップページ（index.html）だけやたらとNavbarが大きく表示されます。

ファイル名に依存する要因などは何か考えられますでしょうか？

ファイル名に依存することはないです。index.htmlとhello.htmlでデザインが変わってしまってはダメですからね。

では、なぜ現状として見た目が変わってしまっているのでしょうか。

同じコードではなかったのではないかと思いますので、もう一度複製してみてください。
また、ダメな場合は両方のソースコードの提示をお願いします。

投稿2020/04/18 07:45

編集2020/04/18 07:58

kai0310

総合スコア2070

退会済みユーザー

2020/04/18 07:48

右と左で開閉状態違う場所なのによくわかるな

kai0310

2020/04/18 07:57

おっと失礼しました見落としていました。

tomohikohanano

2020/04/18 08:04

ko011510さんご丁寧にありがとうございます。 VScodeでも比較しましたが、左右のコードはまったく同じです。違いはファイル名しかないのですが、仰るとおりファイル名に依存されてたら話にならないですよね。そもそもの私の環境になにか不備があるのかもしれませんが、これとは別に作ったファイルはブラウザでの表示もBootstrapも何ら問題ありませんでした。

tomohikohanano

2020/04/18 08:05

asahina1979さん開閉状態違いましたね。ツメが甘かったです。反省します。

kai0310

2020/04/18 08:06

了解しました。では、回答本文にもある様にコードの提示を行えますでしょか？

tomohikohanano

2020/04/18 09:02

申し訳ありません。バカな質問かもしれませんが「コードの提示」とはどういうことでしょうか？該当ページのコードは上に載せているのがすべてなのですが…

行動規範の内容に同意します

自己解決

Bootstrapのnavbar-toggleがその下の画像に被ってしまう減少に関しては「navbar-toggler overlay」で検索したところ、似たような質問を発見し、それを参考に解決できました。

要は「逃し場所」を用意していなかったので、以下のようなコードを書いたところ、解決できました。

HTML
1<figure class="fixed-wrap">
2	<div id="fixed">
3	</div>
4</figure>
5

CSS
1  /*--- Fixed Background Image --*/
2  figure {
3    position: relative;
4    width: 100%;
5    height: 60%;
6    margin: 0!important;
7  }
8  .fixed-wrap {
9    clip: rect(0, auto, auto, 0);
10    position: absolute;
11    top: 0;
12    left: 0;
13    width: 100%;
14    height: 100%;
15  }
16  #fixed {
17    
18    position: fixed;
19    display: block;
20    top: 0;
21    left: 0;
22    width: 100%;
23    height: 100%;
24    background-size: cover;
25    background-position: center center;
26    -webkit-transform: translateZ(0);
27            transform: translateZ(0);
28    will-change: transform;
29  }