--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2016/05/31

【webデザイン】ブラウザ表示で出現する謎の隙間と解決方法について

IMG_1350.jpg

こんにちは*
プロのwebデザイナー目指して、修行中のちゅぼです。

今日もお家でカタカタしております。
お仕事と言えるのかわからないし、このままやっていけるか謎ですが…*笑

最近作成しているHPで、
ブラウザで表示すると、謎の隙間が出現してしまう
現象に出くわしました。

なんとか自分で解決は出来たのですが、念のため、自分の備忘録のためにも記しますー。


誰かのお役に立てれば、幸いです。

------------------------------------------------
■ 謎の現象 その1(左右上下パターン)
------------------------------------------------

制作したHPが、Chromeではきちんと表示されるのに、Safariで左右上下になぞの隙間が出来る

《解決方法》
body タグに、margin 0, padding 0 の要素を加えると、謎の隙間が消えて解決。

《備考》
ブラウザによって、ベースとなる設定が異なるため、このような現象がおきるようです。
margin paddingのリセットです。

------------------------------------------------
■ 謎の現象 その2(右側パターン)
------------------------------------------------

制作したHPをブラウザで確認すると、右に謎の隙間が出来る。

《解決方法》
body タグに、overflow: hidden; の要素を加えると、謎の隙間が消えて解決。

《備考》
他のブログで、bodyタグを、別で囲んで(ラップして)、その要素にoverflow: hidden;すれば良いと書いてあるのを見ましたが、bodyタグに加えることで、解決しました。








以上!笑

今まで、overflow: hidden; ってあんまり使い方分かってなかったけど、
すごく便利なやつみたいです。

よし、今夜も頑張るぞー!*
スポンサーサイト

コメント

非公開コメント

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。