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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

レスポンシブデザインに横スクロールが出てしまう

suzu1234
suzu1234

総合スコア21

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

-1評価

0クリップ

226閲覧

投稿2022/03/31 16:47

編集2022/04/01 19:18

一度レスポンシブデザインを反映してみると横スクロールが出ずにちゃんと反映されるのですが、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; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/04/01 00:30

コードをご提示ください。
suzu1234

2022/04/01 01:12

追加いたしました。お手数おかけしますがよろしくお願いいたします。
Lhankor_Mhy

2022/04/01 01:24

ご提示のコードを試してみましたが、普通にはみ出していました。 つまり、「一度レスポンシブデザインを反映してみると横スクロールが出ずにちゃんと反映される」という前提が再現しません。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
suzu1234

2022/04/01 01:32

ご確認ありがとうございます。 上記コードを反映すると横スクロールが出てしまうため、一度原因を突き止めるために全てコードをけして、headerなど一部の要素ごとに反映をしていきました。 先ほどhtmlのみコードをすべて消して、headerのみ反映させたところ(CSSはそのままです)、質問と同じように最初にレスポンシブを反映させるとスクロールが出ないのですが、F12を解除して再度F12を押すと横スクロールが出てしまいました。
suzu1234

2022/04/01 01:35

流れとしては以下のような感じです。 htmlを保存してwebページを更新する ↓ F12を押す(この段階ではスクロールが出ていません) ↓ F12を解除する ↓ 再度F12を押す(この段階でスクロールが出てしまいます)
Lhankor_Mhy

2022/04/01 01:37

ご提示のコードから、.main footer を削除せよ、という理解でよろしいでしょうか? やはり、普通にはみ出しています。
suzu1234

2022/04/01 01:42

はい、おっしゃる通りです。自分も今試してみたのですが最初からスクロールが出ていました。確実に再現するわけではないようです、、 はみ出してしまっている原因は何なのでしょうか?そもそもbodyはhtmlがレスポンシブと同じ幅なのに突き抜けてしまう原因がわかりません、、
Lhankor_Mhy

2022/04/01 01:44

ヘッダにいろいろ詰め込みすぎのような気がします。 一般に、大きいものに小さいものを入れてもはみ出さないですが、小さいものに大きいものを入れるとはみ出します。
Lhankor_Mhy

2022/04/01 01:49

もしかしてお気づきではないのかもしれませんが、模写元もはみ出して横スクロールが発生していますが、こちらはメニュー部分だけに限定してスクロールが発生するようにしています。 まず、模写元のページをよく観察することから始めてはどうでしょうか?
suzu1234

2022/04/01 09:09

ヘッダを消してみたところスクロールが出なくなりました、ありがとうございます。模写元のページにはスクロールがあったのですね、今後は確認するように気を付けます。
suzu1234

2022/04/01 09:10

ヘッダの幅はレスポンシブのサイズをはみ出ていないのにスクロールが出てしまうのはなぜなのでしょうか?F12で確認したのですがしっかりレスポンシブに収まっていました
Lhankor_Mhy

2022/04/01 09:14

コメント行き違いました。 ヘッダの中身がはみ出していると思います。
suzu1234

2022/04/01 09:29

度々すみません、、マウスでリストや画像などをチェックしてみたのですが、はみ出ているところがないみたいなのですが、見えないmarginやpaddingのせいでスクロールが出てしまっているのでしょうか?
Lhankor_Mhy

2022/04/01 09:46

そうなのですね。 当方で試した限りでは、.right-list がはみ出していましたので、ご提示いただいていない部分に原因があるのかもしれません。
suzu1234

2022/04/01 10:13

Lhankor_Mhyさんはレスポンシブの横幅はどこの位で表示していますでしょうか?
Lhankor_Mhy

2022/04/01 10:15

忘れましたが、たぶんiPhone12にしていたような……?
suzu1234

2022/04/01 10:17

ありがとうございます、もう一度確認してみたいと思います。大変助かりました。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。