チェックボックスがチェックされている時、指定要素を非表示にしたい。

前提・実現したいこと

簡単なアニメーションサイトを作成しています。

チェックボックスを使用したハンバーガーメニューがあり、
チェックボックスがチェックされた状態でアニメーションをOFFにしたいのですが、
class="loader"の**display:none;**が効きません。

発生している問題・エラーメッセージ

display:none;が効かない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="index.css">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7  <script src="https://kit.fontawesome.com/2b3eef8600.js" crossorigin="anonymous"></script>
8  <script
9  src="https://code.jquery.com/jquery-3.5.1.min.js"
10  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
11  crossorigin="anonymous"></script>
12  <title>css hover Effect</title>
13</head>
14<body>
15  <nav>
16    <input type="checkbox" id="menu" class="checkbox">
17    <label for="menu" class="nav_open"><i class="fa fa-bars" aria-hidden="true"></i></label>
18    <label for="menu" class="nav_close"></label>
19    <label class="logo"><a href="#" class="logo">Push</a></label>
20    <ul class="top_banner">
21      <li><a class="active" href="#">ホーム</a></li>
22      <li><a href="#">会社概要</a></li>
23      <li><a href="#">事業内容</a></li>
24      <li><a href="#">お問い合わせ</a></li>
25      <li><a href="#">採用情報</a></li>
26    </ul>
27  </nav>
28  
29<!-- ここがアニメーション要素です-->
30  <div class="loader_area">
31    <div class="loader" id="loader">
32      <span></span>
33      <span></span>
34      <span></span>
35      <span></span>
36    </div>
37  </div>
38
39  <div class="bgv_area">
40    <video src="video.mp4" playsinline type="video/mp4" loop="" 
41    autoplay="" muted=""  width="100%" class="bgv">
42    </video>
43
44    <ul class="bgv_description">
45      <li class="fadeInUp">テスト・テスト・テスト</li>
46      <li class="fadeInUp">テスト・テスト・テスト</li>
47      <li class="fadeInUp">テスト・テスト・テスト</li>
48    </ul>
49  </div>
50
51  <script>
52    $(function(){
53  function animation(){
54    $('.fadeInUp').each(function(){
55      var target = $(this).offset().top;
56      var scroll = $(window).scrollTop();
57      var windowHeight = $(window).height();
58      if (scroll > target - windowHeight){
59        $(this).css('opacity','1');
60        $(this).css('transform','translateY(0)');
61      }
62    });
63  }
64  animation();
65  $(window).scroll(function (){
66    animation();
67  });
68});
69  </script>
70
71</body>
72</html>

CSS
1
2*
3{
4  margin: 0;
5  padding:0;
6  box-sizing: border-box;
7}
8/* ナビゲーション */
9
10label.logo a{
11  color: white;
12  font-size: 50px;
13  line-height: 80px;
14  font-weight: 600;
15  text-decoration: none;
16  margin-right:50px;
17}
18nav{
19  display: flex;
20  background-color: black;
21  width: 100%;
22  top:0;
23  justify-content: center;
24}
25
26.nav_open,
27.nav_close{
28  display:none;
29}
30
31input[type="checkbox"] {
32  position: absolute;
33  left: -50vw;
34}
35
36
37.fa.fa-bars{
38  width:60px;
39  height:60px;
40  font-size: 25px;
41  color: white;
42  cursor: pointer;
43  line-height: 80px;
44  text-align: center;
45}
46nav ul{
47    float: right;
48    margin-right: 60px;
49}
50nav ul li{
51    display: inline-block;
52    line-height: 80px;
53    margin: 0 2px;
54}
55nav ul li a{
56    color: #f2f2f2;
57    text-decoration: none;
58    font-weight: 600;
59    font-size: 20px;
60    padding: 7px 15px;
61    text-transform: uppercase;
62    text-decoration: none;
63}
64a.active,a:hover{
65    transition: .5s;
66    border-radius: 10% 100% 100% 0% / 0% 50% 50% 0% ;
67}
68
69  #menu[type=checkbox]:checked {
70    width: 15px;
71    height: 15px;
72  }
73  
74
75.bgv_area{
76  position: relative;
77  background-color: #000;
78}
79.bgv_area::after{
80  position: absolute;
81  background-color: #000;
82  top:0;
83  left:0;
84  bottom: 0;
85  left: 0;
86}
87.bgv{
88  opacity: 0.6;
89}
90.bgv_description{
91  position: absolute;
92  min-width:150px;
93  min-height: 200px;
94  top: 50%;
95  left: 50%;
96  transform: translateY(-50%) translateX(-50%);
97  -webkit-transform: translateY(-50%) translateX(-50%);
98  color: white;
99  font-family: 'メイリオ';
100  list-style: none;
101  font-size: 40px;
102  padding: 40px 10px;
103}
104.fadeInUp {
105  opacity : 0;
106  transform: translateY(100px);
107  transition: 2s;
108}
109
110.bgv_description li{
111  text-shadow:1px 1px 3px #000000;
112  white-space: nowrap;
113}
114
115.bgv_description li:nth-child(1){
116  margin: 50px -30px 0;
117}
118.bgv_description li:nth-child(2){
119  margin: 50px 0px;
120}
121.bgv_description li:nth-child(3){
122  margin: 50px 30px;
123}
124
125
126
127
128/* ナビゲーションSP ver */
129@media screen and (max-width:1080px) {
130  .nav_open,
131  .nav_close{
132    display: block;
133  }
134  .top_banner{
135    display:none;
136  }
137  
138    .fa.fa-bars{
139      position: fixed;
140      bottom: 0;
141      left: 0;
142      width: 120px;
143      height: 120px;
144      font-size: 60px;
145      z-index: 2;
146    }
147    label.logo a{
148      margin-right:0;
149    }
150    
151/* アニメーション要素*/
152    #menu[type="checkbox"]:checked ~ ul{
153      position: fixed;
154      top: 15%;
155      left: 0;
156      width: 100vw;
157      height: 100vh;
158      display: inline-flex;
159      flex-direction: column;
160      text-align: center;
161      z-index: 1;
162      animation-name: animation1;
163      animation-duration: 0.5s;
164    }
165    @keyframes animation1 {
166      0% {
167        left: -30vw;
168      }
169      100% {
170        left: 0;
171      }
172    }
173
174    /* ここのアニメーション要素が非表示になりません */
175    #menu[type="checkbox"]:checked ~ .loader{
176      display: none;
177    }
178    
179   
180
181    nav ul li a{
182      font-weight: 800;
183      font-size: 40px;
184  }
185
186  /* 動画背景と文字*/
187  .bgv_description{
188    font-size: 15px;
189    white-space: nowrap;
190    padding: 0;
191  }
192  .fadeInUp {
193    transform: translateY(50px);
194  }
195  li:nth-child(1){
196    margin: 5px -7.5px 0;
197  }
198  li:nth-child(2){
199    margin: 5px 0px;
200  }
201  li:nth-child(3){
202    margin: 5px 7px;
203  }
204  li:nth-child(4){
205    margin: 0 22.5px;
206  }
207}
208
209
210/* ロードエリア */
211.loader_area{
212  justify-content: center;
213  align-items: center;
214  min-height: 100vh;
215  background: #000;
216  display: flex;
217}
218.loader{
219  position:relative;
220  width: 200px;
221  height: 200px;
222  overflow: hidden;
223  -webkit-box-reflect: below 1px linear-gradient(transparent,#0005);
224}
225
226.loader:hover{
227  background:#03e9f4;
228             
229  box-shadow:0 0 150px 20px #03e9f4;
230            /* 軽量化のため下記実装は保留
231             0 0 5px #03e9f4,
232             0 0 25px #03e9f4,
233             0 0 50px #03e9f4,
234             0 0 200px #03e9f4,
235             0 0 400px #03e9f4; */
236}
237.loader span{
238  position: absolute;
239  display: block;
240}
241.loader span:nth-child(1){
242  top: 0;
243  left: -100%;
244  width: 100%;
245  height: 40px;
246  background: linear-gradient(90deg, transparent,#03e9f4);
247  animation: animate1 1s linear infinite;
248}
249@keyframes animate1{
250  0%
251  {
252    left: -100%;
253  }
254  100%{
255    left: 100%;
256  }
257}
258
259.loader span:nth-child(3){
260  bottom: 0;
261  left: -100%;
262  width: 100%;
263  height: 40px;
264  background: linear-gradient(90deg, transparent,#03e9f4);
265  animation: animate3 1s linear infinite;
266  animation-delay: 1s;
267}
268@keyframes animate3{
269  0%
270  {
271    left: 100%;
272  }
273  100%{
274    left: -100%;
275  }
276}
277
278.loader span:nth-child(2){
279  right: 0;
280  top: -100%;
281  width: 40px;
282  height: 100%;
283  background: linear-gradient(90deg, transparent,#03e9f4);
284  animation: animate2 1s linear infinite;
285  animation-delay: 0.5s;
286}
287@keyframes animate2{
288  0%
289  {
290    top: -100%;
291  }
292  100%{
293    top: 100%;
294  }
295}
296
297.loader span:nth-child(4){
298  left: 0;
299  top: 100%;
300  width: 40px;
301  height: 100%;
302  background: linear-gradient(90deg, transparent,#03e9f4);
303  animation: animate4 1s linear infinite;
304  animation-delay: 1.5s;
305}
306@keyframes animate4{
307  0%
308  {
309    top: 100%;
310  }
311  100%{
312    top: -100%;
313  }
314}
315
316
317.bgv_area{
318  width: 100%;
319}
320

試したこと

①最低限のコードでテストをしてみたのですが、display:none;は適用できていました。↓
codepen

②teratailに貼り付けたコードで、Google Chromeの検証ツールで、loader要素をdisplay:none;にしたところ、きちんと反映されていました。

補足情報（FW/ツールのバージョンなど）

①おそらく何かしら他の要素が邪魔して適用されていない
②記述方法に誤りがある
っと仮説をたててたのですが・・・何度もトライしても解決できていません。

アドバイスいただけますと幸いです。

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

回答2件

ベストアンサー

表示切り替え用のチェックボックスはbodyの直下、なるべく先頭の方におきます

HTML
1<body>
2<input type="checkbox" id="menu" class="checkbox">

投稿2020/08/03 05:28

yambejp

総合スコア114742

yambejp

2020/08/03 05:28

あとはこんな感じ #menu:checked ~ * .loader{ display:none; }

pontarou3

2020/08/04 04:44

ありがとうございます！速攻で解決しました。。。

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

それはcheckboxと同階層以下の要素にしか効きません
下記のコードでulが非表示切り替えできます。

例：
ulをnavから出してみたり、
ulを.loader_areaの中に入れたりしてテストしてみてください

html
1       <style>
2      /* ここのアニメーション要素が非表示になりません */
3      #menu[type="checkbox"]:checked ~ .loader{
4        display: none;
5      }
6
7      /* checkboxと同階層 */
8      #menu[type="checkbox"]:checked ~ ul.test01 .test .p{
9        display: none;
10      }
11
12      /* checkboxと同階層以下の要素 */
13      #menu[type="checkbox"]:checked ~ ul.test02 {
14        display: none;
15      }
16
17      * {
18        color: #fff;
19      }
20    </style>
21    <input type="checkbox" id="menu" class="checkbox">
22    <label for="menu" class="nav_open"><i class="fa fa-bars" aria-hidden="true"></i></label>
23    <label for="menu" class="nav_close"></label>
24    <label class="logo"><a href="#" class="logo">Push</a></label>
25    <ul class="top_banner test01">
26      <li class="test"><a href="#">ホーム<p class="p">a</p></a></li>
27      <li><a href="#">テスト</a></li>
28      <li><a href="#">テスト</a></li>
29      <li><a href="#">テスト</a></li>
30      <li><a href="#">テスト</a></li>
31    </ul>
32    <ul class="top_banner test02">
33      <li><a class="active" href="#">ホーム</a></li>
34      <li><a href="#">会社概要</a></li>
35      <li><a href="#">事業内容</a></li>
36      <li><a href="#">お問い合わせ</a></li>
37      <li><a href="#">採用情報</a></li>
38    </ul>
39  </nav>
40
41<!-- ここがアニメーション要素です-->
42  <div class="loader_area">
43    <div class="loader" id="loader">
44      <span></span>
45      <span></span>
46      <span></span>
47      <span></span>
48    </div>
49  </div>

追記

簡単な解決策は、checkboxをnavから出すことかな？

html
1<input type="checkbox">
2  <nav>
3  </nav>
4<div class="loader_area">
5  <div class="loader">
6  </div>
7</div>

投稿2020/08/03 05:12

編集2020/08/03 05:33

akihiro3

総合スコア955

pontarou3

2020/08/07 06:37

ありがとうございます！返信が遅れてしまい申し訳ないです。試行錯誤の結果、うまく出来ました！おっしゃっていただいた通り、navの外に出すことによって、思い通りに動きました。そこからメニューの動き、背景の動きを微調整していった結果、綺麗に動きました。ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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