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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1807閲覧

overflow-x: hidden; を指定しても、横スクロールができてしまいます。

Teruaki0131

総合スコア9

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/26 14:47

スマホサイズのHPを作成しています。(レスポンシブ対応中)

ハンバーガーメニューを押した際、JavaScriptでメニューが右から左に出てくるように記述しているサイトを作成中です。
デベロッパーツールを使いiPhone6/7/8での表示を確認した際、スクロールすると右側にスクロールできてしまいます。

Before
Before
After
After

スクロールはさせたくないため、以下を試しましたが改善しません。
横にスクロールしない方法を教えていただきたいです。

CSS

1html , body { 2 overflow-x: hidden; 3 overflow-y: auto; 4 }

CSS

1body { 2 overflow-x: hidden; 3 }

今のコード(リセットCSSに追加する形で記述しており、かつ①と②の記述は消している状態です)

CSS

1/*リセットCSSここから*/ 2html, body, div, span, applet, object, iframe, 3h1, h2, h3, h4, h5, h6, p, blockquote, pre, 4a, abbr, acronym, address, big, cite, code, 5del, dfn, em, img, ins, kbd, q, s, samp, 6small, strike, strong, sub, sup, tt, var, 7b, u, i, center, 8dl, dt, dd, ol, ul, li, 9fieldset, form, label, legend, 10table, caption, tbody, tfoot, thead, tr, th, td, 11article, aside, canvas, details, embed, 12figure, figcaption, footer, header, hgroup, 13menu, nav, output, ruby, section, summary, 14time, mark, audio, video { 15 margin: 0; 16 padding: 0; 17 border: 0; 18 font-size: 100%; 19 font: inherit; 20 vertical-align: baseline; 21} 22/* HTML5 display-role reset for older browsers */ 23article, aside, details, figcaption, figure, 24footer, header, hgroup, menu, nav, section { 25 display: block; 26} 27body { 28 line-height: 1; 29 font-family: -apple-system, BlinkMacSystemFont, 30 'Helvetica Nee', 'Segoe UI', HiraginoCustom, 31 'Hiragino Kaku Gothic ProN', YuGothic, 32 'Yu Gothic Medium', Meiryo, sans-serif; 33} 34

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

なにかしらの画像やブロック要素等がコンテンツの幅を広げているのだと思います。
デベロッパーツールで右側になにかはみ出している要素がないか確認してみてください。

もしくはデベロッパーツールのバグで、デベロッパーツールを閉じてページを更新して、もう一度デベロッパーツールを開くと直ることもあります。

投稿2020/01/27 05:10

isan

総合スコア77

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Teruaki0131

2020/01/31 13:13

menu(はみ出していた部分)に設定していたposition:absolute;→position:fixed;にすると解決しました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問