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

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

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

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

HTML5

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

解決済

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

nahum
nahum

総合スコア2

CSS3

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

HTML5

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

1回答

0リアクション

0クリップ

164閲覧

投稿2022/08/18 05:28

前提

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

イメージ説明

該当のソースコード

html5

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

css3

.header { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 12px 16px; position: fixed; left: 0; top: 0; z-index: 1000; max-width: 1200px; width: 100%; background-color: #fff; } @media screen and (min-width: 768px) { .header { position: static; flex-direction: column; } } @media screen and (min-width: 992px) { .header { flex-direction: row; } } .header-logo { line-height: 1; } @media screen and (max-width: 575px) { .header-logo { width: 250px; } } .header-btn { width: 32px; height: 20px; padding-right: 5px; background: none; display: block; z-index: 500; } .header-btn span { position: relative; display: block; height: 2px; background: #333; transition: all .3s; } .header-btn span::before, .header-btn span::after { position: absolute; left: 0; content: ""; display: block; width: 100%; height: 2px; background: #333; transition: all .3s; } .header-btn span::before { top: -10px; } .header-btn span::after { bottom: -10px; } @media screen and (min-width: 768px) { .header-btn { display: none; } } .header-gnav { margin-top: 62px; width: 100%; height: 100vh; position: absolute; top: 0; right: -100%; transition: all .5s; background-color: #fff; } @media screen and (min-width: 768px) { .header-gnav { margin-top: 0; width: auto; height: auto; position: static; } } .header-gnav-list { border-top: 1px solid #efe1c5; list-style: none; } .header-gnav-list a { display: flex; font-weight: bold; align-items: center; padding: 8px 24px; font-size: 18px; border-bottom: 1px solid #efe1c5; text-decoration: none; } .header-gnav-list a span { font-size: 22px; color: #459209; margin-right: 8px; } .header-gnav-list a span.header-gnav-access { font-size: 24px; } @media screen and (min-width: 768px) { .header-gnav-list { display: flex; border: none; } .header-gnav-list a { border: none; margin-left: 16px; padding: 5px; } } .is-openMenu .header-btn span { background: transparent; } .is-openMenu .header-btn span::before { top: 0; transform: rotate(45deg); } .is-openMenu .header-btn span::after { top: 0; transform: rotate(-45deg); } .is-openMenu .header-gnav { right: 0; }

試したこと

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

dikeda

2022/08/18 05:43

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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