Q&A
もう少し具体的にHTMLおよびCSSを質問文に追記いただいたほうが回答を得られやすいと思います。
サイトの右に30pxくらいの謎の余白ができてしまい消えません。
以下を試しました。
①グーグルクロームの検証を使って原因を探してみました。
ul li タグに list-style:none;を設定していてその部分が検証でははみ出しているクラスだったので以下のようにしてスペースを消しました。それでも右のスペースはきえなかったです。
ul li{ margin:0; padding:0; font-size:0; }
②bodyにmarginとpadding共に0にする
body{ margin:0; padding:0; width:100%; }
（②でも消えませんでした。）
③他のブラウザでチェックする
safari、グーグルクローム、firefoxともに右余白がきえていませんでした。
検索して調べた限りだと余白の解消は
①余白ができる原因のクラスを見つける（例：margin-right:30pxなどなど）
②bodyにmargin:0;
padding:0;を設定する。
くらいでした。他に原因はあるのでしょうか。
ちなみにブラウザでもレスポンシブ（スマホサイズ）でも余白ができています。
よろしくお願いします。
横スクロールが出るってことですか？また原因はリストの部分とはっきりしてるんでしょうか？＜取れば消える？
該当部分のhtmlとcssを貼り付けてください。
コメントありがとうございます。全てのクラスを記載すると膨大な量になってしまいます…。どうすればよろしいでしょうか。とりあえずlistタグと周辺のクラスも追加します。ご指摘ありがとうございます。引き続きよろしくお願いします。
ginさんコメントありがとうございます。サイト制作していて気づかなったのですがたまたま昨日横にスクロール？してみたら謎の余白が出てきてしまいました。リスト部分が原因だとしたのはクロームの検証の際に他のクラスは全て枠内からはみだしていなかったのですがul liクラスをクリックした際にこのクラスだけが唯一はみだしていました。それで原因がul liと推測してnonstyleの隙間を０にしてみました…。他はどのクラスもはみだしていないのでどこが原因か今現在わかりません。
ひとまず該当すると思われる部分をまるごと削除かコメントアウトしたら右の空白が消えるかどうか確認してください。消えればそこが原因です。
了解しました！
ginさん試してみましたがダメでした。ul liタグ抜いてもダメ、親要素のクラス抜いてもダメでした。今他の要素も抜いて確認しています。
回答2件
0
ベストアンサー
どうゆうソースか不明なので、以下を追加してみてもだめでしょうか？
HTML
1<body> 2 <div id="wrapper">この中に全てのソースをつっこむ</div> 3</body>
CSS
1#wrapper { 2 width:100%; 3 overflow:hidden; 4}
試してみてくださいませ。
投稿2016/11/15 10:53
総合スコア1084
Yukitomoさん初めまして。
コメントありがとうございます。
wrapのoverflow:hiddenやっていたのですがCSSコメントアウトで一緒に消えていましてさっき戻したら余白消えました(T ^ T)
ありがとうございますm(_ _)m
えがったえがった。
わたくしもはまったことがあったので、失敗はなんちゃらのもとですね(笑)。
試行錯誤している内にちょっとどこまでが（仮）で書いていて、どこまで一時的にコメントアウトしているだけかわからなくなっていたので本当に助かりました…。
同じ過ち繰り返さないように少しずつ学んでいければと思います。
この度は本当にありがとうございますm(_ _)m
0
これだけの情報ではなんとも言えませんが、
最近はブラウザの力を借りて容易に原因究明出来ますので試して下さい。
- Chromeの場合
その余白部分にカーソルを合わせて右クリック→検証
- FFの場合
その余白部分にカーソルを合わせて右クリック→要素を調査
どの要素にmarginなりpaddingなりが設定されているのか分かると思います。
右側にスタイル定義が出ていますので、チェックボックスを外したりスタイル定義を追加したりしながら調整してください。
投稿2016/11/15 06:00
総合スコア686
コメントありがとうございます。
クロームで検証しています。
当方まだクロームの検証機能使ってすぐの初心者なのでもし良かったら使い方を教えていただけないでしょうか。
クロームの右クリックで検証をする方法で以下を試しています。
①当該箇所にカーソルを合わせて右クリック→検証
②右側に出ているhtml部分から当該箇所を探してクリック→青色がそのぶぶに該当したら修正
に２通りで行っております。
なおhtml、cssの方今追加するために編集しております。
よろしくお願いします。
そのやり方でOKです。
余白部分の幅丁度にmarginかpaddingを設定されている部分はありませんか？
青と一緒にオレンジや緑がでる場合がありますが、
オレンジはマージン、
緑はパディングです。
そうスタイルに定義されているはずです。
探し出して修正するしかありません。
頑張ってください。
空白部分にカーソル合わせて右クリックでも飛び出してる原因の要素を運よくつかまない限り<html>や<body>が選択されてしまうと思います～
飛び出している要素以外の空白部分は<html>や<body>なので。
takapieeeさんコメントありがとうございます。
あの色の違いってそういう意味だったんですか！！
助かります。
ちなみに今回はみだしていたのはulクラスの青でした…。抜いてもダメなんで今他の要素を抜いています笑
ginさんコメントありがとうございます。
運良くというのはやはり上から順番に検証という理解であっていますでしょうか？？
あと理解不足ですいません。
「飛び出している要素以外の空白部分は<html>や<body>なので。」の意味がわからないです…。
もし宜しければ解説お願いします。
私にしか通知つかないと思うので念のため・・
マージンにしろパディングにしろ、右クリックした場所がうまく「定義された場所」であればその箇所を拾ってくれますが、拾ってくれなければブラウザ全部が青くなってbodyやらhtmlやらが「定義された場所」扱いになっちゃいますよ、の意味かと思います。
そういうことです！＜takepieeeさん
html要素＝海
はみ出している要素＝岬
はみ出てない要素＝陸(って言い方変だな…)
と考えるといいかも。
でも見た目は真っ白ね。
運よく岬の部分を捕まえられれば岬を調べることができるけど、はみ出してるように見える岬じゃない部分って海ですよね。
…余計分かりづらいか…ｗ
>> ginさん
よくわかります！失礼ながら笑ってしまった・・
「この隙間はなんだ！」で右クリックして検証クリックしたら全部青くなるのはもはやデフォで、何も思わなくなりますからね。
Chromeをお使いとのことですので、Pesticide for Chromeという拡張機能あるので使ってみてはいかがでしょうか。
右クリックに外れがなくなりますよ。
takepieeeさんコメントありがとうございます。
つまり、divなりulなりクラスがうまく作れていないということでしょうか？？
岬と海の話はまだ難しくてわかりませんが、やはりクラスなりが上手く出来ておらずそれによって境目が曖昧になって、クロームでも表示されない&レイアウト崩れということでしょうか？？
コメントありがとうございます。
Pesticide for Chromeチェックしてみます。
CSS いじっていたらレイアウト崩れ&なぜか読み込まなくなってしまったので（表示はされているのですが読み込まないです。）
ちょっと頭冷やして再トライします。
もしかしたらどこかのタグが閉じ忘れているせいでずれている可能性もあるので、探ってみて下さい
検証機能の優れた所は「その場で追加削除をして確認出来る事」です。
せっかくあと少しの所まできてCSSファイルを編集しながらトライアンドエラーするのは危険です。
検証窓で「これでOK」という状態になるまでやってから、それをコピーしてCSSファイルに貼り付ける方がいいですよ。
コメントありがとうございます…。
というか検証から書き込めるなんて知らなかったです！！
みなさんのおかげで本当に勉強になります。
どちらにしても連日作業しすぎて&息が詰まっている気がしますので少しペース落としてゆっくり取り掛かってみます。
まずは検証窓で少しずつ修正をしてみます。
（慎重に）
進捗ありましたらこちらの方でコメント？します。
引き続きよろしくお願いします。
dateさんコメントありがとうございます。
一個ずつ気長に探してみます(^ ^)
今後ともよろしくお願いします。
タグチェックは昔大変でしたが、最近はツールがあるので楽です。
時間短縮で正確ですから頼りましょう。
https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja
コメントありがとうございます。
教えていただいたツールでhtmlタグのエラーは解決しました。
ただCSSの方は問題です。とりわけメイン部分に今まで効いていたCSSが全く効いていない状態です。
下手にいじるのも怖いのですが急に昨日まで効いていたCSSの一部効かないというはありえるのでしょうか。
一応エラーチェックで「}」が「]」になっていないかはチェックしたのですが他はちょっと怖くて試せないです…。
例えばあるクラス（div class="main-container"）にCSSで以下のように指定していて昨日まで普通に効いていました。
.main-container{
border-bottom: 1px solid #4baacb;
}
今直りました。
CSSいじっていたら/*のコメントアウト*/のあとに書いてあるクラスが死んでいたので前に } 置いたら元に戻りました。
（スペスミスではなく、抜けていたみたいです。一部使わないままのCSSのコードを消さずに/*..*/で置いていたのが間違いでした。）
お手数おかけしました。
あとは余白の解決に取り組みます。
とりあえず大きく3つに分けて抜く。
そのうちの1つは該当部分が含まれているのでまたそれを3つに分けて抜くって繰り返して行けば見つかると思います。
あと崩れるの前提で試したら消してほしいんですが、
-------
* {box-sizing: border-box;}
-------
これで納まったりします？
ginさんコメントありがとうございます。
さっき戻したCSSの箇所がちょうど<div class="wrap">の
.wrap{overflow:hidden;
でCSSのコメントアウト直した同時に直りました(T ^ T)
今回は上記でwrapをご指摘してくださった方がいたベストアンサーはそちらの方にしましたが、ginさん、takapieeeさんの回答にはいつも助けていただいています。
この場をお借りしてお礼を申し上げます。
まだまだ初心者でわからない事だらけですがまた何かありましたら的確なご指摘いただけると助かります。
引き続きよろしくお願いいたします。
本当にありがとうございますm(_ _)m
あなたの回答
tips
プレビュー
