ここから本文です

CSS初心者です。ページの上部にサイトマップのようなものを常時固定したくて、いろ...

kao********さん

2018/10/1323:26:19

CSS初心者です。ページの上部にサイトマップのようなものを常時固定したくて、いろいろ調べてやってみたのですが、サイトマップの上に余白?

ができてしまって、一番上に固定できませんでした。どうすれば一番上に固定できますか?(添付した画像を見て下さい)

コードです。

【HTML】
<!DOCTYPE html>
<html lang="ja">
<header class="site-header">
<nav class="gnav">
<ul class="gnav-menu">
<li class="gnav-menu-item"><a href="toppage.htm">トップページ</a></li>
<li class="gnav-menu-item"><a href="club.html">部活動</a></li>
<li class="gnav-menu-item"><a href="history.html">沿革</a></li>
<li class="gnav-menu-item"><a href="word.html">生徒の言葉</a></li>
<li class="gnav-menu-item"><a href="access.html">アクセス</a></li>
</ul>
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<head>
<meta charset="utf-8">
<title>CSSテストページ</title>
<link rel="icon" href="F:/ファイル/ホームページ/img/nishi200.gif">
<link rel="stylesheet" href="F:/ファイル/ホームページ/css/styles.css">
</head>
<body>
<h1>CSSテストページ</h1>
<p><a href="F:\ファイル\ホームページ/toppage.htm">トップページ</a></p>
<p>hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!</p>
<p
class="p2">hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!hello!!</p>
</body>
</html>

【CSS】
@charset "UTF-8";
body{
background: skyblue;
font-family:メイリオ,"Arial Black",sans-serif;
margin:0;
}
.site-header{
position: fixed;
top:0;
left:0;
width:100vw;

}

.p2{
font-size:25px;
}
.gnav-menu {

display: flex;
background: #fff;
color:#fff;
padding: 5px;
text-decoration:none;
}

.gnav-img{
margin:10px;
}

.gnav-menu-item{
margin:30px;
}
.gnav-menu-item a{
color: #333;
text-decoration: none;

li class,UTF-8&amp;quot,br&amp;gt,li&amp;gt,a&amp;gt,site-header,gnav-menu

閲覧数:
48
回答数:
3
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

acy********さん

2018/10/1420:00:16

cssの.gnav-menuにmargin:0;を追加すれば一番上に行くと思います。

この質問は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

abc********さん

2018/10/1409:49:08

位置を固定した.site-headerと背景をしていしているgnav-menuの間に改行ができています。
背景色とpaddingの記述を.site-headerに移動しては如何でしょうか。

余談ですが.site-headerのwidthは100vwだとモニターサイズによって途切れてしまうので100%がおすすめです。

プロフィール画像

カテゴリマスター

des********さん

2018/10/1409:22:28

いろいろおかしいところがあるけど……。

ul {
margin: 0;
}

で消えませんか。

ブラウザ毎に定義されているデフォルトのCSSが効いているのだと思います。


参考まで。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる