HMTLのヘッダー上部に謎の余白ができた時の対処法

独学でサイトを作りの勉強をしています。勉強を進める上で、意外なところでつまずきました。気がついたらいつの間にかヘッダー上部に謎の余白ができてしまっていたんです。

色々と調べていくと「margin設定」や「UTF-8BOM無し」などの記事が出てきましたが、今回は別の意外なところで解決する事ができました。調べてもなかなかヒットしなかったので、備忘録を兼ねて書いておきます。

余白を消すためにbodyにmargin:0;とpadding:0;を効かせる

Google先生に訪ねた時に、一番最初に教えてくれた解決策（そして一番多く掲載されていた解決策）がこれでした。

ブラウザによってデフォルトの余白（8px）が設定されているんだそうで、その余白を「0」にすれば良いという事でした。

でも、どうみても8pxじゃなくて、だいたい30pxぐらいの余白なんだよなぁ…。Chromeで検証をしてみてもmargin無いんだけどなぁ…と思いながらもとりあえず設定してみました。

body{
margin:0;
padding:0;
}

結果：解消せず。

Google先生に訪ねて、次に見つかった解決策がこちら。

HTMLの文字コードがUTF-8のBOM付きだと余白ができる場合があるんだそうな。って言っても、確かBOM無しになっているはずなんだよなぁ…と思いながら、念の為HTMLをUTF-8のBOM無しであることを確認して、再度ブラウザで表示してみる。

結果：解消せず。

悶々としながら、でも止むを得ずひとつずつ検証していくしかないか…と言う事で、HTMLのバックアップをとった後、片っ端から原因を探っていきます。

<div><section><footer>などをひとつずつ削除したりしながら、いちいちブラウザで検証していくも、なかなか原因にたどり着けず…。

<header>要素に無駄なものはないんだよなぁ…と思いながら、いじっていたらなんと解決をする事ができました！

うだうだとコードをいじりながら、Google先生に教えを請うこと、3日間。なんとなく見たサイトで

「head要素内の子要素は、記述順に注意する必要があるものが多い」

HTML5のhead内の記述 (Qiita)

との記述を発見。

自分が書いたコードを見直したところ、ビューポートの指定<meta name=”viewport” content=”width=device-width”>が、CSSの読み込みよりも後になっていたことに気づく！

もしや!?と思い、上記サイトの例に習って

の順番にしてみたところ、見事に余白がなくなっているではありませんか！！

こんなところにトラップがあったのか〜

と言う事で、無事に解決する事ができました。パチパチパチパチ。

ただし、修正した後、もう一度ビューポートの設定をCSS読み込みの後ろに設置してみたんですが、現象は再現されませんでした。もしかしたら、ビューポートの設定と一緒にいくつかの複合的要素が重なっていたのかもしれません。。。

独学で勉強していると、次々に現れてくる壁を一人で解決して乗り越えていかなければなりません。今回の「ヘッダー上の謎の余白」についても都合3日ほどかかっていて、悶々とした日々を過ごしたわけです。

ただ、解決できた（ひとつ壁を乗り越える事ができた）時の、この「やった！」感は本当に嬉しい瞬間です。おそらく、誰か教えてくれる人がいる場合はこの「感覚」はおそらく感じる事ができないのかなと。

とは言っても、「こんな時にスクールでメンターさんがいたら、きっとすぐに解決してくれるんだろうなぁ」なんてことを痛感した出来事でした。

と言う事で、こんなことにつまずきたく無いと言う人は、迷わずスクールに通いましょう！

Wordpressのオリジナルテーマの作成を当面の目標にして勉強を始めたところなのですが、IT系スクールに通ったほうがいいかなと思っていろいろ調べてみました。主要？だと思うスクールについてまとめてみましたので、よかったら参考にしてください。[…]