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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

Q&A

解決済

2回答

1057閲覧

スマホのサイトで一部コンテンツが横にオーバーフローしてしまう

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/12/19 07:02

前提・実現したいこと

サイトを運営している者です。

スマホ画面での示するとき、画面がわずかに横にスクロールされてしまいます。(タブレットは問題ないようです)

どうやらclassのcontainerが悪さをしているようなのですがどう直せばいいかわからず行き詰っています

よろしくお願いします。

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

FireFoxのF12で見てみたところ、<div class="container"> [オーバーフロー]と出ています。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>サイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex,nofollow,noarchive" /> <link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/fuwaimg.css"> <link rel="stylesheet" href="../css/style.css"> <script src="../js/jquery.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <script type="text/javascript" src="../js/openclose.js"></script> </head> <body> <div id="container"> <header> <div class="container wrapper"> <a href="../index.html"><img src="../img/logo.png" alt="サイト"></a> </div> <!-- end container --> </header> <div class="container"> <div class="row"> <div class="col-12" id="headernav"> <nav> <ul> <li><a href="../index.html">home</a></li> <li><a href="../about.html">about</a></li> <li><a href="../gallery.html">gallery</a></li> <li><a href="../radio.html">radio</a></li> <li><a href="../ranking.html">ranking</a></li> <li><a href="../items.html">items</a></li> </ul> </nav> </div> <section id=comics> <center> <h1>漫画タイトル</h1> <section id=note> <p>キャプションです。</p> </section> <img src="1.png" vspace="10" alt="1"> <img src="2.png" vspace="10" alt="2"> <img src="3.png" vspace="10" alt="3"> <img src="4.png" vspace="10" alt="4"> <img src="5.png" vspace="10" alt="5"> </center> </section> </div> <!--/row--> </div> <!--/container--> </div> <!--/container--> <footer> <div class="container"> <small>Copyright&copy; <a href="../index.html">サイト</a> All Rights Reserved.</small> <p class="template"><a href="https://do.gt-gt.org/" target="_blank">template by do.</a></p> </div> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="../koibumi_app/koibumi.js"></script> </body> </html>

CSS

@charset "UTF-8"; h1, h2, h3, h4, h5, img, p { margin: 0; padding: 0; } /* ========================================== 以下、デザインを決める記述です ========================================== */ body { background-size: auto auto; background-color: #f9f9f9; background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #eaeaea 4px, #eaeaea 5px); /* 以上の3行が背景のストライプです。 background-colorがベース色、background-imageが縞の色を制御しています。 ストライプの色や太さを変えたい場合は、 https://css-stripe-generator.firebaseapp.com/ で作ったCSSを上書きするといいです。 */ font-family: YuGothic,'Yu Gothic','TsukuBRdGothic-Regular','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Cambria Math','Avenir',sans-serif; } .container { background: #fff; /* コンテンツの背景色 */ } @media (max-width: 575px) { p, ul { padding-left: 10px; padding-right: 10px; } } img { max-width: 100%; } img + img { margin-left: 5px; } header img.heroimg { -o-object-fit: cover; object-fit: cover; width: 100%; height: 400px; } @media (max-width: 575px) { header img.heroimg { height: 200px; } header h1 { font-size: 150%; } header p { font-size: 12px; } } header .container { padding: 0; } header .wrapper { position: relative; } header .wrapper .inner { position: absolute; top: 5%; margin-left: 5%; } header h1, header p { color: #5264CC; padding: 0; -webkit-filter: drop-shadow(0 0 4px #c0c5cf); filter: drop-shadow(0 0 4px #c0c5cf); } #text header img.heroimg { height: 50px; } .page { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; width: 90%; margin: 30px auto; } .page a { display: block; /* ここから背景のストライプ */ background-size: auto auto; background-color: white; background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, #e2e2e2 2px, #e2e2e2 3px); /* ここまで背景のストライプ */ color: #333; padding: 3px 10px; } #note p{ font-family: sans-serif; color: black; font-size: 100%; /*border: 5px solid; border-color: black; border-radius: 10px;*/ padding: 10px; } /*漫画レイアウト*/ #comics { margin-left: auto; margin-right: auto; text-align: }

試したこと

max-widthを試しましたがあれは画像でないと意味がなさそうですね?

それからoverflowは根本的には解決しないことがわかりました。

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

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

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

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

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

recal

2021/12/19 07:58

>スマホ画面での示するとき、画面がわずかに横にスクロールされてしまいます。(タブレットは問題ないようです) 横スクロールが出た端末とOSとブラウザはなんですか? また問題の無かったタブレットとOSとブラウザはなんですか? iPhone12promaxのchromeで共有されたソースを表示した際には 横スクロールは発生しませんでした。 提示されたソース(画像等無し)だけで横スクロールが発生する確認はできましたか? それとcenterタグは廃止されてるので使わない方がいいと思います。
退会済みユーザー

退会済みユーザー

2021/12/19 08:26

横スクロールが出たのはAndroid10 FireFox最新版です 問題がなかったタブレットはiPadで同じくFireFoxです 画像なしでも横スクロールが起こるようです
hatena19

2021/12/19 09:00

bootstrap を導入しているようですが、バージョンはなんでしょうか。 あと、今回の質問内容とは関係ないと思いますが、 jQuery をHeaderで <script src="../js/jquery.js"></script> と読み込んで、さらにbodyの最後でも読み込んでいますが、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> どちらか一方だけにした方がいいでしょう。
退会済みユーザー

退会済みユーザー

2021/12/19 13:09

2.0.1です
Lhankor_Mhy

2021/12/20 05:10

「FireFoxのF12で見てみたところ、<div class="container"> [オーバーフロー]と出ています」とのことですが、それはPC版のことではないのかな、と思うのですが、PC版でも同じ現象が確認できるのでしょうか?
退会済みユーザー

退会済みユーザー

2021/12/20 05:13

PC版では横スクロールはできず、正常な状態です
Lhankor_Mhy

2021/12/20 05:38

なるほど。 そうだとすると、Firefoxの開発者ツールはスクロールが発生すると「オーバーフロー」と表示するので、そこが原因だとは限らないと思います。 ところで、PC版のFirefoxの「レスポンシブデザインモード」ですと同じ現象は起きますか?
guest

回答2

0

ベストアンサー

bootstrapをロードさせなかったところ大幅に改善し、余った<body>の部分はoverflow-x: hidden;で隠しました。

投稿2021/12/23 03:59

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

2.0.1です

Bootstrap 2.0.1 のドキュメントを見る限り、このバージョンはbootstrap.min.cssの他にbootstrap-responsive.min.cssを読み込む必要がありそうです。
Bootstrap, from Twitter 2.0.1 Documentation - BootstrapDocs

いずれにせよ、このような古いバージョン(2012年リリースなので10年前)を使う必要はないと思いますので、特に理由がないのであれば(できれば理由があったとしても)バージョン5の採用を検討してみてください。

投稿2021/12/23 03:02

Lhankor_Mhy

総合スコア36960

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問