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

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

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

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

HTML5

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

Q&A

解決済

1回答

530閲覧

ハンバーガーメニューが半分に切れてしまったり四角い囲みが表示されたりする

nahum

総合スコア2

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2022/08/18 05:28

前提

参考書をもとにハンバーガーメニューを作りましたが、画像のように半分に切れてしまったり四角い囲みが表示されたりします。四角い囲みを消して、ハンバーガーメニュー全体を表示させたいです。

イメージ説明

該当のソースコード

html5

1<body> 2 <header class="header"> 3 <h1 class="header-logo"><img src="./img/logo.svg" alt="東京サファリパーク" width="280"></h1> 4 <button type="button" id="header-btn" class="header-btn" title="メニュー開閉"><span></span></button> 5 <nav class="header-gnav"> 6 <ul class="header-gnav-list"> 7 <li><a href="#"><span class="material-icons header-gnav-animals">pets</span>動物紹介</a></li> 8 <li><a href="#"><span class="material-icons header-gnav-guide">explore</span>パークガイド</a></li> 9 <li><a href="#"><span class="material-icons header-gnav-ticket">confirmation_number</span>料金・チケット</a></li> 10 <li><a href="#"><span class="material-icons header-gnav-access">commute</span>交通アクセス</a></li> 11 </ul> 12 </nav> 13 </header> 14 <!-- /.header --> 15</body>

css3

1.header { 2 display: flex; 3 justify-content: space-between; 4 align-items: center; 5 margin: 0 auto; 6 padding: 12px 16px; 7 position: fixed; 8 left: 0; 9 top: 0; 10 z-index: 1000; 11 max-width: 1200px; 12 width: 100%; 13 background-color: #fff; 14} 15 16@media screen and (min-width: 768px) { 17 .header { 18 position: static; 19 flex-direction: column; 20 } 21} 22 23@media screen and (min-width: 992px) { 24 .header { 25 flex-direction: row; 26 } 27} 28 29.header-logo { 30 line-height: 1; 31} 32 33@media screen and (max-width: 575px) { 34 .header-logo { 35 width: 250px; 36 } 37} 38 39.header-btn { 40 width: 32px; 41 height: 20px; 42 padding-right: 5px; 43 background: none; 44 display: block; 45 z-index: 500; 46} 47 48.header-btn span { 49 position: relative; 50 display: block; 51 height: 2px; 52 background: #333; 53 transition: all .3s; 54} 55 56.header-btn span::before, .header-btn span::after { 57 position: absolute; 58 left: 0; 59 content: ""; 60 display: block; 61 width: 100%; 62 height: 2px; 63 background: #333; 64 transition: all .3s; 65} 66 67.header-btn span::before { 68 top: -10px; 69} 70 71.header-btn span::after { 72 bottom: -10px; 73} 74 75@media screen and (min-width: 768px) { 76 .header-btn { 77 display: none; 78 } 79} 80 81.header-gnav { 82 margin-top: 62px; 83 width: 100%; 84 height: 100vh; 85 position: absolute; 86 top: 0; 87 right: -100%; 88 transition: all .5s; 89 background-color: #fff; 90} 91 92@media screen and (min-width: 768px) { 93 .header-gnav { 94 margin-top: 0; 95 width: auto; 96 height: auto; 97 position: static; 98 } 99} 100 101.header-gnav-list { 102 border-top: 1px solid #efe1c5; 103 list-style: none; 104 105} 106 107.header-gnav-list a { 108 display: flex; 109 font-weight: bold; 110 align-items: center; 111 padding: 8px 24px; 112 font-size: 18px; 113 border-bottom: 1px solid #efe1c5; 114 text-decoration: none; 115} 116 117.header-gnav-list a span { 118 font-size: 22px; 119 color: #459209; 120 margin-right: 8px; 121} 122 123.header-gnav-list a span.header-gnav-access { 124 font-size: 24px; 125} 126 127@media screen and (min-width: 768px) { 128 .header-gnav-list { 129 display: flex; 130 border: none; 131 } 132 .header-gnav-list a { 133 border: none; 134 margin-left: 16px; 135 padding: 5px; 136 } 137} 138 139.is-openMenu .header-btn span { 140 background: transparent; 141} 142 143.is-openMenu .header-btn span::before { 144 top: 0; 145 transform: rotate(45deg); 146} 147 148.is-openMenu .header-btn span::after { 149 top: 0; 150 transform: rotate(-45deg); 151} 152 153.is-openMenu .header-gnav { 154 right: 0; 155}

試したこと

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

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

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

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2022/08/18 05:43

四角い枠というのは、buttonにデフォルトでついているborderなので、buttonに対してborder:none;を当ててあげることで消すことができます
guest

回答1

0

ベストアンサー

まず、四角い枠はすでに指摘があるように、buttonに対してborder:none;を設定すればいいでしょう。

メニュー全体が画面からはみ出す原因は、.headerの幅をwidth: 100%;としつつ、padding: 12px 16px;と余白を設定しているので、.headerの幅が100% + 16px*2 となっているため、余白分はみ出しています。
左右余白を padding: 12px 0;というように0にすればはみ出さなくなります。
が、余白は欲しいですよね。その場合は、.headerbox-sizing: border-box;を追加しましょう。
そうすると、余白付きではみ出さないようになります。
box-sizing: border-box;は要素全体のサイズを余白も含めて計算しなさいという意味になります。

box-sizing - CSS: カスケーディングスタイルシート | MDN

投稿2022/08/18 06:27

hatena19

総合スコア33620

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

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

nahum

2022/08/18 06:38

素晴らしいです!解決できました。勉強になります!本当にどうもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問