Q&A
reset.css もご提示ください。
取得先がある（自身で組んでない）なら取得先URLでも構いません。
###ハンバーガーメニューのクリックした後のバツ印がどこかに消えてしまいます。
何が悪いのでしょうか…色々調べましたが、初心者のため解決できず…よろしくお願いいたします。
該当のソースコード
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の/* ここからハンバーガーメニュー /から/ ここまでハンバーガーメニュー */のところの数値を色々いじってみましたが、途中、姿を現したかと思えば、今度、クリックする前のハンバーガーメニュー三本線が元の位置からずれてしまい、追いかけっこ状態でした。
もう１点
HTML途中で切れてるように見えますが、
せめてコピペで再現可能なくらいの内容で提示いただけますか？
（コンテンツ部分は省略しても良いかもしれませんが、閉じられてない半端な状態なので）
早々にご対応ありがとうございます。
自身で組んでおらず、スクールに行っていたときのコピーですが、更新させていただきました。
基本からつまずいていますが、調べきれず…何卒よろしくお願いいたします。
自作であればハンバーガーメニューは基本とは言えないと思います（少なくとも私は何もなしには組めません。大抵はCSSフレームワークに任せてしまってるので、読んで理解できなくはないくらいで）
実は、ハンバーガーメニューも、かつてどこかのサイトで案内されていたもので、htmlの時は問題なくできていたのですが、phpに移行した時に、おかしくなってしまって、数字をいろいろいじってみましたが、お手上げ状態です。私も読んで理解できるようになりたいです。
ちなみに、今回上げさせていただいたhtmlでは、ハンバーガーメニューのクリック後のバツ印は一応、見えていますが、ずいぶん離れています。これが、三本線が消えると同じ位置にバツ印が来るようにできれば、phpでも上手くいくかなと思いまして。こちらにphpを貼るのは難しいので…
>phpに移行した時に
十中八九、作ったHTMLの形式でPHPからHTML文字列が（想定の通り）ただしく出力できてなかったからですね。PHPの仕事は出力だけで出力情報をHTMLとして認識するのはブラウザの仕事ですから。（なので試行していることは正しいと思います）
回答2件
0
提示されたコードだけだと問題なく表示されるようですが、クリック後のバツ印が画面右端に配置されるのはcssの以下の指定があるからです。
css
1/* メニュー展開時にハンバーガーアイコンを固定 */ 2#hamburger-demo1:checked ~ .hamburger-demo-switch{ 3 position: fixed; 4 }
これを削除するかコメントアウトすればクリック後も元の三本線と同じ位置に表示されるはずです。
投稿2021/12/01 14:32
総合スコア1907
0
ベストアンサー
「どうなれば想定の通り」なのかが分かりませんが（失礼。コメント読み違えてました。）
「元々のメニューアイコンと同じ位置」なら下記のposition: fixed;を削除すると、位置は変わらず×となるようです。
css
1#hamburger-demo1:checked ~ .hamburger-demo-switch{ 2 position: fixed; 3 }
投稿2021/12/01 14:15
編集2021/12/01 14:17総合スコア80875
あなたの回答
tips
プレビュー
