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

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

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

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

CSS

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

Q&A

解決済

1回答

987閲覧

画面の幅が収まらない

rubyprogram

総合スコア11

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/04/17 14:11

前提・実現したいこと

HTML/cssを使ってLPを作成しております。
背景画像や画像を設定している途中で横幅が画面より大きくなってしまっており解決方法が見つからず質問させて頂きました。
画像のサイズが画面より大きくなっているわけではないのにページ全体の横幅が画面サイズを大きくなっており確認すべきことがあればご教授いただければ幸いです。

該当のソースコード

----------HTML---------------------------------------------------------------------------------

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="normalize.css"> <title>栗林会計事務所</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <header> <div class="header-wrapper"> <p class="title">栗林会計事務所</p> </div> </header> <section class="question"> <p class="question-title">こんなお悩みございませんか?</p> <div class="question-first"> <span><img src="assets/question1.png" class="question-first"></span> <span><img src="assets/question2.png" class="question-first"></span> <span><img src="assets/question3.png" class="question-first"></span> </div> <div class="question-second"> <img src="assets/question4.png" class="question-second"> <img src="assets/question5.png" class="question-second"> </div> </section> </body> </html>

-----------------css--------------------------------------------------------------------------

*{ box-sizing: border-box; max-width: 100%; } html { font-size: 30px; max-width: 100%; } @media screen and (max-width: 896px){ html{ font-size: 16px; } } @media screen and (max-width: 767px){ html{ font-size: 10px; } } body { background-color: red; /*フォントの指定*/ font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif; /*行間の指定*/ line-height: 1.4; margin: 0; padding: 0; /*サイトのデフォルトとなる文字の色を指定*/ color: #333; overflow: scroll; max-width: 100%; height: auto; } /*header*/ header{ background-color: #333333; position: relative; max-width: 100%; margin-top: 2rem; padding-top: 48%; background-image: url("top.png"); background-repeat: no-repeat; background-size: cover; p.title{ position: absolute; top: -5%; left: 75%; margin: 0 1rem 0 0; padding: 0; } } /*section.question*/ section.question{ background-color: #a9a9a9; position: relative; max-width: 100%; height: 0; background-image: url("background-blue.png"); background-repeat: no-repeat; background-size: cover; padding-top: 61%; p.question-title{ position: absolute; top: 8%; left: 28%; width: 20rem; height: 2rem; text-align: center; border-bottom: solid 1px #ffffff; color: #ffffff; } .question-first{ display: flex; flex-direction: row; justify-content: space-around; } img.question-first{ max-width: 100%; width: 2rem; height: auto; } }

試したこと

・全体にbox-sizing: border-box;を設定
・各要素にmax-width:100%を設定

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

ブラウザはChromeを使っており検証ツールを確認すると、画面が横にグラグラ動くのですが何故かbodyは画面の横幅のサイズになっております。イメージ説明

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

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

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

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

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

kei344

2020/04/17 18:21

CSSではなくSCSSなどSassでは?
rubyprogram

2020/04/17 18:47

kei344さん、お疲れ様です。 申し訳ございません、SCSSになります。
guest

回答1

0

ベストアンサー

暫定対応として、以下で「画面が横にグラグラ動く」は解消できると思います。

CSS

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

画面がグラグラ動く事象は、bodyの子孫要素に「left、right」や「左右のmargin」を指定している場合も可能性があります。

例えば以下の要素があったとき、おそらく100pxぶんの横スクロールが発生しているシチュエーションもあり得ます。

CSS

1.xxx-img { 2 position: absolute; 3 left: 100px; 4}

また以下の場合も同様です。

CSS

1.aaa { 2 margin: 0 -100px; 3 width: auto; 4}

原因を追求する場合、以下の手順が考えられます。

  1. bodyのoverflow-x: hidden;をいったん解除
  2. left、right、左右のmarginの指定箇所をコメントアウトし「画面が横にグラグラ動く」事象がないことを確認
  3. 2.でコメントアウトした箇所を1つずつもとに戻し、原因となっている要素を確認 (原因は1箇所だけではない可能性もあります。)

投稿2020/04/17 21:17

new1ro

総合スコア4528

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

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

rubyprogram

2020/04/23 06:55

positionプロパティの設定も影響するんですね、勉強になります。色々試行錯誤しているうちに画面が固定されるようになりました!明確な原因は把握できていないのですが、次回起きた際には教えて頂いた流れで検証してみようと思います。ご丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問