ブラウザでのコーディング確認が出来なくなってしまいました

前提・実現したいこと

コーディング初心者です。
現在LPの制作をしています。
HTMLを記述していた時には、数行書いては[Finder表示をさせて確認]ができていました。
それでいざCSSの記述に入り、ちゃんとCSSが効いているかを確認すべく、同様の手順で右クリック、
Finder表示で、ブラウザでの画面の確認をしたかったのですが、表示されるのはheaderとその下の
メイン画像のみで、画面のスクロールが全くできなくなってしまいました。
chromeのデベロッパーツールもありますが、そちらでもスクロールできませんでした。
cssにはposition fixは入れていません。
デベロッパーツールで検証もしましたが、警告の三角マークは出なかったです。
何が原因で突然このような状態になってしまったのか、全くわからず困り果てています。。。。
確認ができないことには作業が進まず、手詰まりの状態です。
同様の現象を解決した方がいらっしゃいましたら、どうかご教示頂けますようお願い申し上げます。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>スクールFamm・おうちで子どもとママ専用webデザイナー養成講座LPトップ</title> <meta name="description" content="在宅で受講できるママ専用Webデザイナー養成講座のご案内" <link rel="stylesheet" href="css/ress.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="page-header"> <p id="logo"><img src="Famm-logo.png" alt=""></p> <nav> <ul class="nav"> <li><a href="#">お問い合わせ</a></li> <li><a href="#">契約内容変更</a></li> </ul> </nav> </header> <main> <div id="mainvisual"> 　<img src="./images-page&banner/Topcreative.jpg" alt="" width="100%"> </div> <h4>LIVE配信４月期開催決定！今月も満席間近！（※３月期も募集中）</h4> <h4>無料電話説明会参加で「5,000円もらえる」キャンペーン実施中！</h4> <p><img src="Amazon.png" alt=""></p> <p>説明会終了後、申込有無のご連絡をいただいたタイミングの翌月までに、ご登録のメールアドレスにアマゾンギフト券<br>5,000円分をお送り致します。ギフト券送付の対象者については、条件がございますので、以下の「注意事項」もあわせてご確認く<br>ださい。</p> <p><a href="#">注意事項はこちら</a></p> </main>  <div class="youtube"> <iframe width="854" height="480" src="https://www.youtube.com/embed/JfgjKsFi-A0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="854" height="480" src="https://www.youtube.com/embed/dqMEQ-k0lyk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>  <article class="mark1">

@charset "UTF-8";
html{
font-size: 100%;
line-height: 1.8rem;
}
body{
font-family: "遊ゴシック体", "遊ゴシック","Yu Gothic","メイリオ", sans-serif;
margin:auto;/中央よせ/
width: 1200px;
overflow: hidden;
}
img {
max-width: 100%;
}
header {
height: 65px;
}
/header #logo{
float:left;
}/
header #logo img {
width:50%;
height:auto;
}
header ul {
display: flex;
text-align: right;
}
.nav {
list-style: none;
justify-content: flex-end;
margin-right;
}
.nav li {
display: inline;
text-align: right;
margin-left: 36px;
margin-top: 21px;
}
header a {
color: #888888;
text-decoration: none;
}
.page-header {
display: flex;
justify-content: space-between;
}
h4{
margin-top: 10px;
}

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

head内に記述したcssの部分

Atomを使用
MacbookAir M1チップ　11.2.3

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

ここにより詳細な情報を記載してください。

退会済みユーザー

2021/03/17 02:53

質問は編集可能です．本文を書いてください．

Lhankor_Mhy

2021/03/17 03:23

途中で投稿してしまいましたか？編集して詳細を記入してください。

himeneko

2021/03/17 03:52

質問文が入力できず、意図せず投稿になってしまいました。この後の編集方法はどうすればよろしいでしょうか？

himeneko

2021/03/17 04:01

質問の編集をしましたので更新しておきました。ご指摘ありがとうございました

kei344

2021/03/17 04:08

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

himeneko

2021/03/17 04:10

再度、別件として質問したほうが良さそうですね。。やり直します^^;

kei344

2021/03/17 04:10

質問文は編集できますので、放置しないことをお勧めします。

himeneko

2021/03/17 05:31

再度編集しました。更新できていると良いのですが、、

Lhankor_Mhy

2021/03/17 05:35

コードをご提示いただけないと一般論以上のことはなんとも言えないです。

himeneko

2021/03/17 05:55

htmlの途中までと、cssの記述を追記しました

himeneko

2021/03/17 05:57

コードの問題でスクロールできないとは思っていませんでした。 htmlの記述段階では問題なく表示され、スクロールもできたので、LPの全画面が表示できていました。

K_3578

2021/03/17 06:13 編集

せっかく質問テンプレートがあるのでテンプレート使いましょう。とりあえずエラーメッセージ出てないからエラーメッセージの見出しを丸々消しちゃって、該当のソースコードの見出しの所の<code>ブロックにソースコード貼り付ければ見やすくなります。下記に例示しときます。 ```HTML HTMLのソースコード ``` (一行空ける) ```CSS CSSのソースコード ```

Lhankor_Mhy

2021/03/17 06:01

回答しました。

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

回答2件

ベストアンサー

body にoverflow: hiddenを当てると、スクロールできなくなります。

css
1body{
2font-family: "遊ゴシック体", "遊ゴシック","Yu Gothic","メイリオ", sans-serif;
3margin:auto;/*中央よせ*/
4width: 1200px;
5overflow: hidden; /* ← これが原因です。 */
6}

投稿2021/03/17 05:57

Lhankor_Mhy

総合スコア36946

himeneko

2021/03/17 06:04

Lhankor_Mhy様ご回答ありがとうございます！！解決できました！！！！headerに当てるべきだったってことですよね？でもなぜこれでスクロールできなくなるのでしょうか？

K_3578

2021/03/17 06:20 編集

横槍失礼します。 overflowプロパティが要素が大きすぎる場合の表示領域を指定する物で、 hiddenだとはみ出した部分は表示しないという指定だから。これで分かるでしょうか？ついでにoverflowでどういう見た目になるかはここを見るのが宜しいかと。 https://developer.mozilla.org/ja/docs/Web/CSS/overflow

退会済みユーザー

2021/03/17 06:15 編集

> himeneko様 overflow→画面外に表示されるもの（要素の場合は指定の大きさからはみ出るもの） hidden→隠してね本来画面外にあったものを隠したため、画面に映っているモノしか表示されておらず、下の方に要素が無いので、スクロールさせる必要が無くなり、スクロール自体も出来なくなる… という説明を、Lhankor_Mhy様がしてくれるかと思います。

Lhankor_Mhy

2021/03/17 07:12 編集

> でもなぜこれでスクロールできなくなるのでしょうか？仕様です。そのように決められているのです。 > UAs must apply the 'overflow' property set on the root element to the viewport. （ユーザーエージェントはルートエレメントにセットされた overflow をビューポートに設定しなくてはなりません） https://www.w3.org/TR/CSS22/visufx.html#overflow ユーザーエージェント　＝　ブラウザルートエレメント　＝　body または html ビューポート　＝　ブラウザで表示されている部分

Lhankor_Mhy

2021/03/17 07:12

> K_3578さん > amiya-seさん補足ありがとうございました。お礼を失念しており、失礼いたしました。

K_3578

2021/03/17 07:15

>Lhankor_mhyさん回答もせずに人の回答に出しゃばってこちらこそ申し訳ないです。

退会済みユーザー

2021/03/17 08:46

> Lhankor_Mhy様横やり失礼しましたっ

himeneko

2021/03/20 09:15

皆様のコメント今読みました。気が付かなくってごめんなさい????