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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

0回答

234閲覧

レスポンシブメニューを開いたときに、ロゴより下を全て覆うようにしたいです。

js_boy

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2022/11/20 09:54

前提

レスポンシブメニューが開いたときの画面を作っていて、画面上部(ロゴがあるスペース)以外をメニューリストで画面いっぱい覆いたいのですが、縦にスクロールすると普通にメニュー以外の画面が表示されてきてしまいます。

実現したいこと

画面上部(ロゴがあるスペース)以外をメニューリストで画面いっぱい覆いたいです。

発生している問題・エラーメッセージ

縦にスクロールすると普通にメニュー以外の画面が表示されてきてしまいます。

該当のソースコード

HTML

1<section class="header"> 2 <div class="inner"> 3 <div class="header_container"> 4 <div class="logo_area"> 5 <p class="logo_txt">東京都 中央線沿いの調剤薬局 / 在宅医療</p> 6 <img src="/img/logo.svg" alt="ロゴ"> 7 </div><!--logo_area--> 8 <div class="header_menu"> 9 <div class="header_menu_top"> 10 <div class="recruit"><a href="#">採用情報</a></div> 11 <div class="shopinfo_headertop"><a href="#">吉祥寺店</a></div> 12 <div class="shopinfo_headertop"><a href="#">中野店</a></div> 13 </div><!--header_menu_top--> 14 <div class="header_menu_bottom"> 15 <nav> 16 <ul class="header_menu_list"> 17 <li class="header_menu_items"><a href="#"><span>Top</span>トップ</a></li> 18 <li class="header_menu_items"><a href="#"><span>News</span>お知らせ</a></li> 19 <li class="header_menu_items"><a href="#"><span>Pharmacy</span>調剤薬局</a></li> 20 <li class="header_menu_items"><a href="#"><span>Home Care</span>在宅医療</a></li> 21 <li class="header_menu_items"><a href="#"><span>Column</span>お役立ちコラム</a></li> 22 <li class="header_menu_items"><a href="#"><span>Company</span>会社概要</a></li> 23 <li class="header_menu_items"><a href="#"><span>Contact</span>お問い合わせ</a></li> 24 </ul> 25 </nav> 26 </div><!--header_menu_bottom--> 27 </div><!--header_menu--> 28 <div class="sp_menu"> 29 <div class="inner"> 30 <nav> 31 <ul class="sp_menu_list"> 32 <li class="sp_menu_items"><a href="#">トップ</a></li> 33 <li class="sp_menu_items"><a href="#">お知らせ</a></li> 34 <li class="sp_menu_items"><a href="#">調剤薬局</a></li> 35 <li class="sp_menu_items"><a href="#">在宅医療</a></li> 36 <li class="sp_menu_items"><a href="#">お役立ちコラム</a></li> 37 <li class="sp_menu_items"><a href="#">会社概要</a></li> 38 <li class="sp_menu_items"><a href="#">お問い合わせ</a></li> 39 </ul> 40 </nav> 41 </div><!-- /.inner --> 42 </div><!--sp_menu--> 43 <div class="hamburger"> 44 <span></span> 45 <span></span> 46 <span></span> 47 </div><!-- /.hamburger --> 48 </div><!--header_container--> 49 </div><!--inner--> 50 </section><!--header-->

CSS

1.header { 2 width: 100%; 3 margin-bottom: 14px; 4 5 .header_container { 6 display: flex; 7 justify-content: space-between; 8 9 10 .logo_area { 11 // margin-right: auto; 12 img { 13 14 } 15 .logo_txt { 16 font-size: 12px; 17 margin: 0 0 8px 0; 18 } 19 } 20 21 .header_menu { 22 @include mq(sp) { 23 display: none; 24 } 25 26 .header_menu_top { 27 height: 45px; 28 display: flex; 29 align-items: center; 30 justify-content: right; 31 32 .recruit { 33 margin-right: 42px; 34 35 a { 36 font-size: 14px; 37 text-decoration: none; 38 position: relative; 39 40 &::before { 41 content:''; 42 position: absolute; 43 top: 50%; 44 right: -18px; 45 transform: translateY(-50%); 46 background: url('/img/angle-right-solid\ \(1\).png'); 47 width: 7px; 48 height: 12px; 49 } 50 } 51 } 52 53 .shopinfo_headertop { 54 margin-right: 10px; 55 width: 115px; 56 height: 45px; 57 text-align: center; 58 background-color: $main-blue; 59 border-radius: 0 0 5px 5px; 60 61 a { 62 line-height: 45px; 63 text-decoration: none; 64 font-size: 15px; 65 color: #fff; 66 } 67 } 68 } 69 70 .header_menu_bottom { 71 nav { 72 .header_menu_list { 73 margin-top: 25px; 74 padding: 0; 75 display: flex; 76 justify-content: center; 77 78 .header_menu_items { 79 list-style: none; 80 width: 115px; 81 margin-left: 10px; 82 text-align: center; 83 position :relative; 84 85 &::after { 86 content:''; 87 position: absolute; 88 bottom: -5px; 89 left: 0; 90 width: 115px; 91 height: 2px; 92 background: $main-lightblue; 93 } 94 95 a { 96 color: #333; 97 text-decoration: none; 98 position: relative; 99 100 span { 101 display: inline-block; 102 white-space: nowrap; 103 font-size: 10px; 104 color:$main-blue; 105 position: absolute; 106 top: -20px; 107 left: 50%; 108 transform: translateX(-50%); 109 } 110 } 111 } 112 } 113 } 114 } 115 } 116 .sp_menu { 117 background: $bg-blue; 118 position: absolute; 119 z-index: 10; 120 top: 90px; 121 left: 0; 122 padding: 0; 123 margin: 0; 124 width: 100%; 125 height: 100%; 126 127 @include mq(pc) { 128 display: none; 129 } 130 131 nav { 132 133 .sp_menu_list { 134 width: 100%; 135 display: inline-block; 136 padding: 0; 137 z-index: 1000; 138 139 .sp_menu_items { 140 list-style: none; 141 a { 142 display: inline-block; 143 width: 100%; 144 text-decoration: none; 145 font-size: 15px; 146 color: #333333; 147 padding-bottom: 14px; 148 border-bottom: 1px dotted #B9D1E0; 149 margin-bottom: 28px; 150 } 151 } 152 } 153 } 154 }

試したこと

.sp_menuクラスに対してposition:fixedをつけてみたり、高さを100vhにしてみたりしたのですが、ダメでした。

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

OS:windows10
Editor:VSCode
ブラウザ:Chrome

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

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

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

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

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

hatena19

2022/11/21 10:17

SCSSを使っているなら、変数定義の部分のコードも提示ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問