ヘッダーの上の隙間が消えない

ヘッダーの上に隙間ができてしまいます。
MacのGoogle ChromeやSafariから見た時は無いのですが、どちらもiPhoneから見ると隙間ができてしまいます。

{
margin: 0px;
padding: 0px;

}
をつけても消えませんでした。
解決法を教えていただけますと嬉しいです。

HTML
1<!DOCTYPE html>
2<html>
3  <html lang= "ja">
4  <head>
5
6  　<meta charset="UTF-8">
7  　<title>AAA</title>
8  　<link rel="stylesheet" type="text/css" href="index.css">
9  </head>
10
11  <body>
12   <div id = "container">
13   <div id = "contents">
14    <div class = "header">
15   </div>
16
17    </div>
18　　</div>
19  </body>
20</html>

CSS
1* {
2  margin: 0px;
3  padding: 0px;
4}
5
6body{
7  background-color : #ffffff;
8  margin : 0;
9}
10
11#container{
12　width : 100%;
13　position : relative;
14　height : auto !important;
15　height : 100%;
16　min-height : 100%;
17  margin-top: -25px;
18}
19
20#contents{
21  padding-bottom : 200px;
22}
23
24.header{
25  background-color : #cccccc;
26  width : 100%;
27  height : 150px;
28  margin: 0px;
29  padding: 0px;
30}
31

行動規範の内容に同意します

回答5件

とりあえずコーディングに誤記があるようでしたので、そこを直してみては？
修正後iPhoneXで確認してみましたが、特に隙間があるとかは確認できませんでした。

・HTTPのcontainer,contentsにダブルクォーテーションをつける
・ID指定なのにCSSの記述が.contentsになっているので、#contentsへ修正

投稿2019/12/02 03:09

Yorrie

総合スコア354

yukikaki

2019/12/02 08:51

修正してiPhone6sとiPhoneXSで確認しましたがうまくいきませんでした…

Yorrie

2019/12/03 02:09

HTMLを作成するとき、リセットCSSを導入していますか？ブラウザごとの既定値を一度ぶっ飛ばしておく必要があるので、導入していない場合は最上段のcssとして入れておいてください。 https://webdesign-trends.net/entry/8137#HTML5_Doctor_Reset_CSS

行動規範の内容に同意します

HTMLでviewportを明示してみるとか

投稿2019/12/01 22:16

H40831

総合スコア973

とりあえず、<div>の数に対して</div>の数が足りていません。
そこが問題の原因かはわかりませんが。

投稿2019/12/01 21:03

aoies

総合スコア331

yukikaki

2019/12/01 21:23

コピー用に書き直した際に消してしまっていたようでした。原因はそこではないようです…

aoies

2019/12/02 13:29

試したhtmlは書かれているものそのままですか？ご存知かもしれませんが、もし、containerのmarginが0でも、その内側の要素のmarginがはみ出ていると、隙間ができてしまうと思います。あとは私もあんまり詳しくありませんが、fontサイズを0にしてみると隙間が無くなったりはしないですか？

yukikaki

2019/12/02 18:18

実際に使用するものはヘッダー内に文字が入っているため違いますが、このままのコードでも確認済みです。ヘッダー内に文字が入っているものでフォントサイズを0にしてみましたが変わりませんでした。

行動規範の内容に同意します

ベストアンサー

実際に私自身で確認したところ、スマホで確認することができました。

最初の質問では、余白と聞きましたがデベロッパーツールを確認してもmarginの値は指定されていない為、そこに問題ではないという事がわかりました。

今回のケースではパソコンでは正常に表示されるが、スマホでは表示されない点を注目しました。
では、パソコンとスマホでは何が違うのでしょうか？

答えは表示領域が異なるからです。
というのも、スマートフォンではPCサイトを快適に見るために、デフォルトではわざと広めに表示領域を取っているのです。よって、PCサイトをスマートフォンで見るためには、
スマホの表示領域を合わす必要性があります。

そこで、metaタグでスマホの画面幅に表示領域を合わしていきます。
この設定を ビューポート の設定と言うので覚えておいてください。

##ビューポートの設定
私自身は、macでエディタはvisual　studiocodeを使っているのでビューポートの設定など最初の設定等は省けるので１からは書いていないのですが、今回は説明を簡単にさせていただきます。

###コード

css
1  <meta name="viewport" content="width=device-width, initial-scale=1.0">

###解説

content="width=device-width

上記コードの意味は、
widthはデバイス(device)の幅に合わせてくださいという意味です。

initial-scale=1.0"

次に倍率の指定を行なっていきます。
スマホで表示する際の倍率は上記のコードでは、1.0になっている事がわかります。

#全体コード

HTML
1<!DOCTYPE html>
2<html>
3  <html lang= "ja">
4  <head>
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  　<meta charset="UTF-8">
7  　<title>AAA</title>
8  　<link rel="stylesheet" type="text/css" href="index.css">
9  </head>
10
11<body>
12    <div id="container">
13        <div id="contents">
14            <div class="header"></div>
15        </div>
16    </div>
17</body>
18</html>
19
20

css
1
2  body{
3    background-color : #ffffff;
4    margin : 0;
5  }
6  
7  /* エラーが出ていたので、下記に記述しました */
8  /* #container{
9  　width : 100%;
10  　position : relative;
11  　height : auto !important;
12  　height : 100%;
13  　min-height : 100%;
14    margin-top: -25px;
15  } */
16 
17  /* 修正後 */
18  #container{
19       width: 100%;
20       position: relative;
21       height: auto;
22       height: 100%;
23       min-height: 100%;
24       /* margin-top: -25px; */
25       /* 上のコードは不要です */
26   }
27  
28  #contents{
29    padding-bottom : 200px;
30  }
31  
32  .header{
33    background-color : #cccccc;
34    width : 100%;
35    height : 150px;
36    margin: 0px;
37    padding: 0px;
38  }

直接関係はありませんが、親クラス・子クラスがある場合、インデントするとよりみやすいコードとなり、今後複雑なコードになってもわかりやすくなると思います。
他にもcssでは、エラーが出ていたもの・不要なものを消したコードを掲載しましたので参考にしてください。

今回のように、パソコンでは正常だがスマホでは正常に確認できなかったというバグを対処するデバッグする能力もプログラミングでは大変大切になってきます。質問者さんは、お手持ちのスマホ２台で確認したと言う点やアンドロイドはないが、アンドロイドではどうなのか？などエラーに対する姿勢は大変素晴らしいと思います。
あとは、学習を進めるうちに、原因は自ずと追求できると思います。

ちなみになのですが、javascriptを使う前提でidで管理なされているのですか？
そうでなければ、classで管理した方が混乱せずに楽かと・・・

html
1<a href="#" class="btn">hello from class</a>
2<a href="#" id="button">hello from id</a>
3<a href="#">hello</a>

css
1/* classのbtnを指定したい時 */
2.btn{
3      margin: 0;
4  }
5
6  /* id(button)を指定したい時 */
7  #button{
8      margin: 0;
9  }
10
11  /* aタグを指定したい時 
12    この時、aタグを指定しているため、aタグ全てが選択されます。*/
13  a {
14      margin: 0;
15  }

投稿2019/12/04 15:55

編集2019/12/04 16:06

退会済みユーザー

総合スコア0

yukikaki

2019/12/05 17:53

とても丁寧なご回答ありがとうございます！コピペして試してみたのですが、macとiPhoneどちらも同じように隙間が空くようになりました。どちらから見ても同じになったということはヘッダーのmargin-topをマイナスにして調整しても大丈夫になったということでいいのでしょうか…？ classとidの件もありがとうございます！こちらはjavascriptを使用するものなのでidで管理しています。

退会済みユーザー

2019/12/09 05:38 編集

マイナスにしても良いと思います。オススメはしませんが。。というのも、ヘッダーには文字や写真などなんらかのものが入ります。根本的な事ですが、ヘッダーが必要ならheaderタグをなぜ使わないのでしょうか？今回は背景色だけでしたが。。その際には、文字もマイナスにした分だけ上に行ってしまうので、見切れてしまうとは思いますが。

退会済みユーザー

2019/12/09 05:36

ちなみになのですが、質問者自身のコードには小さなミスが大変多いように感じます。不必要なところにスペース、半角のスペースも多いです。 JavaScirptを学習するとなるのでは、もう少し正確にコードを記述するようにしてみてはいかがでしょうか？

yukikaki

2019/12/11 13:57

headerタグに関しては純粋に勉強不足で知りませんでした。実践してみます。書き方に関してもこれから学んでいきたいと思います！

退会済みユーザー

2019/12/11 14:13

頑張ってみてください。また、何かご不明な点がぜひ積極的にご質問ください。私であれば協力します。

行動規範の内容に同意します

一つ疑問に思ったのですが、

{

margin: 0px;
padding: 0px;
}
をつけても消えませんでした。

と記載していましたが

css
1* {
2  margin: 0px;
3  padding: 0px;
4}

以下のコードという認識でよろしいでしょうか？
だとすれば、このセレクターは何も指示できていません。
セレクターは、定義したクラス名もしくは指定したいタグ名を記載しなければなりません。

今回の質問とは、直接関係ないので、説明は割愛させていただきます。

##> MacのGoogle ChromeやSafariから見た時は無いのですが、どちらもiPhoneから見ると隙間ができてしまいます。

隙間があるということは、大体がmarginが指定していると思ってもいいと思います。
MacのGoogle Chromeをお使いだということなので、デベロッパーツールから要素を選択し、そこでmarginなどの指定値を確認することができます。

##上記を試しても解決しなかった場合

そもそも、body自体にもmarginが初期値で指定されているので0に指定してあげなければなりません。
以下のコードで実行できます。

css
1body { margin: 0px;}

投稿2019/12/02 12:58

退会済みユーザー

総合スコア0

yukikaki

2019/12/02 18:25

Macで確認してもmarginは0でした。MacのGoogle Chromeから見るとそもそも隙間が存在しないので… bodyのmarginも0にしていますが効果がないようです。 body{ margin-top: -11px; }にしてiPhoneで確認すると隙間は消えるのですが、Macでは11px上がってしまうので…

退会済みユーザー

2019/12/03 12:01

iPhoneで確認したというのは、サーバーにあげてお使いの端末で確認したという事でしょうか？

yukikaki

2019/12/04 04:10

そうですね。確認できるのがその2台だけでAndroidでは未確認ですが…

退会済みユーザー

2019/12/05 04:20

確かめたところ、改善点は他にありました。新たに回答記事を作成したので御確認ください。

行動規範の内容に同意します

あなたの回答