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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

cssで実装するハンバーガーメニューが縦中央に来ない

kawakawakawakaw
kawakawakawakaw

総合スコア3

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

153閲覧

投稿2022/01/20 12:56

ハンバーガーメニューの三本線が真ん中に来ません

ハンバーガーメニューをヘッダーにつけたいのですが、検証ツールで見ると、三本目の線に謎の余白があります。

html

``` <header class="header"> <div class="header-logo-menu flex space-between"> <div class="logo-area flex space-between"> <img src="images/logo.png" alt="Café&Deli Timeロゴ"> <a class="shop-name" href="index.html">Café&Deli Time</p> <a href="tel:072-965-5506"><span class="pc-p">072-965-5506</span></a> </div> <!-- ここからnavi --> <!-- ハンバーガーメニューの表示 --> <nav class="hamburger"> <div class="gnav-toggle"> <input id="gnav-input" type="checkbox" class="gnav-hidden"> <label id="gnav-open" for="gnav-input"><span></span></label> <label class="gnav-unshown" id="g-nav-close" for="g-nav-input"></label> <div id="gnav-content"> <ul class="gnav-menu"> <li><a href="index.html">トップ→</a></li> <li><a href="#about">私たちについて→</a></li> <li><a href="#news">お知らせ→</a></li> <li><a href="#menu">メニュー<span class="pc-p"></span><br class="sp-br">テイクアウト→</a></li> <li><a href="#access">アクセス→</a></li> </ul> </div> </div> </nav> <!-- ここまでがナビ --> </div> </header>

css

@charset "UTF-8"; /* 全ページ共通 */ body{ font-family: 'Noto Serif JP','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Arial','MS 明朝', 'MS Mincho',sans-serif; margin: 0px; padding: 0px; font-size: 62.5%; color: #733426; } img{ max-width: 100%; height: auto; } .flex{ display: flex; } .space-between{ justify-content: space-between; } /* headerのスタイル */ header { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; padding: 0 7.5% ; transition: all .5s; background-color: rgba(0, 0, 0, 0); } @media screen and (max-width: 744px) { header{ padding: 0; } } .header.change-color { background-color:#f2e4d8; } .header-logo-menu{ padding: 20px; } .logo-area{ align-items: center; } .logo-area img{ display: inline-block; } .logo-area a{ margin-left: 20px ; } @media screen and (max-width: 1024px) { .logo-area a{ font-size: 3.6em; } } .logo-area a:last-of-type{ font-size: 4.8em; } .shop-name{ font-family: 'Damion', cursive; font-size: 6em; display: inline-block; } @media screen and (max-width: 750px) { .shop-name{ font-size: 3em; } } /* ハンバーガーメニュー */ .gnav-toggle { position: relative; width: 50px; } /* チェックボックスなどを非表示にする */ .gnav-hidden { display: none; } .gnav-open { display: inline-block; width: 50px; vertical-align: top; } /* ハンバーガーの三本線 */ #gnav-open span, #gnav-open span::before, #gnav-open span::after { content: ''; position: absolute; height: 5px; /* 線の太さ */ width: 50px; /* 線の長さ */ border-radius: 5px; background: #733426; display: block; cursor: pointer; } /* 真ん中の線 */ #gnav-open span::before { bottom: -20px; } /* 下の線 */ #gnav-open span::after { bottom: -40px; } /* 閉じる */ #gnav-close { display: none; position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: 0.3s ease-in-out; } /* チェックが付いたら表示させる */ #gnav-input:checked~#gnav-close { display: block; opacity: 0.5; } #gnav-input:checked~#gnav-content { transform: translateX(0%); box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15); } #gnav-content { overflow: auto; position: fixed; top: 0; left: 0; z-index: 300; width: 70%; height: 100%; background: #F2E4D8; transition: 0.3s ease-in-out; transform: translateX(-105%); /* 画面外側に隠す */ } .gnav-menu { margin-top: 100px; font-size: 30px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-transform: uppercase; /* 大文字小文字の混在を大文字に統一する */ }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

recal

2022/01/20 13:35

>三本線が真ん中に来ません 何に対しての真ん中でしょうか? 三本線がとまとめて表現されているので、 3本全てがなにかに揃えて真ん中に来てほしいのでしょうか? >三本目の線に謎の余白があります。 具体的にどうゆう状態になるのが意図した表示なんでしょうか?
kawakawakawakaw

2022/01/20 22:30

ヘッダーの他の文字たちと同じ縦中央揃えにしたいのですが align items centerが効きません

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。