ブラウザ確認中、誤って「フレームを再読み込み」をクリックしてしまった！

レポート · Nov 13, 2022

ドリームウィーバーでサイト制作中にグーグルクロームで確認していたところ、誤って「フレームを再読み込み」をクリックしてしまい、ページの上に余白が付いてしまいました。クロームの検証ツール上にも意図しないiframeが追加されております。ドリームウィーバーのライブ画面上でもページの上に余白が付いている状態です。どうすれば余白がなかった以前の状態に戻せるのでしょうか？ご回答よろしくお願いします。

レポート · Nov 14, 2022

nb993さん、こんにちは。

お書きの情報だけでは、現象の理由にたどり着けないので、回答がつかないようです。。

Chrome（クロム）ブラウザの「フレームを再読み込み」は、表示中のページのソースコードを再読み込みし、そのファイルを最後に保存した状態の表示に戻すための機能のため、これを実行したからといって、ソースコードが書き換わることはないです。

お書きいただいた内容から推察するに、対象となるページ（HTMLファイル？）に、意図しない余白を作っているソースコードが存在するようです。

そのページのソースコード（HTMLやCSSなど一式）がわかれば、該当する部分を調べることができるかもしれません（nb993さんのお仕事の守秘義務に抵触しない範囲で、提示が可能であればよいのですが）。

また、入り組んだ問題ですと、調査時間もかかるので、コミュニティの参加者の方から答えがつくのがむずかしいかもしれません。

.

レポート · Nov 14, 2022

分かりづらくて申し訳ございません。

自身で作成したソースコードは変わっておりません。ただ、ドリームウィーバーのライブプレビューとブラウザで表示すると余計な余白（ページ最上部）が付いております。

また、検証ツールのエレメンツにも見覚えのないiframe要素が追加されています。

レポート · Nov 15, 2022

nb993さん、そういう状況だったのですね。

もうひとつ確認いただきたいのですが、Dreamweaverの「デザインビュー」や、Chromeの「右クリック＞ページのソースを表示」なら、iframe要素は追加していない状態でしょうか？

もしそうなら、HTMLページのどこかにある、JavaScriptが実行されたために、その結果としてiframe要素が挿入されている可能性があります。

Dreamweaverの「ライブビュー」やChromeの「検証ツール」は、JavaScriptが実行された後のコードが表示されるため、一度確認してみてください。

解決のヒントに繋がりますと幸いです。
.

レポート · Nov 15, 2022

Chromeの『右クリック＞ページのソースを表示』で確認したところ、iframe要素は追加されておりませんでした。

レポート · Nov 15, 2022

nb993さん、「ページのソースを表示」ではiframe要素が無いということであれば、やはり、JavaScriptなど、外的なプログラムが実行された結果、そこにiframe要素が追加されているのではないでしょうか？

HTMLコードの中に、HTMLではないコードや、理解できないコードはありませんか？
もしくは、拡張子がJSなどの外部ファイル等を読み込んでいるコードはないでしょうか？

あれば、それのコードを外してみて、iframe要素が追加されるかどうかを確認してみてください。

もし、該当するものがあれば、そのコードが原因だと思われます。

.

レポート · Nov 17, 2022

HTMLファイルから直接Chromeでページを開き「ページのソースを表示」で確認したところ、理解できないコードや拡張子がJSなどの外部ファイル等を読み込んでいるコードはありませんでした。しかし、ドリームウィーバーのブラウザプレビューからページを開き「ページのソースを表示」で確認したところ、下記のソースが表示させました。

	<!doctype html>
	<html lang="en">
	<head>
	<!-- Copyright 2015 Adobe Systems Incorporated. All rights reserved. -->
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=9" ><![endif]-->
	<title>Device Preview</title>
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, maximum-scale = 1.0, minimum-scale=1.0,initial-scale=1.0" >
	<script src="js/jquery.min.js"></script>
	<script src="js/URI.js"></script>
	<script src="js/constants.js"></script>
	<script src="js/DevicePreviewUtils.js"></script>
	<script src="js/DevicePreviewSocketApp.js"></script>
	<script src="js/DevicePreviewMessageHandler.js"></script>
	<script src="js/DevicePreviewMain.js"></script>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	<body>
	<iframe id="previewApp" allowfullscreen src=""></iframe>
	<div class="overlay">
	<table class="container">
	<tr>
	<td>
	<div class="centerAlign margin2x"><img src="images/dw_logo.png"></div>
	<div class="centerAlign margin2x deviceInfo"></div>
	<div class="centerAlign margin1x browserInfo"></div>
	<div class="centerAlign margin1x osInfo"></div>
	<div class="centerAlign margin1x viewportSize"></div>
	<div class="centerAlign margin1x devicePixelRatio"></div>
	</td>
	</tr>
	</table>
	</div>
	</body>
	</html>

レポート · Nov 17, 2022

横からすみません。

Dreamweaverからブラウザを起動したプレビュー(リアルタイムプレビュー)は、Dreamweaverの編集内容を起動したブラウザのiFrame内にJavaScriptを使って即時に読み込んで表示を行います。これによって、Dreamweaverの編集内容がリアルタイムで反映されます。

iFrameを使わず、単純にDreamweaver上の内容をブラウザでその都度表示させる場合は、以下のように設定変更を行ってみてください。

Dreamweaverのメニュー > 環境設定 > リアルタイムプレビュー > 「静的ブラウザープレビューを既定値に設定」にチェックをして「適用」をクリック

設定を閉じ、あらためてDreamweaver上からブラウザでプレビューを行ってみてください。「静的ブラウザープレビュー」が有効になっている場合、iFrameでの読み込みが行われないため、おそらく余白もなくなると思います。

これはリアルタイムプレビューの動作仕様に起因するものですので、割り切って使い分けて頂ければと思います。

レポート · Nov 18, 2022

Dreamweaverのメニュー > 環境設定 > リアルタイムプレビュー > 「静的ブラウザープレビューを既定値に設定」にチェックをして「適用」の設定にしたのですが、余白は無くなりませんでした。

検証ツールでHTML のbody要素をホバーしたところ、余白の部分はbody要素のコンテンツ領域に含まれていることが分かりました。body以外の要素には含まれておりません。( marginとpaddingは０設定済です。)

レポート · Nov 18, 2022

あれ、おかしいですね。「静的ブラウザープレビュー」でもiFrameで読み込まれていますか?

Developerツールでbody要素にCSSが適用されているか確認してみては如何でしょう。

いずれにしても、Dreamweaverのプレビュー時のみの問題であれば特に気にしなくても良いのではないでしょうか。Dreamweaverでのプレビューはあくまでも制作上の目安程度にお考え頂き、サイト上でご確認頂くことを優先してください。

レポート · Nov 18, 2022

iFrameでは読み込まれていないようです。

body要素にもCSSは適用されております。

Dreamweaverのプレビューからではなく、HTML ファイルから直接ブラウザでページを開いても余白は付いているのですが、それでも問題はないのでしょうか？