ハンバーガーメニューをクリック後のバツ印が見当たりません！教えてください。

###ハンバーガーメニューのクリックした後のバツ印がどこかに消えてしまいます。
何が悪いのでしょうか…色々調べましたが、初心者のため解決できず…よろしくお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>学習室</title>
8    <link rel="stylesheet" href="style.css">
9    
10</head>
11
12<body>
13
14    <header>
15        <!-- ここからハンバーガーメニュー -->
16        <div class="demobox-header">
17            <span class="demobox-sitename"></span>
18        <!-- ↓ハンバーガーメニューここから↓ -->
19            <div class="hamburger-demo-menubox">
20                <input id="hamburger-demo1" type="checkbox" class="input-hidden">
21                <label for="hamburger-demo1" class="hamburger-demo-switch hamburger-demo-switch1">
22                    <span class="hamburger-switch-line1"></span>
23                </label>
24                <div class="hamburger-demo-menuwrap">
25                    <ul class="hamburger-demo-menulist">
26                        <li><a href="../about/about.html">学習室での学び</a></li>
27                        <li><a href="../course/course.html">コース一覧</a></li>
28                        <li><a href="../cost/cost.html">学習費用</a></li>
29                        <li><a href="../access/access.html">アクセス</a></li>
30                        <li><a href="../contact/contact.html">お問い合わせ</a></li>
31                        <li><a href="../question/question.html">よくある質問</a></li>
32                    </ul>
33                </div>
34                <div class="hamburger-demo-cover"></div>
35            </div>
36        <!-- ↑ハンバーガーメニューここまで↑ -->
37        </div>
38    </header>
39</body>
40</html>

該当のソースコード

css3
1@charset "utf-8";
2
3@import url(reset.css);
4
5
6
7/* 全体の設定 */
8body,header,span {
9  margin: 0 auto;
10  width: 375px;  
11  height: auto;
12  font-size: 14px;
13  line-height: 1.5;
14  font-family:  "メイリオ", "Meiryo", sans-serif;
15}
16
17header{
18    position: fixed;
19}
20
21a {
22    text-decoration: none;
23}
24
25.logo {
26    width: 175px;
27    margin-top: 10px;
28    margin-bottom: 10px;
29    
30}
31
32
33/*まずはお決まりのボックスサイズ算出をborer-boxに */
34*,
35*:before,
36*:after {
37  -webkit-box-sizing: inherit;
38  box-sizing: inherit;
39}
40
41html {
42  -webkit-box-sizing: border-box;
43  box-sizing: border-box;
44  font-size: 62.5%;/*rem算出をしやすくするために*/
45}
46
47.btn,
48a.btn,
49button.btn {
50  font-size: 1.7rem;
51  position: relative;
52  display: inline-block;
53  padding: 0.6rem 1.2rem;
54  cursor: pointer;
55  -webkit-user-select: none;
56  -moz-user-select: none;
57  -ms-user-select: none;
58  user-select: none;
59  transition: all 0.1s;
60  text-align: center;
61  vertical-align: middle;
62  text-decoration: none;
63  color: #fff;
64  background-color: #ff931e;
65
66}
67.contact_btn{
68    margin-top: 10px;
69    margin-left: 10px;
70    width: 130px;
71    height: 35px;
72}
73a.btn--orange.btn--cubic {
74    border-bottom: 3px solid #b3b3b3;
75  }
76  
77  a.btn--orange.btn--cubic:hover {
78    margin-top: 2px;
79    border-bottom: 1px solid #b3b3b3;
80  }
81  
82  a.btn--radius {
83    border-radius: 100vh;
84  }
85  
86  .fa-position-right {
87    position: absolute;
88    top: calc(50% - .5em);
89    right: 1rem;
90  }
91
92img {
93    width: 100%;
94    margin: 0 auto;
95}  
96
97
98/* ここからハンバーガーメニュー */
99/* header */
100.demobox-header{  
101    height: 38px;
102    padding: 1em;
103}
104
105.demobox-sitename{ 
106    font-weight: 700;
107    font-size: 18px;
108}
109/* 全体調整CSS */
110.hamburger-demo-menubox *{
111    font-size: 16px;
112}
113.hamburger-demo-menubox li{
114    font-size: 14px;
115}
116/* hamburgerここから */
117.input-hidden{
118    display: none;
119}
120 /* label */
121.hamburger-demo-switch{
122    cursor: pointer;
123    position: absolute;
124    right: 3px;
125    top: 0px; /* ハンバーガーアイコンの位置（上から） */
126    z-index: 9999;
127    width: 4em; /* アイコン（クリック可能領域）の幅 */
128    height: 4em; /* アイコン（クリック可能領域の）高さ */
129    }
130/* メニュー展開時にハンバーガーアイコンを固定 */
131#hamburger-demo1:checked ~ .hamburger-demo-switch{
132    position: fixed;
133    }
134/* ハンバーガーアイコン */
135.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
136    width: 25px;
137	height: 3px;
138	background: rgb(23, 186, 61); /* ハンバーガーアイコンの色 */
139	position: absolute;
140	top: 50%;
141	left: 50%;
142	transition: .3s;
143	content: "";
144    }
145.hamburger-switch-line1{
146    transform: translate(-50%, -50%);
147}
148.hamburger-switch-line1:before{
149    transform: translate(-50%, -300%);
150}
151.hamburger-switch-line1:after{
152    transform: translate(-50%, 200%);
153}
154/* ハンバーガーアイコン･アニメーション */
155#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
156    width: 0;
157}
158#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
159    transform: rotate(45deg) translate(-40%, 325%);
160}
161#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
162    transform: rotate(-45deg) translate(-40%, -325%);
163}
164/* メニューエリア */
165.hamburger-demo-menuwrap{
166    position: fixed;
167    height: 100%;
168     /* メニューエリアの背景色 */
169    padding: 5em 3% 2em;
170    z-index: 9998;
171    transition: .3s;
172    overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
173    top: 0;
174    left: 100%;
175    width: 80%;
176}
177/* メニューリスト */
178.hamburger-demo-menulist{
179    margin-right: 3%;
180    padding-left: 5%; 
181    list-style: none;
182}
183.hamburger-demo-menulist li a{
184    text-decoration: none;
185    font-size: 18px;
186    color: rgb(255, 255, 255); /* メニューリストの文字色 */
187    display: block;
188    padding: .5em 0;
189}
190/* メニューエリア･アニメーション */
191    /* 右から */
192#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
193    left: 30%;
194}
195    /* コンテンツカバー */
196#hamburger-demo1:checked ~ .hamburger-demo-cover{
197    position: fixed;
198    width: 100%;
199    height: 100%;
200    top: 0;
201    left: 0;
202    z-index: 9997;
203    background: rgba(3,3,3,.5);
204    display: block;
205}
206
207/* ここまでハンバーガメニュー */
208
209
210
211.main img {    
212    width: 375px;
213    height: 204px;
214    margin: 60px auto 0px ;
215    
216}
217
218.flex { 
219    display: flex;  
220}
221
222

reset.css追記です（早々にご指摘ありがとうございました）。

reset.css
1@charset "utf-8";
2
3/* 
4	*** リセットスタイル ***
5	Originally crafted by Eric Meyer
6	Source: http://meyerweb.com/eric/tools/css/reset/
7	Purpose: 
8	The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on
9 */
10
11html, body, div, span, applet, object, iframe,
12h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13a, abbr, acronym, address, big, cite, code,
14del, dfn, em, img, ins, kbd, q, s, samp,
15small, strike, strong, sub, sup, tt, var,
16b, u, i, center,
17dl, dt, dd, ol, ul, li,
18fieldset, form, label, legend,
19table, caption, tbody, tfoot, thead, tr, th, td,
20article, aside, canvas, details, embed, 
21figure, figcaption, footer, header, hgroup, 
22menu, nav, output, ruby, section, summary,
23time, mark, audio, video {
24	margin: 0;
25	padding: 0;
26	border: 0;
27	font-size: 100%;
28	font: inherit;
29	vertical-align: baseline;
30}
31/* HTML5 display-role reset for older browsers */
32article, aside, details, figcaption, figure, 
33footer, header, hgroup, menu, nav, section {
34	display: block;
35}
36body {
37	line-height: 1;
38}
39ol, ul {
40	list-style: none;
41}
42blockquote, q {
43	quotes: none;
44}
45blockquote:before, blockquote:after,
46q:before, q:after {
47	content: '';
48	content: none;
49}
50table {
51	border-collapse: collapse;
52	border-spacing: 0;
53}

試したこと

CSSの/* ここからハンバーガーメニュー /から/ ここまでハンバーガーメニュー */のところの数値を色々いじってみましたが、途中、姿を現したかと思えば、今度、クリックする前のハンバーガーメニュー三本線が元の位置からずれてしまい、追いかけっこ状態でした。

m.ts10806

2021/12/01 12:32

reset.css　もご提示ください。取得先がある（自身で組んでない）なら取得先URLでも構いません。

m.ts10806

2021/12/01 13:27

もう１点 HTML途中で切れてるように見えますが、せめてコピペで再現可能なくらいの内容で提示いただけますか？（コンテンツ部分は省略しても良いかもしれませんが、閉じられてない半端な状態なので）

naotokame

2021/12/01 13:28

早々にご対応ありがとうございます。自身で組んでおらず、スクールに行っていたときのコピーですが、更新させていただきました。基本からつまずいていますが、調べきれず…何卒よろしくお願いいたします。

m.ts10806

2021/12/01 13:30 編集

自作であればハンバーガーメニューは基本とは言えないと思います（少なくとも私は何もなしには組めません。大抵はCSSフレームワークに任せてしまってるので、読んで理解できなくはないくらいで）

naotokame

2021/12/01 13:48

実は、ハンバーガーメニューも、かつてどこかのサイトで案内されていたもので、htmlの時は問題なくできていたのですが、phpに移行した時に、おかしくなってしまって、数字をいろいろいじってみましたが、お手上げ状態です。私も読んで理解できるようになりたいです。

naotokame

2021/12/01 13:57

ちなみに、今回上げさせていただいたhtmlでは、ハンバーガーメニューのクリック後のバツ印は一応、見えていますが、ずいぶん離れています。これが、三本線が消えると同じ位置にバツ印が来るようにできれば、phpでも上手くいくかなと思いまして。こちらにphpを貼るのは難しいので…

m.ts10806

2021/12/01 14:16 編集

>phpに移行した時に十中八九、作ったHTMLの形式でPHPからHTML文字列が（想定の通り）ただしく出力できてなかったからですね。PHPの仕事は出力だけで出力情報をHTMLとして認識するのはブラウザの仕事ですから。（なので試行していることは正しいと思います）

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

回答2件

提示されたコードだけだと問題なく表示されるようですが、クリック後のバツ印が画面右端に配置されるのはcssの以下の指定があるからです。

css
1/* メニュー展開時にハンバーガーアイコンを固定 */
2#hamburger-demo1:checked ~ .hamburger-demo-switch{
3    position: fixed;
4    }

これを削除するかコメントアウトすればクリック後も元の三本線と同じ位置に表示されるはずです。

投稿2021/12/01 14:32

cerfweb

総合スコア1899

ベストアンサー

~~「どうなれば想定の通り」なのかが分かりませんが~~（失礼。コメント読み違えてました。）
「元々のメニューアイコンと同じ位置」なら下記のposition: fixed;を削除すると、位置は変わらず×となるようです。

css
1#hamburger-demo1:checked ~ .hamburger-demo-switch{
2    position: fixed;
3    }

投稿2021/12/01 14:15

編集2021/12/01 14:17

m.ts10806

総合スコア80842

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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