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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

792閲覧

右側に余白が出来ているのを解決したい。

Naffchen

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/12/13 19:57

Bootstrapを使ってWebサイトを作っています。

サイトはほぼ完成し、Githubで試しにサイト公開をして細かいところを修正しようとしていたところ、768p幅以降のサイトの右側にx15pxの余白が出来ていました。以前も経験したことのある問題でしたのでコードを書くたびに気を付けながら進めていましたが、終盤で気が付き原因が分かりません。。

前回は、overflow:hidden;をbody下を<div>で囲んで付けて対処しました。
今回もこの方法が使えるかと試しましたが、ダメでした。

こちらがGithubで公開したサイトのURLです。

[https://naffchen.github.io/sample-site/]

検証ツールで見たところ、id="loading" がbodyからはみ出していることに気が付きwidthを設定したりしてみましたが、直りません。
ブレイクポイントである、768px以降になると余白が生まれます。その理由も分かりません。。

もし分かる方がいらっしゃれば原因を教えて頂けると大変有難いです。よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

416行目の</div>に対応する開始タグ<div>が見つかりませんので、これが原因かも。
あと、419行目も</a>が一つ多いです。

投稿2020/12/13 21:22

編集2020/12/13 21:23
cerfweb

総合スコア1899

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

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

Naffchen

2020/12/14 10:25

回答頂き有難うございました! 原因はご指摘の通り</div>が1つ多いことと、<div class="row">の中に納まっていない<div class="col">がありました。教えて頂いた箇所を整えて確認したところ発見することが出来ました。有難うございます!!footerの中の</a>もひとつ多かったです。バグは出ていませんでしたが以後気を付けます。 こういった右側の余白の原因に、記入ミスが関係しているということが今回身に沁みました。有難うございました!
guest

0

ここを

html

1<div class="container menu-container">

こうするとどうでしょうか。

html

1<div class="container-fluid menu-container">

containerとcontainer-fluidの違い

投稿2020/12/13 20:02

neko_daisuki

総合スコア2090

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

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

Naffchen

2020/12/14 10:27

回答頂き有難うございました! container-fluidも試しましたが、こちらのclass名が原因ではありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問