ページの再読み込みを押すと、レイアウトが崩れてしまいます。

前提・実現したいこと

Adobe Dreamweaver2020+Bootstrap4で作成しています。
レイアウト崩れを解消したいです。（Firefoxのみ崩れているようです。）

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

FireFoxの表示のみですが、ページの再読み込み（リロード）を押すと、
フッターがページの上部に移動する等、レイアウトが崩れてしまいます。
特にスクロールが長くなるときに起きるようです。
（常に起きるわけではないですが、再読み込みを何度か押した際、数回起きます。）

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title>aaaaaaa | bbbbbbb</title>
<!-- Bootstrap -->
<link href="/css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="/css/midashi-style.css" rel="stylesheet">
<script src="/js/jquery-3.4.1.min.js"></script> 
<script src="/js/popper.min.js"></script> 
<script src="/js/bootstrap-4.4.1.js"></script> 
<!-- Page Parameter -->
<!-- /Page Parameter -->
</head>
<body class="fixnavbar-margin" id="">
<!--パンくずリスト--><!--メイン-->
<div class="container mt-1">
  <div class="row"> 
    <!--サイドバー-->
    <div class="col-lg-3 order-2">
      <nav id="sidebar">
        <div class="pt-5">
          <h5 class="border-sidebar"><strong>ああああああ</strong></h5>
        </div>
      </nav>
    </div>
    <div class="col-lg-9 pl-md-5 order-lg-2">
      <h1 class="midashi">いいいいいいいいいいいいいい</h1>
      <h2 class="midashi">ううううううううう </h2>
      <h3 class="midashi"> </h3>
<div class="row px-2 text-justify">
        <div class="col-lg-12">
          <section>
            <h2 class="midashi-2 mt-0">ええええええええ</h2>
            <h3 class="midashi-2">おおおおおおおおおおおおおおお</h3>
            <p>
              　この文章はダミーです。ここに文章が入ります。</p>
            <p>&nbsp;</p>
          </section>
        </div>
      </div>
      </div>
  </div>
</div>
<footer class="py-5 mt-5 bg-dark text-white">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center d-md-flex justify-content-between align-items-center">
        <ul class="nav d-flex justify-content-center">
          <li class="nav-item"> <a class="nav-link active text-white-50" href="#">HOME</a></li>
          <li class="nav-item"> <a class="nav-link text-white-50" href="#">サイトマップ</a></li>
        </ul>
        <p class="mb-0 py-1">Copyright(C) All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>
<div id="page_top"><a href="#"></a></div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */
.border-sidebar {
  border-bottom: 2px solid #A5090C;
  padding-bottom: 5px;
}
.brgp {
  background-position: 0% 100%;
  background-repeat: repeat-x;
  background-image: url(../img/header-obi.png);
  background-size: contain;
}
.my-navborder {
  border-right: 1px solid #B3B3B3;
  margin-top: 9px;
  margin-bottom: 8px;
}
.fixnavbar-margin {
  padding-top: 85px;
}
.wrap {
  overflow: hidden;
}
.h4-midashi-1 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #008b8b;
  border-bottom: 1px solid #000000;
  padding-bottom: 8px;
  margin-bottom: 1.5em;
}
h1.midashi {
  font-size: 1.5rem;
  padding-top: 0.8em;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-bottom: 0.8em; /*文字周りの余白*/
  color: #fff; /*文字色*/
  background-color: #AC0000; /*背景色*/
  border-left: 6px solid #000000; /*左線（実線 太さ 色）*/
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.6em;
}
h2.midashi {
  color: #AC0000;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
  border-bottom-style: solid;
  padding-bottom: 0.5em;
  border-bottom-width: 1px;
}
h2.midashi-2 {
  font-size: 1.5rem;
  padding-top: 0.8em;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-bottom: 0.8em; /*文字周りの余白*/
  color: #494949; /*文字色*/
  background-color: #F8F8F8; /*背景色*/
  border-left: 6px solid #A5090C; /*左線（実線 太さ 色）*/
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.6em;
}
h3.midashi {
  color: #494949;
  font-size: 1.3rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
}
h3.midashi-2 {
  color: #AC0000;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
}
h3 {
  font-size: 1.5rem;
}
h4.midashi {
  font-size: 1.5rem;
  padding-top: 0.8em;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-bottom: 0.8em; /*文字周りの余白*/
  color: #494949; /*文字色*/
  background-color: #F8F8F8; /*背景色*/
  border-left: 6px solid #A5090C; /*左線（実線 太さ 色）*/
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.6em;
}
h5.midashi {
  color: #AC0000;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
}
.top-midashi {
  font-size: 3rem;
  font-family: ‘Noto Serif Japanese’, serif;
}
.top-midashi-sf {
  font-size: 2.5rem;
  font-family: ‘Noto Serif Japanese’, serif;
  font-weight: initial;
}
#sidebar ul li {
  font-size: 0.9rem;
}
#sidebar ul li a {
  text-decoration: none;
  padding: 11px 1px 8px 1px;
  display: block;
  color: black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#accordion_menu > li {
  border: #ccc 1px solid;
  margin-bottom: -2px;
}
#accordion_menu a {
  color: #666;
}
#accordion_menu a, [data-toggle="collapse"] {
  display: block;
  padding: 10px;
  text-decoration: none;
  position: relative;
}
#accordion_menu a[data-toggle="collapse"]:hover {
  background: #e7e7e7;
}
#accordion_menu a:hover {
  background: #e7e7e7;
}
#accordion_menu li a:hover {
  background: #e7e7e7;
}
#accordion_menu li:hover {
  background: #e7e7e7;
}
#accordion_menu a[data-toggle="collapse"]::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: #666 1px solid;
  border-right: #666 1px solid;
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#accordion_menu a[aria-expanded=false]::after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  transition-duration: 0.3s;
}
#accordion_menu a[aria-expanded=true]::after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  transition-duration: 0.3s;
}
[id^="menu"] li {
  padding: 4px 10px 0px 20px;
}
#accordion_menu li {
  border-style: none;
}
#accordion_menu #menu01 li, #accordion_menu #menu02 li, #accordion_menu #menu03 li, #accordion_menu #menu04 li, #accordion_menu #menu05 li, #accordion_menu #menu06 li, #accordion_menu #menu07 li, #accordion_menu #menu8 li, #accordion_menu #menu09 li, #accordion_menu #menu10 li, #accordion_menu #menu11 li, #accordion_menu #menu12 li, #accordion_menu #menu13 li, #accordion_menu #menu14 li, #accordion_menu #menu15 li, #accordion_menu #menu16 li, #accordion_menu #menu17 li, #accordion_menu #menu18 li, #accordion_menu #menu19 li, #accordion_menu #menu20 li, #accordion_menu #menu21 li {
  border-style: none;
  text-indent: -8px;
  padding-left: 1.3em; /* アイコンと文章の間のスペース */
}
#menu01 li a:before, #menu02 li a:before, #menu03 li a:before, #menu04 li a:before, #menu05 li a:before, #menu06 li a:before, #menu07 li a:before, #menu8 li a:before, #menu09 li a:before, #menu10 li a:before, #menu11 li a:before, #menu12 li a:before, #menu13 li a:before, #menu14 li a:before, #menu15 li a:before, #menu16 li a:before, #menu17 li a:before, #menu18 li a:before, #menu19 li a:before, #menu20 li a:before, #menu21 li a:before {
  content: "\f105";
  position: relative;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  left: -0.3em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
}
#page_top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #A5090C;
  opacity: 0.6;
  z-index: 2;
}
#page_top a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
a.midashi-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #fff;
  border: 1px solid #a9a9a9;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  margin-bottom: 5px;
  color: #000;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
a.midashi-btn:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #a9a9a9;
  border-right: 2px solid #a9a9a9;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
a.midashi-btn:hover {
  background: #dcdcdc;
  color: #000;
}
a.midashi-btn:hover:before {
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}
.font-small a {
  font-size: 0.8rem;
}
.font-large a {
  font-size: 1.1rem;
}
.anchor {
  display: block;
  padding-top: 200px;
  margin-top: -200px;
}
.anchor2 {
  display: block;
  padding-top: 275px;
  margin-top: -275px;
}
.col-md-4 .page-btn h3 {
  font-size: 1.2rem;
  background-color: #f0edc9;
  color: #A5090C;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  font-weight: bold;
}

試したこと

スクロールが長くならないよう、記事を減らしたら表示されませんでした。
ただ、どうしても長くなるページもあるので、改善したいです。

補足情報（FW/ツールのバージョンなど）

Adobe Dreamweaver2020で作成しています。

FrontEnd_Japan

2020/07/27 11:21

CSSコードも記載していただけると幸いです。

keizzz15

2020/07/27 12:49

FrontEnd_Japan様本文の文章を削除し、CSSを追記しました。現状の文章量ですと、文字のズレはおそらく発生しないと思いますので、試される場合は本文の文章量を多くしてください。お手数おかけしますが、よろしくお願いいたします。

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

回答1件

少し関係がありそうな点として、
JSファイルはbodyの閉じタグ前に記述するようにしてください。
JSファイルの読み込みがdocumentの読み込みを遅くするためです。

html
1<div id="page_top"><a href="#"></a></div>
2  <script src="/js/jquery-3.4.1.min.js"></script>  // ここに追加する
3  <script src="/js/popper.min.js"></script>  // ここに追加する
4  <script src="/js/bootstrap-4.4.1.js"></script> // ここに追加する
5</body>

CSS追加分

css
1.flex {
2  display: flex;
3}
4.sidebar {
5  width: 200px;
6  margin-right: 60px;
7}
8.content {
9  max-width: 780px;
10}

html修正

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <meta name="keywords" content="" />
8    <meta name="description" content="" />
9    <title>aaaaaaa | bbbbbbb</title>
10    <!-- Bootstrap -->
11    <link
12      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
13      rel="stylesheet"
14    />
15    <link href="./style.css" rel="stylesheet" />
16    <!-- Page Parameter -->
17    <!-- /Page Parameter -->
18  </head>
19  <body class="fixnavbar-margin" id="">
20    <!--パンくずリスト--><!--メイン-->
21    <div class="container mt-1">
22      <div class="flex">
23        <!--サイドバー-->
24        <nav id="sidebar" class="sidebar">
25          <div class="pt-5">
26            <h5 class="border-sidebar"><strong>ああああああ</strong></h5>
27          </div>
28        </nav>
29        <div class="content">
30          <h1 class="midashi">いいいいいいいいいいいいいい</h1>
31          <h2 class="midashi">ううううううううう</h2>
32          <h3 class="midashi"></h3>
33          <section>
34            <h2 class="midashi-2 mt-0">ええええええええ</h2>
35            <h3 class="midashi-2">おおおおおおおおおおおおおおお</h3>
36            <p>
37              この文章はダミーです。ここに文章が入ります。この文章はダミーです。ここに文章が入ります。この文章はダミーです。ここに文章が入ります。この文章はダミーです。ここに文章が入り
38            </p>
39            <p>&nbsp;</p>
40          </section>
41        </div>
42      </div>
43    </div>
44    <footer class="py-5 mt-5 bg-dark text-white">
45      <div>
46        <div class="row">
47          <div
48            class="col-md-12 text-center d-md-flex justify-content-between align-items-center"
49          >
50            <ul class="nav d-flex justify-content-center">
51              <li class="nav-item">
52                <a class="nav-link active text-white-50" href="#">HOME</a>
53              </li>
54              <li class="nav-item">
55                <a class="nav-link text-white-50" href="#">サイトマップ</a>
56              </li>
57            </ul>
58            <p class="mb-0 py-1">Copyright(C) All rights reserved.</p>
59          </div>
60        </div>
61      </div>
62    </footer>
63    <div id="page_top"><a href="#"></a></div>
64    <script src="./jquery.min.js"></script>
65    <script src="./popper.min.js"></script>
66    <script src="./bootstrap.min.js"></script>
67  </body>
68</html>

投稿2020/07/27 11:41

編集2020/07/29 01:01

FrontEnd_Japan

総合スコア271

keizzz15

2020/07/27 13:04 編集

ありがとうございます。一度試せていただきますが、これはFirefoxに対しての対策でしょうか。

keizzz15

2020/07/27 23:50

下記のようにしましたが、改善されませんでした。 <div id="page_top"><a href="#"></a></div> <script src="../js/jquery-3.4.1.min.js"></script> <script src="../js/popper.min.js"></script> <script src="../js/bootstrap-4.4.1.js"></script> <script src="../js/font-kahen.js"></script> <script src="../js/scroll.js"></script> <script src="../js/lightbox-plus-jquery.min.js"></script> </body> </html>

FrontEnd_Japan

2020/07/29 00:38

同じ環境を私のパソコンでも実現してみましたところ同じ様に発生しました。 JSをたくさん読み込んでいるのでレンダリングブロックが生じて正しい高さが取得できていない様に思われます。JSファイルをローカルで持つのではなくCDNで取得してみては如何でしょうか。 CDNに書き換えて見たところ私の環境では崩れが解消されました。

keizzz15

2020/07/29 01:05 編集

ありがとうございます。実は、作成に制約がありまして、オフラインでも動くようにとの依頼でしてCDNにできないんです..。

FrontEnd_Japan

2020/07/29 01:04

htmlタグに設定されていたBootstrapのclass名を除外しました。 Bootstrapはclass１つ付与するだけでも多くのプロパティが設定されるので、ドキュメントを熟読しつつすすめることをオススメします。正しくclassを付与しないと予期せぬ動作を生み出す恐れがあります。回答欄にソースコードを追加掲載しました。ご確認宜しくお願いします。

keizzz15

2020/07/29 02:24

いろいろとお手数おかけし、ありがとうございます。 HTML、CSSを引用しCDNをやめてローカルよりlinkして試してみました。フッター崩れはおきていないように思いますがmdサイズ以下にしてもサイドバーが下にいかなくなりました。 .colを削除し.flex、.sidebarというclassを使用されているためでしょうか。

keizzz15

2020/07/29 03:21

ちなみにですが、htmlタグを修正する前ではCDNでも改善されませんでした。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="keywords" content=""> <meta name="description" content=""> <title>aaaaaaa | bbbbbbb</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   </head> <body class="fixnavbar-margin" id="">  <div class="container mt-1"> <div class="row">  <div class="col-lg-3 order-2"> <nav id="sidebar" class="sidebar"> <div class="pt-5"> <h5 class="border-sidebar"><strong>ああああああ</strong></h5> </div> </nav> </div> <div class="col-lg-9 pl-md-5 order-lg-2"> <h1 class="midashi">いいいいいいいいいいいいいい</h1> <h2 class="midashi">ううううううううう </h2> <h3 class="midashi"> </h3> <h2 class="midashi-2 mt-0">ええええええええ</h2> <h3 class="midashi-2">おおおおおおおおおおおおおおお</h3> <p> 　この文章はダミーです。ここに文章が入ります。この文章はダミーです。<br> </p> </div> </div> </div> <footer class="py-5 mt-5 bg-dark text-white"> <div> <div class="row"> <div class="col-md-12 text-center d-md-flex justify-content-between align-items-center" > <ul class="nav d-flex justify-content-center"> <li class="nav-item"> <a class="nav-link active text-white-50" href="#">HOME</a> </li> <li class="nav-item"> <a class="nav-link text-white-50" href="#">サイトマップ</a> </li> </ul> <p class="mb-0 py-1">Copyright(C) All rights reserved.</p> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>

FrontEnd_Japan

2020/07/29 04:06

一旦すべてのBootstrapのclassを除外してください。それで私が掲載したコードで解消されます。

FrontEnd_Japan

2020/07/29 04:38 編集

あ、すいません。フッター崩れは解消のためのコードは掲載しましたが、mdサイズ以下でのスタイルは考慮しておりません。しかし、掲載したコードでmdサイズの場合に、段落ちしてフッターの上に表示されているかと思います。

keizzz15

2020/07/29 05:12

ありがとうございます。何度もすみません。 sm、md等で表示切り替えをしたいのでカラムで分けたいのですが、それですとフッター崩れしてしまいますよね？

FrontEnd_Japan

2020/07/29 05:22 編集

崩れませんよ。フッターが崩れる原因としてBootstrapのclassが関係しているので、まずは除外してから理想形になるようにBootstrapのclassを設定していってください。

keizzz15

2020/07/29 05:43

ありがとうございます。以下、自分なりにスリム化してみましたが、何がまだ間違っていますでしょうか。（とりあえずCDNにしています） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="keywords" content=""> <meta name="description" content=""> <title>aaaaaaa | bbbbbbb</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body class="fixnavbar-margin" id=""> <div class="container mt-1"> <div class="row"> <div class="col-lg-3 order-2"> <nav id="sidebar"> <div class="pt-5"> <h5 class="border-sidebar"><strong>ああああああ</strong></h5> </div> </nav> </div> <div class="col-lg-9 pl-md-5 order-lg-2"> <p> 　この文章はダミーです。ここに文章が入ります。この文章はダミーです。 </p> </div> </div> </div> <footer class="py-5 mt-5 bg-dark text-white"> <div> <div class="row"> <div class="col-md-12 text-center d-md-flex justify-content-between align-items-center" > <ul class="nav d-flex justify-content-center"> <li class="nav-item"> <a class="nav-link active text-white-50" href="#">HOME</a> </li> <li class="nav-item"> <a class="nav-link text-white-50" href="#">サイトマップ</a> </li> </ul> <p class="mb-0 py-1">Copyright(C) All rights reserved.</p> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>

FrontEnd_Japan

2020/07/29 06:06 編集

試しに、bootstrapのJSとCSSの読み込みを除外したらフッターの崩れが起きなくなりました。色々なclassを付与されているので、最小限のHTML構成からやり直した方が良いかと思います。私もLPコーディングで閉じタグ忘れや崩れが発生した場合は、そこから改修をするのではなくすべてを消してやり直すことが多いです。面倒くさいと思われると思いますが、意外にコードもスッキリして修正前よりも出来上がりが良くなることが多いです。完全にバグが解消の手伝いができなくて申し訳ないです。私の回答が少しでも質問者様のお役に立てれば幸いです。

keizzz15

2020/07/29 07:48

いえいえ、いろいとありがとうございます。 JSを消すと確かに直りますが、それでは動きませんもんね...。 30ページくらい既に作ってしまっているので、今からの修正は厳しいですが、スクロールが長くならないように工夫して作ってみます。長いことお付き合いいただき、感謝しかありません。どうもありがとうございました。

keizzz15

2020/09/20 01:43 編集

以前、教えていただいきある程度ソースをスリム化しましたが、いまだ改善されません。リロードではなく、今度はテキストリンクを押して新たなページを開くとズレてしまいます。頻繁ではなく、10回に1回程度。リロードで改善されます。逆にリロードでは起きなくなりました。ページ読み込み時に一瞬表示が崩れるので、以下のサイトも試してみましたが改善されませんでした。 https://xia-inc.com/2018/01/31/3301/

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