Q&A
CSSではなくSCSSなどSassでは？
前提・実現したいこと
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 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は画面の横幅のサイズになっております。
回答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}
原因を追求する場合、以下の手順が考えられます。
- bodyの
overflow-x: hidden;をいったん解除 - left、right、左右のmarginの指定箇所をコメントアウトし「画面が横にグラグラ動く」事象がないことを確認
- 2.でコメントアウトした箇所を1つずつもとに戻し、原因となっている要素を確認 (原因は1箇所だけではない可能性もあります。)
投稿2020/04/17 21:17
総合スコア4528
positionプロパティの設定も影響するんですね、勉強になります。色々試行錯誤しているうちに画面が固定されるようになりました！明確な原因は把握できていないのですが、次回起きた際には教えて頂いた流れで検証してみようと思います。ご丁寧にありがとうございます。
あなたの回答
tips
プレビュー
