アコーディオンメニューが開きません

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
アコーディオン型のメニューを作りたいです。
画像をクリックするとdivタグが開くようにしたいです。

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

どうやら、divタグ自体は開いているようですが、画面に反映されません。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10    <link rel="stylesheet" type="text/css" href="css/style.css">
11    
12    <title>Hello,world</title>
13    <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
14    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,500,900&amp;subset=japanese" rel="stylesheet">
15    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
16    <link rel="icon" href="img/favicon.ico">
17    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
18  </head>
19  <body>
20    <h1>New York Stories</h1>
21    <a class="anchor" href="#">Scroll</a>
22    <!--start portfolio　details -->
23    <div class="menu">
24      <label class="label1" for="type1">
25    <div class="portfolio-detail-0"></div>
26  </label>
27  <input type="checkbox" id="type1" class="accordion">
28  <label class="slide" id="links1">
29  <div class="view-box"><p>aaa</p></div>
30  </label>
31  </div>
32
33  
34    <div class="portfolio-detail-1"></div>
35    <div class="portfolio-detail-2"></div>
36
37    <div class="btn">
38      <a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら</a>
39    </div>
40
41    <div class="btn">
42      <a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら</a>
43    </div>
44
45  <script type="text/javascript" src="js/style.js"></script>
46   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
47    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
48    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
49  </body>
50</html>

sass
1html{
2    font-family: 'Noto Sans JP', sans-serif;
3  }
4
5  @font-face {
6    font-family: 'Calluna';
7    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/CallunaSansRegular.otf') format('opentype');
8  }
9  * { 
10    box-sizing: border-box;
11  }
12  body {
13    font-family: Calluna, Arial, sans-serif;
14    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(file:///Users/oooo/pythonBox/portfolio/img/portfolio-main.jpg);
15    background-repeat: no-repeat;
16    background-attachment: fixed !important;
17    background-size: cover !important;
18    background-position: center top !important;
19    padding: 1rem;
20    padding-top: 45%;
21    color: #fff;
22    z-index: 1;
23  }
24  
25  h1 {
26    font-size: 4rem;
27    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
28    line-height: 1;
29    position: absolute;
30    top: 10px;
31    font-weight: 100;
32  }
33  p {
34    font-size: 1.3rem;
35    text-align: left;
36    line-height: 1.6;
37    margin-left: 8rem;
38    margin-right: 8rem;
39    color: #000;
40  }
41  h2 {
42    text-align: center;
43    text-transform: uppercase;
44    margin-bottom: 0;
45  }
46  span {
47    display: block;
48    margin: 0;
49    text-align: center;
50    font-size: 3rem;
51  } 
52  a {
53     
54        display: inline-block;
55        position: absolute;
56        right: 50vw;
57        bottom: 0;
58        z-index: 2;
59        padding: 10px 10px 110px;
60        overflow: hidden;
61        color: #fff;
62        font-size: 14px;
63        font-family: 'Josefin Sans', sans-serif;
64        line-height: 1;
65        letter-spacing: .2em;
66        text-transform: uppercase;
67        text-shadow: 0 0 7px rgba(0, 0, 0, 1) !important;
68        text-decoration: none;
69        writing-mode: vertical-lr;
70     
71      &::after {
72        content: '';
73        position: absolute;
74        bottom: 0;
75        left: 50%;
76        width: 1px;
77        height: 100px;
78        background: #fff;
79      }
80      &::before {
81        content: '';
82        position: absolute;
83        bottom: 0;
84        left: 50%;
85        width: 1px;
86        height: 100px;
87        background: rgba(255, 255, 255, .4);
88      }
89      &::after {
90        animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
91      }
92      @keyframes sdl {
93        0% {
94          transform: scale(1, 0);
95          transform-origin: 0 0;
96        }
97        50% {
98          transform: scale(1, 1);
99          transform-origin: 0 0;
100        }
101        50.1% {
102          transform: scale(1, 1);
103          transform-origin: 0 100%;
104        }
105        100% {
106          transform: scale(1, 0);
107          transform-origin: 0 100%;
108        }
109      }
110  }
111  div {
112    &.portfolio-detail-0 {
113        background-image:
114        url(file:///Users/oooo/pythonBox/portfolio/img/portfolio-detail0.jpg);
115        height: 50vh;
116        width: 70vw;
117        background-size: cover;
118        position: relative;
119        top: 300px;
120        right: -25vw;
121        z-index: 2;
122    }
123    &.portfolio-detail-1 {
124        background-color: burlywood;
125        height: 50vh;
126        width: 70vw;
127        background-size: cover;
128        position: relative;
129        top: 550px;
130        right: -25vw;
131        z-index: 2;
132    }
133    &.portfolio-detail-2 {
134        background-color: burlywood;
135        height: 50vh;
136        width: 70vw;
137        background-size: cover;
138        position: relative;
139        top: 800px;
140        right: -25vw;
141        z-index: 2;
142    }
143    &.btn {
144    position: relative;
145    top: 1500px;
146    z-index: 3;
147        a {
148        &.btn--orange {
149            color: #fff;
150            background-color: #eb6100;
151          }
152          
153        &.btn--orange:hover {
154            color: #fff;
155            background: #f56500;
156          }
157          
158        &.btn-c {
159            font-size: 1.8rem;
160            position: relative;
161            padding: 1.5rem 2rem 1.5rem 2rem;
162            border-radius: 100vh;
163          }
164          
165        &.btn-c i.fa {
166            margin-right: 1rem;
167          }
168    }
169    }
170    
171    div {
172        label {
173            &.label1 {
174                display: block;
175                margin: 0 0 4px 0;
176                padding : 15px;
177                line-height: 1;
178                color :#fff;
179                background : green;
180                cursor :pointer;
181            }
182            div {
183
184            }
185        }
186        input {
187            display: none;
188            &#type1:checked ~ #links1 div {
189                height: 54px;
190                opacity: 1;
191            }
192        }
193        label {
194            &.slide {
195                margin: 0;
196                padding: 0;
197                background :#f4f4f4;
198                list-style: none;
199            }
200            div {
201                &.view-box {
202                    height: 0;
203                    overflow: hidden;
204                    -webkit-transition: all 0.5s;
205                    -moz-transition: all 0.5s;
206                    -ms-transition: all 0.5s;
207                    -o-transition: all 0.5s;
208                    transition: all 0.5s;
209                }
210            }
211        }
212    }
213  }
214

js
1var nystories = document.querySelector(".anchor").offsetTop;
2window.onscroll = function gradation() {
3  if (window.pageYOffset > 0) {
4 var opac = (window.pageYOffset / nystories);
5    console.log(opac);
6  document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(file:///Users/oooo/pythonBox/portfolio/img/portfolio-main.jpg) no-repeat";
7  }
8}

試したこと

背景に表示させたいdivタグが隠れてしまっているようですが、解決方法がわかりません。

Lhankor_Mhy

2020/08/07 07:27

答えてから気づきましたが、これ重複質問ですね。 https://teratail.com/questions/281920 規約違反ですので、削除リクエストを出してください。 https://teratail.com/help#resolve-myself https://teratail.com/help#delete-question

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

回答1件

こんにちは。

ご提示のSCSSですが、以下のような構造でした。

scss
1  div {
2// ...
3    div {
4        label {
5// ...
6        }
7        input {
8// ...
9        }
10        label {
11// ...
12        }
13    }
14  }

一方で、HTMLは以下のような構造でした。

html
1  <body>
2<!-- ... -->
3    <div class="menu">
4      <label class="label1" for="type1">
5    <div class="portfolio-detail-0"></div>
6  </label>
7  <input type="checkbox" id="type1" class="accordion">
8  <label class="slide" id="links1">
9  <div class="view-box"><p>aaa</p></div>
10  </label>
11  </div>
12<!-- ... -->
13  </body>

div>div>input
div>div>label
などが存在していませんから、CSSが効きません。
HTMLとSCSSとの構造が一致していないことが原因です。

おそらく、

scss
1          }
2    }
3    }

のあたりで、かっこの閉じ忘れをしているのではないでしょうか。

解決方法ですが、インデントを正しくつけるといいかと思います。

投稿2020/08/07 01:56

Lhankor_Mhy

総合スコア36912

あなたの回答

tips

プレビュー

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

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

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

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

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

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

ただいまの回答率
85.36%

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

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

質問する

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

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

アコーディオンメニューが開きません

前提・実現したいこと

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

試したこと

関連した質問