ハンバーガーメニューが表示されなく、困っています。

現在font-awesomeを用いて、CSSのみでのハンバーガーメニューの作成の学習をしていたのですが、ファイルを開いても画面が真っ白なままで何も表示されません。どこが間違っているのでしょうか？

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hamburger manu</title>
  <link rel="stylesheet" href="./css./style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc">
</head>
<body>
  <nav>
    <!-- チェックボックス -->
    <input id="gnav-input" type="checkbox" class="gnav-hidden">
      <!-- ボタンになるところ -->
    <label id="gnav-btn" for="gnav-input"><span class="fas fa-bars"></span><span class="fas fa-close"></span></label>
      <!-- 薄い幕になるところ -->
    <label id="gnav-black" for="gnav-input"></label>
    <!-- 開閉される中身 -->
    <div id="gnav-content">
      <ul class="gnav-list">
        <li><a href="#">TOP<br>トップ</a></li>
        <li><a href="#">NEWS<br>お知らせ</a></li>
        <li><a href="#">ABOUT<br>当店について</a></li>
        <li><a href="#">RECRUIT<br>採用情報</a></li>
      </ul>
    </div>
  </nav>
</body>
</html>

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* メニューの中身 */
#gnav-content{
  /* positionを使って画面の左外に追い出している */
  position:fixed;
  top: 0;
  left: -100%;
  z-index: 100;

  width: 100%;
  max-width: 240px;

  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  transition: .3s;
}

ul.gnav-list{
  background: #1b9aaa;
  padding:0;
  height: 100vh;
  text-align: center;
}

ul.gnav-list li{
  display: block;
}

ul.gnav-list li a{
  display:block;
  padding: 1.5em;
  color: #fff;
  font-size: 12px;
  text-decoration:none;
}

ul.gnav-list li a::first-line{
  font-size: 16px;
  font-weight: bold;
}

/* チェックボタンを非表示に */
.gnav-hidden {
  display: none;
}

/* labelで作るメニューボタン */
#gnav-btn{
  /* ボタンの大きさ */
  /* ブロック要素にし、高さも調節可能にする */
  display: block;
  width: 40px;
  height: 40px;
  
  /* スクロールしても常に固定され、どの要素よりも上にくるようにする */
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.fa-close{
  display: none;
}

/* 薄い幕部分 */
#gnav-black {
  display: none;

  position:fixed;
  z-index: 90;
  top: 0;
  left: 0;

  width: 100%;
  /* gnav-listと同じ高さに */
  height: 100vh;

  background: rgba(0, 0, 0, .5);
}

/* チェックがオンになった時のスタイル */

#gnav-input:checked ~ .fa-bars{
  display: none;
}
#gnav-input:checked ~ .fa-close{
  display: block;
}

#gnav-input:checked ~ #gnav-black{
  display: block;
}
#gnav-input:checked ~ #gnav-content{
  left: 0;
}

行動規範の内容に同意します

回答2件

HTMLでCSSを読み込む部分を以下のように変更してみてください。

HTML
1<link rel="stylesheet" href="./css/style.css">
2<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
3

Font Awesome の bars アイコンが右上に表示されるようになるはずです。

投稿2020/09/15 21:55

arenomarb

総合スコア53

クリックする場所が右上に四角で存在します。
（仮に黒くしてみました）
そこをクリックすると左からメニューが表示されます。

CSS
1#gnav-btn {
2    display: block;
3    width: 40px;
4    height: 40px;
5    position: fixed;
6    top: 20px;
7    right: 20px;
8    z-index: 100;
9    background-color: #000; /* ここだけ追加 */
10}

投稿2020/09/15 21:50

kuma_kuma_

総合スコア2506

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

ハンバーガーメニューが表示されなく、困っています。

関連した質問