Q&A
コードをご提示ください。
一度レスポンシブデザインを反映してみると横スクロールが出ずにちゃんと反映されるのですが、F12を押してpc表示にし、再度F12を押すと横スクロールが表示されてしまいます。
F12で解除する前は横スクロールが出ないのに一度解除すると横スクロールが出てしまう原因が分かりません。各要素を確認してみてもレスポンシブに指定した幅を超えていないので原因が全く分かりません。
模写コーディングさせてもらっているページです
https://code-step.com/demo/html/ec/
<header> <div class="container header"> <h1><a href="#"><img class="header-icon" src="https://code-step.com/demo/html/ec/img/logo.svg"></a></h1> <div class="header-list"> <ul class="left-list"> <li><a href="#">ALL</a></li> <li><a href="#">NEW</a></li> <li><a href="#">VINTAGE</a></li> <li><a href="#">CATEGORY</a></li> <li><a href="#">LOOKBOOK</a></li> <li><a href="#">BLOG</a></li> </ul> <ul class="right-list"> <li><a href="#">LOGIN</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </header> <div class="container main"> <img class="main-image" src="https://code-step.com/demo/html/ec/img/item.jpg"> <div class="main-text"> <h2>TOTALLY Short Sleeve Shirt</h2> <p class="text"> テキストテキストテキストテキストテキストテキストテキスト<br/> テキストテキストテキストテキストテキストテキストテキスト<br/> テキストテキストテキストテキストテキストテキストテキスト<br/> テキストテキストテキストテキストテキストテキストテキスト<br/> テキストテキストテキストテキストテキストテキストテキスト<br/> テキストテキストテキスト </p> <p class="price">￥9,999 +tax</p> <!-----------------------------------------------------------------------------> <table class="firsttable"> <tr> <th class="color">Color</th> <th class="size">Size</th> <th class="kuurann"></th> </tr> <tr> <td>White</td> <td>S</td> <td> <select name="quantity"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>White</td> <td>M</td> <td> <select name="quantity"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>White</td> <td>L</td> <td> <select name="quantity"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> </table> <a class="add-to-cart" href="#">ADD TO CART</a> <!-----------------------------------------------------------------------------> <table class="secondtable" border="1"> <tr> <th>Size</th> <th>Chest</th> <th>Weist</th> <th>Height</th> </tr> <tr> <td class="s">S</td> <td>99~99</td> <td>99~99</td> <td>99~99</td> </tr> <tr> <td class="m">M</td> <td>99~99</td> <td>99~99</td> <td>99~99</td> </tr> <tr> <td class="l">L</td> <td>99~99</td> <td>99~99</td> <td>99~99</td> </tr> </table> </div> </div> <footer> <div class="container footer"> <p>© TOTALLY</p> </div> </footer> </body>
html { font-size: 100%; font-size: 12px; } img { width: 100%; } * { box-sizing: border-box; /*outline: 1px solid magenta;*/ } body { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: black; } /*----------------------------------------------------------------------------*/ .container { background-color: pink; max-width: 1000px; width: 100%; margin: 0 auto; margin-top: 40px; padding: 0 6.5%; } .header { text-align: center; border-bottom: 1px solid black; } .header-list { display: flex; justify-content: space-between; } .header-list ul { display: flex; padding-left: 0; margin-top: 0; } .header-list li:last-child { margin-right: 0; } .left-list li { margin-right: 15px; } .right-list li { margin-right: 15px; } .header img { width: 110px; } /*----------------------------------------------------------------------------*/ .main { display: flex; justify-content: space-between; margin-top: 70px; } .main-image { width: 50%; height: 500px; } .main-text h2 { margin: 0 0 23px 0; border-top: 1px solid black; border-bottom: 1px solid black; padding: 15px 0; font-size: 15px; } .main-text .text { line-height: 23px; } .main-text .price { margin: 35px 0px; } /*----------------------------------------------------------------------------*/ .add-to-cart { color: white; background-color: #333333; display: block; text-align: center; padding: 15px 70px; margin: 20px 0 30px 0px; } /*---------------------------------------------------------*/ .firsttable { text-align: center; width: 100%; height: 150px; } .color, .size { width: 20%; } .kuurann { width: 60%; } .firsttable td { border-top: 1px solid black; } .firsttable th, td { border-right: 1px solid black; font-weight: normal; } .firsttable th:last-child, td:last-child { border-right: none; } select { width: 90%; } /*----------------------------------------------------------*/ .secondtable { width: 100%; height: 150px; text-align: center; } .secondtable th { font-weight: normal; background-color: #CCCCCC; } .s, .m, .l { background-color: #CCCCCC; } /*----------------------------------------------------------------------------*/ footer { text-align: center; color: #808080; font-size: 6px; }
追加いたしました。お手数おかけしますがよろしくお願いいたします。
ご提示のコードを試してみましたが、普通にはみ出していました。
つまり、「一度レスポンシブデザインを反映してみると横スクロールが出ずにちゃんと反映される」という前提が再現しません。
おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。
問題再現の手順をもう少し詳しく書いていただけますか？
ご確認ありがとうございます。
上記コードを反映すると横スクロールが出てしまうため、一度原因を突き止めるために全てコードをけして、headerなど一部の要素ごとに反映をしていきました。
先ほどhtmlのみコードをすべて消して、headerのみ反映させたところ（CSSはそのままです）、質問と同じように最初にレスポンシブを反映させるとスクロールが出ないのですが、F12を解除して再度F12を押すと横スクロールが出てしまいました。
流れとしては以下のような感じです。
htmlを保存してwebページを更新する
↓
F12を押す（この段階ではスクロールが出ていません）
↓
F12を解除する
↓
再度F12を押す（この段階でスクロールが出てしまいます）
ご提示のコードから、.main footer を削除せよ、という理解でよろしいでしょうか？
やはり、普通にはみ出しています。
はい、おっしゃる通りです。自分も今試してみたのですが最初からスクロールが出ていました。確実に再現するわけではないようです、、
はみ出してしまっている原因は何なのでしょうか？そもそもbodyはhtmlがレスポンシブと同じ幅なのに突き抜けてしまう原因がわかりません、、
ヘッダにいろいろ詰め込みすぎのような気がします。
一般に、大きいものに小さいものを入れてもはみ出さないですが、小さいものに大きいものを入れるとはみ出します。
もしかしてお気づきではないのかもしれませんが、模写元もはみ出して横スクロールが発生していますが、こちらはメニュー部分だけに限定してスクロールが発生するようにしています。
まず、模写元のページをよく観察することから始めてはどうでしょうか？
ヘッダを消してみたところスクロールが出なくなりました、ありがとうございます。模写元のページにはスクロールがあったのですね、今後は確認するように気を付けます。
ヘッダの幅はレスポンシブのサイズをはみ出ていないのにスクロールが出てしまうのはなぜなのでしょうか？F12で確認したのですがしっかりレスポンシブに収まっていました
ご解決されて何よりです
自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself
コメント行き違いました。
ヘッダの中身がはみ出していると思います。
度々すみません、、マウスでリストや画像などをチェックしてみたのですが、はみ出ているところがないみたいなのですが、見えないmarginやpaddingのせいでスクロールが出てしまっているのでしょうか？
そうなのですね。
当方で試した限りでは、.right-list がはみ出していましたので、ご提示いただいていない部分に原因があるのかもしれません。
Lhankor_Mhyさんはレスポンシブの横幅はどこの位で表示していますでしょうか？
忘れましたが、たぶんiPhone12にしていたような……？
ありがとうございます、もう一度確認してみたいと思います。大変助かりました。
自己解決
