html メッセージ出力後にsubmitする方法？

質問

質問タイトルの文字数制約のため、わかりにくい表現になってしまいましたが、実現したい事は下記です。

(1) input.html で、検索条件の入力フォームを作り、入力が完了したら「検索開始」ボタンで、実際に検索処理をする search.php に遷移する。
　　私の場合は、下記で実現している。

　　　　<form method="POST" action="search.php"
　　　　<input type="submit" value="検索開始"

(2) しかし、検索処理の内容が重たい時（検索件数が多い or 検索条件が複雑等々）、「検索開始」ボタンを押してから結果が表示されるまで時間がかかりその間は画面表示に変化が無いため、その間に例えば「ただいま検索を開始しました。」というようなメッセージを表示させたい。

(3) 試しに、serach.php のトップに
　　　　echo "ただいま検索を開始しました。";
　を記載しても、（私には理由がわかりませんが）上記メッセージは search.php 側で検索処理が終わってから表示されてしまう。

(4) そこで、input.html 側で、search.php に遷移する前に、上記のようなメッセ－ジを出力したいが、その方法が良くわからない。

Web 設計に詳しい方より、簡単に実現できる方法をご教示頂きたく、よろしくお願いいたします。

回答No.1

t_ohta · ベストアンサー

<form>タグのactionで遷移先のURLを記載すると、ブラウザは本例だと search.php にリクエストデータを送信し応答を待ちます。
この時ブラウザは search.php から応答データが届くまで待ち続けるので何も反応しません。

search.php に「echo "ただいま検索を開始しました。"; 」と記述しても、その後の処理も含めて全ての処理が終わるまでサーバからブラウザに応答データを返すことはないので、処理が終わってから「ただいま検索を開始しました。」とブラウザに表示されてしまいます。

解決方法としては、一つはJavaScriptを使いinput.htmlからの検索クエリー送信を行うようにし、送信前にJavaScriptで画面を書き換えて「ただいま検索を開始しました。」を表示しておき、応答を受け取ったらJavaScriptで再度画面を書き換えるような動作にする方法。
もう一つは<form>タグのaction先はクエリーを受け付けるだけにして、すぐさま「ただいま検索を開始しました。」と表示するHTMLを返し、そのページから結果表示ページへリダイレクトで遷移（<meta>タグやJavaScriptで遅延実行）させるようにし、PHPのセッション機能を使って検索クエリーを結果表示ページに引き継いでおいて検索を実行すると言う方法が考えられます。

補足

早速のレスポンス、ありがとうございました。
php の先頭に echo 文を記載しても効果が無い理由が良くわかりました。

＞もう一つは<form>タグのaction先はクエリーを受け付けるだけにして、すぐさま「ただいま検索を開始しました。」と表示するHTMLを返し、そのページから結果表示ページへリダイレクトで遷移（<meta>タグやJavaScriptで遅延実行）させるようにし、PHPのセッション機能を使って検索クエリーを結果表示ページに引き継いでおいて検索を実行すると言う方法が考えられます。

私は、Javascript はほとんど経験がないので上記の方法でチャレンジ中で、コメント頂いたように、とりあえず「ただいま検索を開始しました。」と表示するHTML（仮に input2.html と称します。）を作り、まずはそこにへ遷移させたのですが、ここにどういう処理を記載したら良いのか良くわからず悩んでいました。（input2.html の中に、検索する処理を担当する php コードを埋め込んでもダメでした。）

もし可能でしたら、今回の様な事を実現しているサンプルコードが記載されているネット情報がありましたら、ご教示頂けないでしょうか？　厚かましいお願いになるかと思いますが、ご検討のほど、よろしくお願いいたします。

回答No.13

superside0

> ユーザにボタンをクリックさせずに（例えば一定時間後に）データ付きで遷移する、という事は html の世界では本質的に可能なのでしょうか？

metaの　refreshではformデータは送信されませんが
タイマーで、formデータをsubmitさせるというのは
JavaScriptを使えば可能でしょう。
またタイマーではなく、selectタグのプルダウンの選択を変更しただけで
Submitボタンは押してないのに
次のページに移動させるというのはよく使いますし。

ですが、タイマーでページ移動というのは、
あまりこういう場面では使わないように思いますね。
ユーザーがまだ説明を読んでいる段階かもしれませんし、
席を外しているだけかもしれませんから、
勝手にページが移動するのは不自然なので、
ユーザーからのアクションで画面遷移させるのが普通でしょう。
もちろん、チャットとかオンラインゲームなんかだと、
ユーザーのアクションなしに
Ajaxを使ってどんどん画面が書き換わっていくというのは、ありますけれども。

> 今回頂いたコメントが、「>OK不要ってことなら、」となっていたので、「OK」無しでも「OK」をクリックするのと同じ動作を実現できるのかな？と思い、

先にご紹介された　alert(); を使ったダイヤログが表示だと
「OK」or「 キャンセル」へのアクション（OKのクリック）が必要だけど、
HTML内に表示するだけなら、それが不要になりませんかね。
という提案です。

なお、selectタグの変更だけでもsubmitさせたいということであれば
そのように記載すればよいので
alert()とは　また別の話です。

補足

コメントありがとうございます。

今回は、ユーザーが一度「検索開始」をクリックして意思表示を示し、検索結果の表示が遅く画面がしばらく何も変化しないのはユーザー側にとってストレスになる可能性があるため、ユーザーがもう一度「OK」をクリックしなくても、その間に「検索中・・・・」というメッセージを出したい、という主旨でした。

何か方法がありそうなので、勉強してみます。
いろいろとありがとうございました。

回答No.12

superside0

OK不要ってことなら、

input.html側で
<div id="wait_msg" style="display:none;">只今処理中につき、しばらくお待ちください...</div>
みたいなのを埋め込んで（dispaly:noneなので最初は隠れている）

submit ボタンのonClickイベントか
formのonSubmitイベントを使って
onSubmit=" document.getElementById('wait_msg').style.display='block';return true;"
みたいにして　submit時に隠しておいたメッセージを表示させてから
search.phpから応答があるまで表示させておく
っていう方法でも　よさそうですね。

＃Ajaxでやるのが、きれいなんでしょうけど。

補足

>OK不要ってことなら、
>
>input.html側で
><div id="wait_msg" style="display:none;">只今処理中につ>き、しばらくお待ちください...</div>
>みたいなのを埋め込んで（dispaly:noneなので最初は隠れ>ている）

>submit ボタンのonClickイベントか
>formのonSubmitイベントを使って
>onSubmit=" >document.getElementById('wait_msg').style.display='block';>return true;"
>みたいにして　submit時に隠しておいたメッセージを表示>させてから
>search.phpから応答があるまで表示させておく
>っていう方法でも　よさそうですね。

すみません、上記に関して、質問させて下さい。

html で、他のモジュールに遷移する場合で遷移後のモジュールにデータを受け渡しする方法として、今回の最初の質問に記載したような以下の方法なのですが、

<form method="POST" action="main.php"
<input type="submit" value="検索開始"

上記では「提供開始」というボタンをユーザー側にクリックさせて、データ付きで遷移する、という事になりますが、ユーザにボタンをクリックさせずに（例えば一定時間後に）データ付きで遷移する、という事は html の世界では本質的に可能なのでしょうか？

例えば、下記のようにすれば３秒後に遷移できますが、
私が試行する限り、データ付きには遷移できませんでした。
<META http-equiv="Refresh" content="3;main.php"

今回の例でも、input.html から main.php に遷移する際に、
巻末に示すような transfer.php を仲介すれば、「データ検索を始めました」という主旨のメッセージ表示後、ユーザーが「OK」をクリックすれば、main.php にデータ付きで遷移できます。

今回頂いたコメントが、「>OK不要ってことなら、」となっていたので、「OK」無しでも「OK」をクリックするのと同じ動作を実現できるのかな？　と思い、コメントさせて頂きました。　以上、よろしくお願いいたします。

ーーーー transfer.php の例
<?php
$first_chart_group = $_POST['first_chart_group'];
$last_chart_group = $_POST['last_chart_group'];
?>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.4.0 for Windows">
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.3.0 for Windows">
</head>
<body>
<form method="POST" action="main.php"> <p><br>

<h1>検索を開始します。　対象件数が多いと、結果に時間がかかりますが、ご了承下さい。</h1>

<input type="hidden" name="first_chart_group" value="<?php echo $first_chart_group; ?>">
<input type="hidden" name="last_chart_group" value="<?php echo $last_chart_group; ?>">
<input type="submit" value="ＯＫ" style="font-size : medium;"><br>

</form>
</body>
</html>

回答No.11

retorofan

訂正！

また、
alert(…);
fromSubmit();

ここは上下逆にして、
fromSubmit();
alert(…);
のようにしてください。

補足

お世話になっています。取り急ぎ、２つのケースにつき試行結果をご報告いたします。

（ファイル名 input1a.html　の場合）

この投稿の最後に追記した html ソースです。

内容としては、
　<!DOCTYPE　の行を削除

alert(…);　　　　　　の順番。
fromSubmit();

以前にお話があった、</form> のダブリ解消。

＜結果＞
「ただいま検索を開始しました。OKボタン」表示出力
F12 ボタンで、下記のエラー

Uncaught ReferenceError: fromSubmit is not defined
at HTMLInputElement.<anonymous> (input1a.html:64:3)

上記の fromSubmit(); に問題あり、と指摘しているようです。

（ファイル名 input1.html　の場合）

fromSubmit();　　　　のように順番を変更。他は同じ。
alert(…);　　　　

＜結果＞
「ただいま検索を開始しました。OKボタン」表示出ない
F12 ボタンで、下記のエラー

Uncaught ReferenceError: fromSubmit is not defined
at HTMLInputElement.<anonymous> (input1.html:64:3)

------ここからが、 input1a.html （最初の方）です。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.4.0 for Windows">
<title>データベース構築/検索 サイト</title>

<style>
fieldset {
padding: 1em;
border: solid 1px red;
}
form[name="myForm"]{
width:600px;
padding: 1em;
text-align: left;
font-size : 80%;
border: solid 1px gray;
}
input[name="searchButton"]{
font-size : medium;
margin-top : 10px;
margin-left : 40px;
margin-right : 30px;
margin-bottom : 30px;
}
</style>
</head>
<body>
<h1>データベース構築/検索 サイト</h1>

<form name="myForm" method="POST" action="main.php">
<h2>＜検索対象範囲の設定＞</h2>
<fieldset>
<span>開始値</span>
<select name="first_chart_group">
<option value="">開始値</option>
<option value="0869" selected>0869 2020年01月11日</option>
<option value="0940">0940 2021年12月25日</option>
<option value="0999">0999 2023年02月25日</option>
</select>

<span>終了値</span>
<select name="last_chart_group">
<option value="">終了値</option>
<option value="0869" selected>0869 2020年01月11日</option>
<option value="0940">0940 2021年12月25日</option>
<option value="0999">0999 2023年02月25日</option>
</select>
</fieldset>

<p>
<input type="button" name="searchButton" value="検索開始">
</p>

</form>

<script type='module'>
//------------------
// start search
//------------------
document.myForm.searchButton.addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
fromSubmit();
});

//------------------
// request to server
//------------------
function formSubmit() {
const form = document.myForm;
const arg = [form.action];
if( form.method === undefined || form.method.toUpperCase() === "POST")
arg.push({method:"POST",body:new FormData(form)} );

return fetch( ...arg ).then( response =>
response.status === 200 ? response.json() : Promise.reject(response.status)
);
}
</script>
</body>
</html>

回答No.10

retorofan

<!DOCTYPE
この行は削除してください。

また、
fromSubmit();
alert(…);
ここは上下逆にして、
fromSubmit();
alert(…);
のようにしてください。

ただいま、出先に居るため、
帰ってから、こちらも、
再検証します。
以上、
よろしくお願いします。

回答No.9

retorofan

訂正

下部の三行
</form>
</body>
</html>

ここの
</form> は ダブりなので削除してください。 m(_ _)m

回答No.8

retorofan

「main.php」のソースがあれば
受信状況がこちらでも確認できるのですが・・・。

以下は修正コード
（選択メニューの日付も送るのならoption valueに加えます）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.4.0 for Windows">
<title>データベース構築/検索 サイト</title>

<style>
fieldset {
padding: 1em;
border: solid 1px red;
}
form[name="myForm"]{
width:600px;
padding: 1em;
text-align: left;
font-size : 80%;
border: solid 1px gray;
}
input[name="searchButton"]{
font-size : medium;
margin-top : 10px;
margin-left : 40px;
margin-right : 30px;
margin-bottom : 30px;
}
</style>
</head>
<body>
<h1>データベース構築/検索 サイト</h1>

<form name="myForm" method="POST" action="main.php">
<h2>＜検索対象範囲の設定＞</h2>
<fieldset>
<span>開始値</span>
<select name="first_chart_group">
<option value="">開始値</option>
<option value="0869" selected>0869 2020年01月11日</option>
<option value="0940">0940 2021年12月25日</option>
<option value="0999">0999 2023年02月25日</option>
</select>

<span>終了値</span>
<select name="last_chart_group">
<option value="">終了値</option>
<option value="0869" selected>0869 2020年01月11日</option>
<option value="0940">0940 2021年12月25日</option>
<option value="0999">0999 2023年02月25日</option>
</select>
</fieldset>

<p>
<input type="button" name="searchButton" value="検索開始">
</p>

</form>

<script type='module'>
//------------------
// start search
//------------------
document.myForm.searchButton.addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
formSubmit();
});

//------------------
// request to server
//------------------
function formSubmit() {
const form = document.myForm;
const arg = [form.action];
if( form.method === undefined || form.method.toUpperCase() === "POST")
arg.push({method:"POST",body:new FormData(form)} );

return fetch( ...arg ).then( response =>
response.status === 200 ? response.json() : Promise.reject(response.status)
);
}
</script>
</form>
</body>
</html>

補足

おはようございます。早速のコメント、ありがとうございます。この検索サイトは、同好会向けに立ち上げ中で現在LAN内部で評価中のものです。main.php　はブラウザから２つの変数を以下のように受け取って、

$first_chart_group = $_POST['first_chart_group'];
$last_chart_group = $_POST['last_chart_group'];

後は、自宅サーバー内にあるデータベース（mysql）とやりとりして検索する、という内容ですが、前述のようにまだLAN内部だけの動作なので、現時点では、main.php はそちらでは動作検証はできないと思います。

昨日、「下記にてお試しを・・・」でご提示頂いたコードを Visual Studio Code で確認したところ、以下の部分が構文エラーになっていました。

document.myForm.searchButton.addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
formSubmit();
};

先ほど、ご提示頂いたものは、")"　が追加されていて構文エラーがなくなったので、動作確認しました。ブラウザの「検索開始」ボタンをクリックすると、「192.168.2.190 の内容　　ただいま検索を開始しました。　　OKボタン」という表示が出てきましたが、更に確認したところ、

(1) OK ボタンをクリックしないと、main.php に制御が渡らないように見えます。

(2) OK ボタンをクリックしても検索結果画面に移行しないので、F12 で確認すると、

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

というエラー表示となります。

もともと実現したかったのは、「検索ボタン」をクリックした時に「ただいま検索を開始しました。」とメッセージを表示するだけで、実際には main.php に制御が移って検索処理をバックグラウンドで開始する、という事です。（上記(1)でOKボタンをクリックしてしなくても。）

以上のような状況です。

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

回答No.7

retorofan

下記にてお試しを・・・。

[修正前]
<form method="POST" action="main.php" <div align="left">
[修正後]
<form name="myForm" method="POST" action="main.php"><div align="left">

[修正前]
<input type="submit" value="検索開始" style="font-size : medium;margin-top : 10px;margin-left : 40px;margin-right : 30px;margin-bottom : 30px;">
[修正後]
<input type="button" name="searchButton" value="検索開始" style="font-size : medium;margin-top : 10px;margin-left : 40px;margin-right : 30px;margin-bottom : 30px;">

<script type='module'>
//------------------
// start search
//------------------
document.myForm.searchButton.addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
formSubmit();
};

//------------------
// request to server
//------------------
function formSubmit() {
const form = document.myForm;
const arg = [form.action];
if( form.method === undefined || form.method.toUpperCase() === "POST")
arg.push({method:"POST",body:new FormData(form)} );

return fetch( ...arg ).then( response =>
response.status === 200 ? response.json() : Promise.reject(response.status)
);
}
</script>

補足

以下のようなエラーが出ました。
取り急ぎ、ご報告します。

input.html:43 Uncaught SyntaxError: missing ) after argument list
favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
input.html:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

一応、コピペが間違っていないか確認したつもりですが。。。。。

----- 修正して、今回試行した html です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.4.0 for Windows">
<title></title>
</head>
<body>
<h2><span style="font-size : 120%;">　　　</span><span style="font-size : 150%;">データベース構築/検索 サイト<br>
</span></h2>

<form name="myForm" method="POST" action="main.php"><div align="left">

<h2>＜検索対象範囲の設定＞<br>

<br>
　　　<span style="font-size : 80%;">開始値</span>　 <select name="first_chart_group">
<OPTION>0869 　2020年01月11日
<OPTION>0940 　2021年12月25日
<OPTION>0999 　2023年02月25日
</select> <span style="font-size : 80%;">　終了値</span>　　<select name="last_chart_group">
<OPTION>
<OPTION>0869 　2020年01月11日
<OPTION>0940 　2021年12月25日
<OPTION>0999 　2023年02月25日
</select> 　　<br>
</h2>
<br>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br>
<h2><span style="font-size : 80%;"><br>
</span></h2>
<p>
<input type="button" name="searchButton" value="検索開始" style="font-size : medium;margin-top : 10px;margin-left : 40px;margin-right : 30px;margin-bottom : 30px;">

<script type='module'>
//------------------
// start search
//------------------
document.myForm.searchButton.addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
formSubmit();
};

//------------------
// request to server
//------------------
function formSubmit() {
const form = document.myForm;
const arg = [form.action];
if( form.method === undefined || form.method.toUpperCase() === "POST")
arg.push({method:"POST",body:new FormData(form)} );

return fetch( ...arg ).then( response =>
response.status === 200 ? response.json() : Promise.reject(response.status)
);
}
</script>
</form>
</body>
</html>

回答No.6

retorofan

「Console - What's New -Issues」
そこは「最新情報」タブです。

--------------------------------------------
左上に　＞　が表示され、何かコマンド入力待ちのような画面に変わりました。結局、あのスクリプトの処理が正しく実行されたのか否かは、わからなかったでした
--------------------------------------------

正しく実行されていません。

HTML内のform内全体が記述されていないため、
それ以上は対応できません。

補足

今回、メッセージが出なかった html です。　なお、遷移先は main.php です。　今回、ご報告するために、検索の条件は１つだけにしました。　開始値「0869 　2020年01月11日」、終了値を「0999 　2023年02月25日」にし、「検索開始」をクリックすると、検索処理が重たくなり約５秒後に検索結果が表示されました。

ご教示いただいたスプリクトは下の方に入っています。
私の方でミス or 勘違いの可能性大ですが、何が悪いのかをご指摘頂ければ幸いです。

以上、よろしくお願いいたします。

ーーーーー　ここから、html の内容です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 22.0.4.0 for Windows">
<title></title>
</head>
<body>
<h2><span style="font-size : 120%;">　　　</span><span style="font-size : 150%;">データベース構築/検索 サイト<br>
</span></h2>
<form method="POST" action="main.php" <div align="left">
<h2>＜検索対象範囲の設定＞<br>

<br>
　　　<span style="font-size : 80%;">開始値</span>　 <select name="first_chart_group">
<OPTION>0869 　2020年01月11日
<OPTION>0940 　2021年12月25日
<OPTION>0999 　2023年02月25日
</select> <span style="font-size : 80%;">　終了値</span>　　<select name="last_chart_group">
<OPTION>
<OPTION>0869 　2020年01月11日
<OPTION>0940 　2021年12月25日
<OPTION>0999 　2023年02月25日
</select> 　　<br>
</h2>
<br>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<br>
<h2><span style="font-size : 80%;"><br>
</span></h2>
<p><input type="submit" value="検索開始" style="font-size : medium;margin-top : 10px;margin-left : 40px;margin-right : 30px;margin-bottom : 30px;"></p>
<script type='module'>
document.querySelector('input[type="submit"]').addEventListener('click', (e) => {
e.preventDefault();
console.log("test 検索を開始");
alert('ただいま検索を開始しました');
};
</script>
</form>
</body>
</html>

回答No.5

retorofan

ブラウザが Google Chromeの場合、
右側に「何か表示された」ものがコンソールです。
その下部に
「コンソール、最新情報、問題」のタブがあるので
コンソールに青い下線があることを確認、なければ
そこをクリックします。

コンソールの上部に「○件の問題」と出ていることがあるので
そこも確認してください。

＞スタイルシートを使って、多くの件数がヒットしても、画面下の検索件数は画面スクロールの対象から外れるようにしていますが、これが今回の表示が出ない、という問題と関係あるでしょうか？

そこは、
overflow: scroll;

領域を超えたらスクロールバーが出ることになっているので
そこを動かせばすべて見えますから関係ありません。

なお、ページ内にサブミットボタンは１つという想定です。

補足

私のような初心者相手にお手数をおかけして申し訳ありません。

＞その下部に
「コンソール、最新情報、問題」のタブがあるので
コンソールに青い下線があることを確認、なければ
そこをクリックします。

何故か私の場合は、「Console - What's New -Issues」と英語表示ですが、青い下線が What's New のところにあり、Console の下には無かったので、Console をクリックしたところ、大きな空白の画面となり、左上に　＞　が表示され、何かコマンド入力待ちのような画面に変わりました。結局、あのスクリプトの処理が正しく実行されたのか否かは、わからなかったでした。

以上のような状況です。よろしくお願いいたします。

回答No.4

retorofan

Q 表示されるとしたら、PC画面のどのあたりでしょうか？
A パソコン画面の中央・上部に出ます。

なお、実際にコードが稼働しているかどうかは、
F12キーを押して、画面に出た console.log で確認できます。

<script type='module'>
document.querySelector('input[type="submit"]').addEventListener('click', (e) => {
e.preventDefault();
console.log("test 検索を開始"); // <- 追加
alert('ただいま検索を開始しました');
};
</script>

補足

早速のレスポンス感謝いたします。

新しいスプリクトを埋め込み、再試行してみましたが、
「検索開始」を押しても、画面表示は変化無し。
検索処理終了後検索結果を示す画面が表示された時、F12を押すと、右側に何か表示されたましたが、どれが console.log の内容かがわかりませんでした。elements-console-Sources というタブで、console を選択しても何も表示しませんでした。

なお、説明し忘れていましたが、search.php で検索結果を表示する際に、以下のようなスタイルシートを使って、多くの件数がヒットしても、画面下の検索件数は画面スクロールの対象から外れるようにしていますが、これが今回の表示が出ない、という問題と関係あるでしょうか？

style.css　の中身

.main{
width : 1850px;
height : 667px;
margin : 30px;
border: solid 1px;
overflow: scroll;
}

以上です。　よろしくお願いいたします。