Q&A
四角い枠というのは、buttonにデフォルトでついているborderなので、buttonに対してborder:none;を当ててあげることで消すことができます
前提
参考書をもとにハンバーガーメニューを作りましたが、画像のように半分に切れてしまったり四角い囲みが表示されたりします。四角い囲みを消して、ハンバーガーメニュー全体を表示させたいです。
該当のソースコード
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
まず、四角い枠はすでに指摘があるように、buttonに対してborder:none;を設定すればいいでしょう。
メニュー全体が画面からはみ出す原因は、.headerの幅をwidth: 100%;としつつ、padding: 12px 16px;と余白を設定しているので、.headerの幅が100% + 16px*2 となっているため、余白分はみ出しています。
左右余白を padding: 12px 0;というように0にすればはみ出さなくなります。
が、余白は欲しいですよね。その場合は、.headerにbox-sizing: border-box;を追加しましょう。
そうすると、余白付きではみ出さないようになります。
box-sizing: border-box;は要素全体のサイズを余白も含めて計算しなさいという意味になります。
投稿2022/08/18 06:27
総合スコア34360
あなたの回答
tips
プレビュー
