<助けてください!> HTMLとCSSの参考書を使って、フルスクリーンのHPを作っているのですが、下の画像のようになぜか上に余白ができてしまいます。

画像

HTML、CSS | ホームページ作成21閲覧xmlns="http://www.w3.org/2000/svg">25

ベストアンサー

0

ThanksImg質問者からのお礼コメント

皆さんお忙しい中、迅速にご返信くださり 誠にありがとうございました。 皆さんのアドバイス通り、上に *{ margin: 0; } をいれて、さらに、 .main-nav内のmargin-top: 36px;を padding-topに変更したら解決しました。 今回は一番ご回答を早くくださった方にBAを差し上げたいと思います。 また機会がありましたら、皆さまどうぞよろしくお願い致します。

お礼日時:6/23 14:22

その他の回答(2件)

0

hyu********さん >・・・なぜか上に余白ができてしまいます・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; *{ margin:0; } /* 追加 */ /*共通部分 ---------------*/ html { font-size: 100%; } body { margin-top:0; font-family:"Yu Gothic Medium", "游ゴシック Medium","YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.7; color: #ffffff; } a { text-decoration: none; } img { max-width: 100%; } /*HEADER ---------------*/ .main-nav { display: flex; justify-content: flex-end; font-size: 18px; list-style: none; } .main-nav li { margin-right: 36px; } .main-nav a { color: #FFFFFF } .main-nav a:hover { color: #dcdcdc } .wrapper { max-width: 1100px; margin: 0 auto; padding: 0 4%; } /*HOME ---------------*/ .home-content{ text-align: center; margin-top:289px; } .home-content p { font-size:20px; margin: 10px 0 ; } .page-title{ font-size:20px; /*2行で太く大きい字にする*/ } /*大きな背景画像*/ .big-bg{ background-size: cover; background-position:center top; background-repeat: no-repeat; } #home{ background-image: url(https://s.yimg.jp/images/ks/official/nt/grd/prf_150.png); height:100vh; } #home .page-title{ text-transform:none; } </style> </head> <body> <div id="home" class="big-bg"> <header class="page-header"> <!--<h1>ロゴ</h1>--> <nav> <ul class="main-nav"> <li><a href="home.html">Home</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="News.html">News</a></li> <li><a href="note.htsml">Note</a></li> <li><a href="contact-me.html">Contact me</a></li> </ul> </nav> </header> <div class="home-content wrapper"> <p>2021.6.27 OPEN!</p> <h1 class="page title">Masanao Official Home Page</h1> </div> </div> </body> </html>

0

ウィンドウ一杯に描画させたいのであれば、最初に * { margin: 0; } を指定しておくべきだと思います(これを書けば上端はくっつきます)。 #それ以外でも(デフォルトのmarginは)計算が面倒になるだけですし