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

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

ただいまの
回答率

89.99%

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

受付中

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 219

yukikaki

score -1

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

  • {
    margin: 0px;
    padding: 0px;
    }
    をつけても消えませんでした。
    解決法を教えていただけますと嬉しいです。
<!DOCTYPE html>
<html>
  <html lang= "ja">
  <head>

   <meta charset="UTF-8">
   <title>AAA</title>
   <link rel="stylesheet" type="text/css" href="index.css">
  </head>

  <body>
   <div id = "container">
   <div id = "contents">
    <div class = "header">
   </div>

    </div>
  </div>
  </body>
</html>
* {
  margin: 0px;
  padding: 0px;
}

body{
  background-color : #ffffff;
  margin : 0;
}

#container{
 width : 100%;
 position : relative;
 height : auto !important;
 height : 100%;
 min-height : 100%;
  margin-top: -25px;
}

#contents{
  padding-bottom : 200px;
}

.header{
  background-color : #cccccc;
  width : 100%;
  height : 150px;
  margin: 0px;
  padding: 0px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/02 06:23

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

    キャンセル

  • 2019/12/02 22:29

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

    キャンセル

  • 2019/12/03 03:18

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/02 17:51

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

    キャンセル

  • 2019/12/03 11:09

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

    キャンセル

0

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

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

と記載していましたが

* {
  margin: 0px;
  padding: 0px;
}


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

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

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

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


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

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

body { margin: 0px;}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/03 03:25

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

    キャンセル

  • 2019/12/03 21:01

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

    キャンセル

  • 2019/12/04 13:10

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

    キャンセル

  • 2019/12/05 13:20

    確かめたところ、改善点は他にありました。

    新たに回答記事を作成したので御確認ください。

    キャンセル

0

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

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

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

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

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

ビューポートの設定

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

コード

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

解説

content="width=device-width


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

initial-scale=1.0"


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


全体コード

<!DOCTYPE html>
<html>
  <html lang= "ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="UTF-8">
   <title>AAA</title>
   <link rel="stylesheet" type="text/css" href="index.css">
  </head>

<body>
    <div id="container">
        <div id="contents">
            <div class="header"></div>
        </div>
    </div>
</body>
</html>
  body{
    background-color : #ffffff;
    margin : 0;
  }

  /* エラーが出ていたので、下記に記述しました */
  /* #container{
   width : 100%;
   position : relative;
   height : auto !important;
   height : 100%;
   min-height : 100%;
    margin-top: -25px;
  } */

  /* 修正後 */
  #container{
       width: 100%;
       position: relative;
       height: auto;
       height: 100%;
       min-height: 100%;
       /* margin-top: -25px; */
       /* 上のコードは不要です */
   }

  #contents{
    padding-bottom : 200px;
  }

  .header{
    background-color : #cccccc;
    width : 100%;
    height : 150px;
    margin: 0px;
    padding: 0px;
  }

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


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


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

<a href="#" class="btn">hello from class</a>
<a href="#" id="button">hello from id</a>
<a href="#">hello</a>
/* classのbtnを指定したい時 */
.btn{
      margin: 0;
  }

  /* id(button)を指定したい時 */
  #button{
      margin: 0;
  }

  /* aタグを指定したい時 
    この時、aタグを指定しているため、aタグ全てが選択されます。*/
  a {
      margin: 0;
  }

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/06 02:53

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

    classとidの件もありがとうございます!こちらはjavascriptを使用するものなのでidで管理しています。

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる