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

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

新規登録して質問してみよう
ただいま回答率
85.47%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

HTML5

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

CSS

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

Q&A

解決済

1回答

988閲覧

画面の右端に余白が生じるので解消したい

Yuriplllll

総合スコア29

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

HTML5

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

CSS

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

0グッド

0クリップ

投稿2020/05/17 19:28

HP作成で画面右端に余白が生じてしまいます。
marginやpaddingを0としていますが、cssでの最初の設定に問題があるのでしょうか?

pcで見るとほんの少しの余白なのですがスマートフォンで見ると大きい余白です。
cssの最初の設定です。

/* ======================================== リセットcss ========================================= */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html{overflow-y: scroll; font-size: 62.5%; } blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;} input, textarea{margin: 0; padding: 0;} ol, ul{list-style:none;} table{border-collapse: collapse; border-spacing:0;} a:focus {outline:none;} div#test { text-align: center; position: absolute; top: 0; opacity: 0.5; } /* micro clearfix */ .cf:before, .cf:after { content: " "; display: table; } .cf:after {clear: both;} .cf {*zoom: 1;} body{ margin: 0; padding: 0; font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; color: #000000; width: 100%; height: auto; font-size: 1.6rem; }

解決できる方法があれば教えていただけるとありがたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

リセットcssに問題があるようには見えません。

一般的に以下のようなシチュエーションが考えられます。

  • Bootstrapを使用している場合、
    「.row」や「.col」が、「.container」の中にないと右側に余白が生じることがあります。

  • width: 100%;padding-leftpadding-rightが同時に設定されている要素に
    box-sizing: border-box;が指定されていない


**とりあえずの解決方法: **
「なぜか右側に余白が生じる」といった場合、とりあえず以下を記述すると横スクロールがなくなったりはします。

CSS

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

ただし上記、あくまで暫定対応です。根本の解決をするためには
どこかに「横方向のmargin」や、「width: 100%; + 横方向のpadding」が指定されている箇所を探して画面幅をはみ出ないように計算して指定してください。

投稿2020/05/17 21:21

new1ro

総合スコア4528

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

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

Yuriplllll

2020/05/18 13:39

ありがとうございました! cssの箇所でpaddingをつけていた箇所に問題を見つけることができて余白がなくなりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問