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

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

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

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

CSS

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

Q&A

1回答

11493閲覧

flexbox親要素の右側にできる余白の原因

szn

総合スコア6

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/09/04 12:53

編集2022/01/12 10:55

前提・実現したいこと

はじめに、max-widthを1020pxにしたサイトを作り、
今レスポンシブ対応に直しているところです。
画面幅を縮めると、display:flexを設定した要素のみ、縮んで右側に余白ができてしまいます。
(flexbox自体が左の枠外にはみ出して、少しの親要素と、
親要素からはみ出して子要素の右側だけが画面に見えている感じのものと、
ただ左端に縮んだものがあります。)
スマホサイズにすると、大体画面の2/3は余白になっています。
全てのコンテンツが画面内に収まるようにしたいです。

試したこと

・bodyタグの直下に、全体を包むdivを作り、overflow:hiddenする。
・bodyのwidthを100%にする。
・bodyにmin-widthを設定する。

よろしくお願いします。

追記(参考コード)

html

<body> <section> <div class="container> <div class="contents> </div> </div> </section> </body>

css
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow-x: hidden;
min-width: 100%;
}

.container 1{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 450px;
background-image: url(img/main.png);
background-position: center;
background-size: cover;
width: 100%;
}

.container 2{
display: flex;
max-width: 1020px;
margin-left: auto;
margin-right: auto;
}

container 1は、画面幅一杯に表示しているヒーロー画像用のsectionのcontainerで、container 2が普通のコンテンツページです。
私自身、どこが問題なのか分かっていないため、必要だと思われる部分を書き出しましたが
他に必要な箇所があれば教えていただけると助かります。

追記2

すみません。先ほど、質問を取りやめると書いたのですが、今晩もう一度追記し直します。
丁寧なアドバイスありがとうございます。

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

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

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

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

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

spookybird

2018/09/04 13:04

再現できるコードをください。エスパーじゃないんでこれだけではわかりません。
liveasnotes

2018/09/04 15:35

質問を編集した際は,通知を送る設定にしておいてください.あとコードは囲ってください(コードブロックで囲われていると,シンタックスハイライトがついて読みやすいだけでなく,コピーボタンもコード右上に付くので,コピペして検証しやすい)
yoshinavi

2018/09/04 20:23

>必要だと思われる部分を書き出しましたが・・・ → 不足しています。レイアウト不具合に関する質問の場合、不具合が再現するHTMLとCSS(場合によってJS)が提示されないと回答者は検証が出来ません。質問内容と提示コードに、誤記述を考慮しても、違いがあり過ぎです。
yoshinavi

2018/09/04 22:28

>実際の全部のコードは載せられない・・・ → 全部載せる必要はありません。不具合が再現するコード部分だけです。
yoshinavi

2018/09/04 22:39

不具合の原因のひとつに、各コードの誤記述(誤字脱字等)もあるので併せて見直されると良いです。また、提示コードの他に、不具合箇所のキャプチャー画面やイメージ図もあると、皆さんから回答をもらい易くなるかと思います。
guest

回答1

0

現段階でエスパー(笑)した感じだと,flexboxの子要素が全体的に左に寄っていて,かつ子要素のwidthが縮んでて,最左端は親要素からも突き抜けている(※①)ということらしいですが,子要素のflex-shrinkmargin,親要素のpadding等はどうなっているのでしょうか?

※①イメージ
イメージ説明

あと,以下を試したとのことですが,

  • bodyタグの直下に、全体を包むdivを作り、overflow:hiddenする。
  • bodyの**widthを100%**にする。
  • bodyにmin-widthを設定する。

この対応方法を見る限り,もしかして,flexboxの使い方もよく理解できていないのではないでしょうか?
flexboxについては,下記のページなどを参考にしてみてください

とりあえず,実物を見ないと確かなことは何も言えないので,HTML・CSSの両方を抜粋・掲載してください
抜粋する際は,そのコードをコピペするだけで状況を再現できる最小単位にしぼってください
動作確認はliveweave等ですれば良いかと思います
また各要素のスタイリングも,必要のないものは極力省いてください(その過程で原因が見つかることもあります)
それからコードは,以下のようにコードブロックで囲って載せるようにしてください
イメージ説明

質問文は編集できるので,詳細が分かれば随時,内容・タイトルを更新してください


追記(20180905)

掲載されたコードをコピペしたものです
イメージ説明

  • 属性値はちゃんと"で囲ってください.「閉じ」が抜けています
  • bodyheight二重指定はいらないです.あと!importantもできるだけ使わない方が良いです
  • jsもですが,cssのクラス名・id名の先頭に数字は使えないですし,.#なしに名前を入れると要素扱いされるので,.container 1.container 2は,.containerクラスの子孫要素の「<1>タグ」または「<2>タグ」にスタイリングしていることになります(そんなものは当然ない(文法違反である)ので,これは不正なコードとして,処理されません.注釈を入れたいなら/* こんなふうにコメントアウトしてください */.あと,セレクタに空白を入れると,子孫要素を指定する記述の意味になるので注意してください)

container 1は、画面幅一杯に表示しているヒーロー画像用のsectionのcontainer

  • HTMLと矛盾しています.掲載されたHTMLでは<section>こそが.containerのcontainer(入れ物)になっています.(HTMLの.containerのスタイルの記述が.container 1であるというなら意味は通りますが,分かりにくいので,cssの記述はHTMLに合わせてください)

container 2が普通のコンテンツページです。

  • HTMLに当該の記述が見当たりません.再現できないので,この文章が蛇足であるか,説明の不足・コードの欠落であると推測されます

必要だと思われる部分を書き出しました

「思われる」ではなく,実際に検証したうえで,きちんと確認をとれた(過去完了形の方の)コードを掲載してください.確認方法としてliveweave等のオンラインエディタを利用してはどうかという提案はすでにしました.何らかの理由でそれができないのであれば,理由も追記してください

そして示されたコードを手直ししたものが以下です
イメージ説明
(HTMLとCSSの整合性だけを重視している(質問者さんの意図は把握していない)ので,この書き換えが正しいかは分かりませんが,.container 1.containerに,.container 2.contentsにして,各要素に背景色を付けています)

問題は再現できているでしょうか?

最初に挙げられていた

画面幅を縮めると、display:flexを設定した要素のみ、縮んで右側に余白ができてしまいます。

(flexbox自体が左の枠外にはみ出して、少しの親要素と、
親要素からはみ出して子要素の右側だけが画面に見えている感じのものと、
ただ左端に縮んだものがあります。)
スマホサイズにすると、大体画面の2/3は余白になっています。

を再現する要素が全くないように感じられます

初心者と思わしき方からの質問は大抵,文章主体が多いですが,ここではコードとイラストで説明してください.変わったことをしようとしていない限り,それで十分伝わります.

まずは「過去完了形(過去形ではなく過去完了形)で」確認がとれたコードを載せることに努めてください.

投稿2018/09/04 14:23

編集2018/09/04 16:17
liveasnotes

総合スコア1284

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問