背景の下に謎の余白ができる

実現したいこと

背景の下の謎の余白を消して、すぐ下にナビゲーションを配置したいです。

前提

これに関係するかわからないんですけど、
検証ツールで見るとbodyにheadに書いてあるものが入っているんです。
htmlを見るとちゃんと記述されていました。

見本

ネットで調べたのですがimg にはvertical-align:baselineが効くと書いてありました。
が、scssで設定した背景の画像には効かなかったです。

該当のソースコード

HTML
1
2<head>
3    <meta charset="UTF-8">
4    <meta http-equiv="X-UA-Compatible" content="IE=edge">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="description" content="「蓼科ごとう農園」は、蓼科の新鮮な農産物を提供するだけでなく、蓼科の自然環境を大切に守り、後世に残すことを使命としています。">
7    <title>長野県茅野市の農園 | 蓼科ごとう農園</title>
8    <link rel="preconnect" href="https://fonts.googleapis.com">
9    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap" rel="stylesheet">
11    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
12    <linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
13    <meta name="robots" content="noindex">
14    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
15        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
16    <link rel="stylesheet" href="css/common.css">
17
18</head>
19
20
21
22
23<body>
24    <header class="header">
25        <div class="header__inner">
26            <div class="header__ttl">
27                <span>あなたは知ってる？</span><br class="blank">
28                <span>蓼科を丸ごと味わう</span><br class="blank">
29                <span>喜びを</span>
30            </div><!-- /.header__ttl -->
31
32        </div><!-- /.header-inner -->
33
34    </header><!-- /.header -->
35    <div class="down-header__inner">
36        <h1 class="header__logo">
37            <img class="header__logo_cow" src="img/logo-01.png" alt="蓼科ごとう農園のマスコットキャラクターの牛" width="96" height="93"
38                loading="lazy">
39        </h1><!-- /.header__logo -->
40    </div><!-- /.down-header__inner -->
41    <!-- for PC -->
42    <nav id="gnav" class="gnav " aria-label="メインメニュー">
43        <div class="gnav__inner">
44            <ul class="gnav__list">
45                <li class="gnav__item"><a href="#about" class="gnav__link">この農園について</a></li>
46                <li class="gnav__item"><a href="#product" class="gnav__link">製品一覧</a></li>
47                <li class="gnav__item"><a href="#news" class="gnav__link">お知らせ</a></li>
48                <li class="gnav__item gnav__item"><a href="#top"><img class="header__logo_name logo_name"
49                            src="img/logo-02.png" alt="蓼科ごとう農園" width="300" height="100" loading="lazy"></a></li>
50                <li class="gnav__item"><a href="#faq" class="gnav__link">FAQ</a></li>
51                <li class="gnav__item"><a href="#acces" class="gnav__link">アクセス</a></li>
52                <li class="gnav__item"><a href="#contact" class="gnav__link">お問い合わせ</a></li>
53            </ul><!-- /.gnav__list -->
54        </div><!-- /.gnav__inner -->
55
56    </nav><!-- /.gnav -->
57</body>
58
59</html>

scss
1.header {
2    position: relative;
3    background: $c_contact url(../img/fv.jpg) no-repeat center center/cover;
4    height: 85vh;
5}
6
7.header__inner {
8    
9    padding: 120px 30px;
10    margin-left: auto;
11    margin-right: auto;
12}
13.header__ttl {
14    position: absolute;
15    bottom: 120px;
16}
17.header__ttl>span {
18    background: #fff;
19    padding: 7px;
20    display: block;
21    font-size: 24px;
22    line-height: 1;
23    font-weight: 700;
24    max-width: 230px;
25    margin-top: 6px;
26    &:last-child {
27        max-width: 86px;
28    }
29}
30.blank {
31    display: none;
32}
33
34.down-header__inner {
35    background: $c_bg;
36    border-radius: 50%;
37    width: 154px;
38    height: 154px;
39    padding: 30px;
40    position: relative;
41    top: -75px;
42    left: 50%;
43    transform: translateX(-50%);
44    z-index: 1000;
45}
46
47.header__logo_cow {
48    text-align: center;
49}
50@include small {
51    .header__ttl>span {
52        font-size: 30px;
53        max-width: 430px;
54        margin-top: 6px;
55        &:last-child {
56            max-width: 106px;
57        }
58    }
59}
60
61
62
63.gnav {
64    background: $c_bg;
65    height: 200px;
66}
67
68.gnav__inner {
69    padding-left: 15px;
70    padding-right: 15px;
71    margin-left: auto;
72    margin-right: auto;
73}
74
75.gnav__item {
76    display: none;
77}
78
79.header__logo_name {
80    margin: 0 auto;
81}
82
83@include medium {
84    .gnav__item {
85        display: block;
86        margin-left: 4%;
87
88        &:first-child {
89            margin-left: 0;
90        }
91    }
92
93    .gnav__link {
94        font-size: clamp(16px, 2.8vw, 14px);
95        font-weight: 700;
96    }
97
98    .header__logo_name {
99        text-align: center;
100        position: absolute;
101        top: -80px;
102        left: 50%;
103        transform: translateX(-50%);
104    }
105
106    .gnav__list {
107        display: flex;
108        align-items: center;
109        justify-content: center;
110        position: relative;
111
112    }
113}
114
115@include large {
116     .gnav__item {
117        display: block;
118        margin-left: 4%;
119
120        &:first-child {
121            margin-left: 0;
122        }
123    }
124    .header__logo_name {
125        text-align: center;
126        position: static; 
127    }
128    .gnav__list {
129        position: static;
130    }
131}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

NKTIDKSG

2023/04/27 14:18

>これに関係するかわからないんですけど、 >検証ツールで見るとbodyにheadに書いてあるものが入っているんです。それがわかっているのなら、修正して自分で確認してから質問しましょう。まだ自分で試すことのできる余地があるのに丸投げしてしまうべきではありません。

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

回答2件

要素名と属性値が分かれていないので、とりあえずそこを修正してみてはいかがでしょう。

HTML
1<linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
2↓
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

投稿2023/04/27 16:41

kei344

総合スコア69625

spn

2023/04/28 05:36

空白を開けると、無事検証ツールでHTMLのHeadの部分に記載がされました。ありがとうございます。

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

ベストアンサー

牛のロゴと蓼科ごとう農園テキストロゴ周辺のcssを見直すと良いと思います。(position: absolute;とか)
まずはChromeの検証ツールで怪しい部分を消したり、cssを調整してみると解決に近づくと思います。

投稿2023/04/27 14:23

hosodaaaaa

総合スコア47

spn

2023/04/28 06:09

コメントありがとうございます。上の牛のロゴをposition: abusolute;でうかせていたので、その空白だったようです。 .gnav { margin-top: -154px;} .gnav__list { padding-top: 60px;} を追加すると直りました。ありがとうございました。

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

あなたの回答