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

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

新規登録して質問してみよう
ただいま回答率
85.50%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

433閲覧

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

spn

総合スコア37

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/04/27 13:16

実現したいこと

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

前提

これに関係するかわからないんですけど、
検証ツールで見ると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/ツールのバージョンなど)

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pippi19

2023/04/27 14:18

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

回答2

0

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

HTML

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

投稿2023/04/27 16:41

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spn

2023/04/28 05:36

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

0

ベストアンサー

牛のロゴと蓼科ごとう農園テキストロゴ周辺の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;} を追加すると直りました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問