質問編集履歴

1

誤字の修正及び内容の追記

2022/08/10 04:48

投稿

negiremi
negiremi

score12

test CHANGED
@@ -1 +1 @@
1
- ヘッダーを固定したら wrapperが効かくなってしまいました。なぜでしょうか?
1
+ ヘッダーを固定したら wrapperが効かくなってしまいました。なぜでしょうか?
test CHANGED
@@ -1,6 +1,6 @@
1
1
  position : fixed;でヘッダーを固定したところ
2
2
  class="wrapper"で左右に余白を作っていましたが、左端に寄ってしまいました。
3
- 色々試しましたがどうしてもwrapperが効きません、、なぜだか分かる方いらっしゃいますか?
3
+ 誤字がないか確認したり、コードを入力し直したりしました。半日行錯誤しましたがどうしてもwrapperが効きません、、なぜだか分かる方いらっしゃいますか?
4
4
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-10/35892773-360f-4e1c-be64-cfcc2a960448.png)
5
5
 
6
6
  ```html
@@ -127,7 +127,7 @@
127
127
  }
128
128
 
129
129
 
130
- /*バーガーメニュー*/
130
+ /*ハンバーガーメニュー*/
131
131
  header{
132
132
  display: flex;
133
133
  justify-content: space-between;
@@ -179,3 +179,27 @@
179
179
  }
180
180
 
181
181
  ```
182
+ ```javascript
183
+ 'use strict';
184
+
185
+ {
186
+ const open = document.getElementById('open');
187
+ const overlay = document.querySelector('.overlay');
188
+ const close = document.getElementById('close');
189
+
190
+
191
+ open.addEventListener('click', () => {
192
+ overlay.classList.add('show');
193
+ open.classList.add('hide');
194
+
195
+
196
+ });
197
+
198
+ close.addEventListener('click', () => {
199
+ overlay.classList.remove('show');
200
+ open.classList.remove('hide');
201
+
202
+
203
+ });
204
+ }
205
+ ```