質問編集履歴

1

更新いたしました

2020/08/12 13:27

投稿

Surofuture
Surofuture

スコア49

test CHANGED
File without changes
test CHANGED
@@ -20,63 +20,21 @@
20
20
 
21
21
  ```HTML
22
22
 
23
- <section class="banner" id="sec">
24
-
25
- <header>
26
-
27
- <a href="#" class="logo"><img src="images/logo-white.png" alt="" /></a>
28
-
29
- <div id="toggle" onclick="toggle()"></div>
30
-
31
- </header>
32
-
33
- <!--===============HOME================-->
34
-
35
- <div class="content" id="home">
36
-
37
- <h1 class="text-white text-center">ああああ</h1>
38
-
39
- <ul class="sci list-unstyled">
40
-
41
- <li>
42
-
43
- <a href="#"><i class="fab fa-twitter fa-3x"></i></a>
44
-
45
- </li>
46
-
47
- <li>
48
-
49
- <a href="#"><i class="fab fa-facebook-f fa-3x"></i></a>
50
-
51
- </li>
52
-
53
- <li>
54
-
55
- <a href="#"><i class="fab fa-instagram fa-3x"></i></a>
56
-
57
- </li>
58
-
59
- </ul>
60
-
61
- </div>
62
-
63
- </section>
64
-
65
23
  <div id="navigation">
66
24
 
67
25
  <ul class="list-unstyled" id="navItems">
68
26
 
69
- <li><a href="#sec" class="text-dark h1">Home</a></li>
27
+ <li><a href="#sec" class="text-dark h1 #navItem">Home</a></li>
70
28
 
71
- <li><a href="#about" class="text-dark h1">About</a></li>
29
+ <li><a href="#about" class="text-dark h1 #navItem">About</a></li>
72
30
 
73
- <li><a href="#skill" class="text-dark h1">Skill</a></li>
31
+ <li><a href="#skill" class="text-dark h1 #navItem">Skill</a></li>
74
32
 
75
- <li><a href="#services" class="text-dark h1">Services</a></li>
33
+ <li><a href="#services" class="text-dark h1 #navItem">Services</a></li>
76
34
 
77
- <li><a href="#works" class="text-dark h1">Works</a></li>
35
+ <li><a href="#works" class="text-dark h1 #navItem">Works</a></li>
78
36
 
79
- <li><a href="#contact" class="text-dark h1">Contact</a></li>
37
+ <li><a href="#contact" class="text-dark h1 #navItem">Contact</a></li>
80
38
 
81
39
  </ul>
82
40
 
@@ -85,224 +43,6 @@
85
43
  ```
86
44
 
87
45
  ```sass
88
-
89
- .banner {
90
-
91
- position: relative;
92
-
93
- width: 100%;
94
-
95
- min-height: 100vh;
96
-
97
- padding: 100px;
98
-
99
- background: url(images/bg.jpg);
100
-
101
- background-size: cover;
102
-
103
- display: flex;
104
-
105
- align-items: center;
106
-
107
- transition: 0.5s;
108
-
109
- z-index: 2;
110
-
111
-
112
-
113
- header {
114
-
115
- position: fixed;
116
-
117
- top: 0;
118
-
119
- left: 0;
120
-
121
- width: 100%;
122
-
123
- display: flex;
124
-
125
- justify-content: space-between;
126
-
127
- padding: 40px 100px;
128
-
129
- z-index: 999;
130
-
131
- transition: 0.6s;
132
-
133
-
134
-
135
- .logo {
136
-
137
- position: relative;
138
-
139
- font-weight: 700;
140
-
141
- color: #fff;
142
-
143
- text-decoration: none;
144
-
145
- font-size: 2em;
146
-
147
- text-transform: uppercase;
148
-
149
- letter-spacing: 2px;
150
-
151
- transition: 0.6s;
152
-
153
-
154
-
155
- img {
156
-
157
- width: 200px;
158
-
159
- height: auto;
160
-
161
- }
162
-
163
- }
164
-
165
-
166
-
167
- #toggle {
168
-
169
- position: relative;
170
-
171
- width: 30px;
172
-
173
- height: 30px;
174
-
175
- cursor: pointer;
176
-
177
- }
178
-
179
-
180
-
181
- #toggle::before {
182
-
183
- content: "";
184
-
185
- position: absolute;
186
-
187
- top: 7px;
188
-
189
- width: 100%;
190
-
191
- height: 2px;
192
-
193
- background: #fff;
194
-
195
- }
196
-
197
-
198
-
199
- #toggle::after {
200
-
201
- content: "";
202
-
203
- position: absolute;
204
-
205
- bottom: 7px;
206
-
207
- width: 100%;
208
-
209
- height: 2px;
210
-
211
- background: #fff;
212
-
213
- }
214
-
215
- }
216
-
217
-
218
-
219
- .content {
220
-
221
- .sci {
222
-
223
- position: absolute;
224
-
225
- display: flex;
226
-
227
- flex-direction: column;
228
-
229
- right: 100px;
230
-
231
- transition: 0.5s;
232
-
233
-
234
-
235
- a {
236
-
237
- position: relative;
238
-
239
- display: grid;
240
-
241
- place-items: center;
242
-
243
- width: 50px;
244
-
245
- height: 50px;
246
-
247
- text-decoration: none;
248
-
249
- color: black;
250
-
251
- border: 1px solid #fff;
252
-
253
- border-radius: 50%;
254
-
255
- margin: 10px 0 0;
256
-
257
- }
258
-
259
-
260
-
261
- a:hover {
262
-
263
- background: #fff;
264
-
265
- }
266
-
267
- }
268
-
269
- }
270
-
271
- }
272
-
273
-
274
-
275
- .banner.active header #toggle::before {
276
-
277
- top: 50%;
278
-
279
- left: 50%;
280
-
281
- transform: translate(-50%, -50%) rotate(45deg);
282
-
283
- }
284
-
285
-
286
-
287
- .banner.active header #toggle::after {
288
-
289
- top: 50%;
290
-
291
- left: 50%;
292
-
293
- transform: translate(-50%, -50%) rotate(-45deg);
294
-
295
- }
296
-
297
-
298
-
299
- .banner.active {
300
-
301
- transform: translateX(-400px);
302
-
303
- }
304
-
305
-
306
46
 
307
47
  #navigation {
308
48
 
@@ -340,27 +80,11 @@
340
80
 
341
81
  ```javascript
342
82
 
343
- <script type="text/javascript">
344
-
345
- // home
83
+ <script>
346
-
347
- function toggle() {
348
-
349
- let sec = document.getElementById("sec");
350
-
351
- let nav = document.getElementById("navigation");
352
-
353
- sec.classList.toggle("active");
354
-
355
- nav.classList.toggle("active");
356
-
357
- }
358
-
359
-
360
84
 
361
85
  $('#navItems a[href]').on('click', function(event) {
362
86
 
363
- $('#toggle').trigger('click');
87
+ $('#navItem').trigger('click');
364
88
 
365
89
  });
366
90