checkboxの部分を機能は残しつつ非表示にしたい

checkboxの部分を、機能は残しつつ非表示にしたいです。つまり影をつけた上の部分をカットしたいのですが、どうすればいいでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5
6<meta charset="utf-8"/>
7<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
8<link rel="stylesheet" href="header.css">
9<title>header</title>
10
11</head>
12
13<body>
14
15 <!-- #header -->
16<header id="header">
17<!-- global navi -->
18<div id="gNavi">
19  <div class="gNaviBtn">
20　　　<input type="checkbox" id="menu-btn-check">
21     <label for="menu-btn-check" class="menu-btn"><span></span><span></span><span></span></label><!--チェックボックス-->
22     <div class="logo"><img src="img/black.png" alt="黒"/></div>
23     <ul class="mainMenu">
24     　<li><div class="mini-logo"><img src="img/black.png" alt="黒"/></div></li>
25       <li><a href="/fukuske/">プラン1</a></li>
26       <li><a href="/fukuske/#itemList">プラン2</a></li>
27       <li><a href="concept.html">プラン3</a></li>
28       <li><a href="craftsmanship.html">プラン4</a></li>
29       <li><div class="top-button"><a href="history.html"><span>予約する/BOOK HERE</span></a></div></li>
30     </ul>
31  </div>
32</div>
33
34<!-- global navi -->
35</header>
36<!-- #header -->
37<!--ここでメニューを作っている-->
38
39
40</body>

CSS
1<style>
2
3.body{
4   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
5   margin: 0;
6   padding: 0;
7  }
8 * {/*ブラウザのすべてのCSSをリセット*/
9  margin: 0;
10   padding: 0;
11 }
12
13#menu-btn-check {
14    display: none;
15}
16
17@media screen and  (max-width:1024px) {/*スマホ・タブレット版*/
18#gNavi{
19 background-color: #E5E5E5;
20 top: -10%; 
21}
22/*---------------------- Global Navi Menu ------------------------*/
23.logo {
24text-align: center;/*imgの中央寄せ*/
25}
26.logo img{
27width:260px;
28height:auto;
29margin-top: 20px;/*もっと大枠の要素とぶつかってる、inline要素では上下のmargin,paddingは効かない*/
30}
31.mini-logo img{
32width:138px;
33height:auto;
34margin-bottom: 10px;
35/*margin-top: 20px;/*もっと大枠の要素とぶつかってる、inline要素では上下のmargin,paddingは効かない*/
36}
37.mainMenu{
38    position: absolute;
39    top: 40px;
40    left: -300px;/*ナビメニューを左に隠した状態になる*/
41    width: 300px;
42    height: 100vh;/*参考: https://csshtml.work/height100vh/#height100vh*/
43    box-sizing: border-box;
44    transition: .5s;/*０.7秒かけてナビメニューがスライドする*/
45    background-color: #E5E5E5;
46    z-index: 50;
47    box-shadow: 4px 4px;
48}
49ul.mainMenu li {
50list-style: none;/*liの点を消去*/
51margin-left: 30px;
52}
53ul.mainMenu li a {
54font-size: 18px;
55text-decoration: none;/*liの下線を消去*/
56color:#73683b;
57display: block;
58padding:15px 0 15px;
59
60}
61ul.mainMenu li span{
62font-size: 14px;
63font-weight: bold;
64color: white;
65background-color:#73683b;
66padding: 20px 40px;
67}
68.top-button{
69margin-top: 45px;
70}
71
72
73  /*---------------------- Global Navi Button ------------------------*/
74  /*---------------------- ボタンクリック前 ------------------------*/ 
75.menu-btn {/*この要素を基準にして内包する線の位置を定義*/
76display: block;
77top: 90px;
78left:30px;
79width: 50px;
80height: 50px;
81z-index:  102;
82position: absolute;/*fixedにすると、画面の固定した位置にずっとあることになる*/
83transition: .5s;
84/*transition: all 0.5s ease-in-out 0.0s;*/
85}
86
87.menu-btn span{/*3本線の本体となる部分*/
88display: block;
89position: absolute;
90width: 20px;/*３本線の長さ*/
91border-bottom: solid 2px #73683b;/*3本線の色は黒*/
92left: 10px;
93}
94
95.menu-btn span{
96top: 0px;
97}
98.menu-btn span:nth-child(1) {
99top: 7px;
100}
101.menu-btn span:nth-child(2) {
102top: 14px;
103}
104
105/*それぞれの線の位置を定義*/
106
107  /*---------------------- ボタンクリック後 ------------------------*/ 
108#menu-btn-check:checked ~ .menu-btn{
109     left: 235px;
110}
111#menu-btn-check:checked ~ .menu-btn span{
112     top: 7px;
113     /*left: 220px;*/
114     transform: rotate(45deg);
115}
116#menu-btn-check:checked ~ .menu-btn span:nth-child(1){
117     /*left: 220px;*/
118     border-bottom: solid 2px rgba(255, 255, 255, 0);/*透明にする*/
119}
120#menu-btn-check:checked ~ .menu-btn span:nth-child(2){
121     top: 7px;
122     /*left: 220px;*/
123     transform: rotate(-45deg);
124} 
125#menu-btn-check:checked ~ .mainMenu {
126    left: 0px;/*メニューを画面内へ*/
127}
128
129}
130}
131
132
133</style>

Lhankor_Mhy

2022/04/12 01:10

「影をつけた上の部分」とは、スクリーンショットで言うとどこでしょうか？　ハンバーガーアイコンのことですか？

hatena19

2022/04/12 01:12

現状のコードでチェックボックスは display: none; で非表示になってますが、どこがご希望と異なってますか。

nitori-kun

2022/04/13 08:57

Lhankor様、編集しました。

nitori-kun

2022/04/13 08:59

hatena19様、領域そのものをカットしたい(上にずらしてもいい)ということです。

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

回答1件

ベストアンサー

全角スペースは文字と認識されますので、削除してみてはどうでしょうか。

html
1　　　<input type="checkbox" id="menu-btn-check">

↓

html
1   <input type="checkbox" id="menu-btn-check">

または、.mainMenuの位置のことについてでしたら、top: 90pxとなっているのが原因ですので、top: 0などとすると上に上がると思います。

投稿2022/04/14 00:51

Lhankor_Mhy

総合スコア36074

nitori-kun

2022/04/14 06:26

普通にlogoのmargin-topをいじったらできました！くだらない質問をしてすいませんでした。ありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

checkboxの部分を機能は残しつつ非表示にしたい

関連した質問