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

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

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

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

1回答

6179閲覧

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

keizzz15

総合スコア5

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

1グッド

2クリップ

投稿2020/07/27 10:18

編集2022/01/12 10:55

前提・実現したいこと

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👍を押しています

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

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

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

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

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

FrontEnd_Japan

2020/07/27 11:21

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

2020/07/27 12:49

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

回答1

0

少し関係がありそうな点として、
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はclass1つ付与するだけでも多くのプロパティが設定されるので、ドキュメントを熟読しつつすすめることをオススメします。正しく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> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- 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" 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/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問