質問編集履歴

3

css変更

2021/04/10 01:50

投稿

mikan23
mikan23

スコア13

test CHANGED
File without changes
test CHANGED
@@ -18,8 +18,14 @@
18
18
 
19
19
 
20
20
 
21
+
22
+
23
+
24
+
21
25
  ```html
22
26
 
27
+ (index.html)
28
+
23
29
  <header id="top-head">
24
30
 
25
31
  <div class="inner">
@@ -78,154 +84,298 @@
78
84
 
79
85
  ```
80
86
 
87
+ ```html
88
+
89
+ (menu.html)
90
+
91
+ <header id="top-head">
92
+
93
+ <div class="inner">
94
+
95
+ <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
96
+
97
+ <div id="nav_toggle">
98
+
99
+ <div>
100
+
101
+ <span></span>
102
+
103
+ <span></span>
104
+
105
+ <span></span>
106
+
107
+ </div>
108
+
109
+ </div>
110
+
111
+ <nav>
112
+
113
+ <ul>
114
+
115
+ <li class="menu"><a href="index.html">TOP</a></li>
116
+
117
+ <li class="menu"><a href="index.html#news">NEWS</a></li>
118
+
119
+ <li class="menu"><a href="index.html#about">ABOUT</a></li>
120
+
121
+ <li class="menu"><a href="menu.html">MENU</a></li>
122
+
123
+ <li class="menu"><a href="index.html#access">ACCESS</a></li>
124
+
125
+ <li>
126
+
127
+ <div class="sns1">
128
+
129
+ <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
130
+
131
+ <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
132
+
133
+ <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
134
+
135
+ </div>
136
+
137
+ </li>
138
+
139
+ </ul>
140
+
141
+ </nav>
142
+
143
+ </div>
144
+
145
+ </header>
146
+
147
+ ```
148
+
81
149
  ```css
82
150
 
83
- index.html)
84
-
85
- <header id="top-head">
86
-
87
- <div class="inner">
88
-
89
- <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
90
-
91
- <div id="nav_toggle">
92
-
93
- <div>
94
-
95
- <span></span>
96
-
97
- <span></span>
98
-
99
- <span></span>
100
-
101
- </div>
102
-
103
- </div>
104
-
105
- <nav>
106
-
107
- <ul>
108
-
109
- <li class="menu"><a href="index.html">TOP</a></li>
110
-
111
- <li class="menu"><a href="index.html#news">NEWS</a></li>
112
-
113
- <li class="menu"><a href="index.html#about">ABOUT</a></li>
114
-
115
- <li class="menu"><a href="menu.html">MENU</a></li>
116
-
117
- <li class="menu"><a href="index.html#access">ACCESS</a></li>
118
-
119
- <li>
120
-
121
- <div class="sns1">
122
-
123
- <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
124
-
125
- <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
126
-
127
- <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
128
-
129
- </div>
130
-
131
- </li>
132
-
133
- </ul>
134
-
135
- </nav>
136
-
137
- </div>
138
-
139
- </header>
151
+ @media screen and (max-width: 770px) {
152
+
153
+ #top-head {
154
+
155
+ height: 50px;
156
+
157
+ }
158
+
159
+ .logopic {
160
+
161
+ height: 80%;
162
+
163
+ width: 80%;
164
+
165
+ }
166
+
167
+
168
+
169
+ /*hamburger menu style*/
170
+
171
+ #nav_toggle {
172
+
173
+ background: #fdfdfd00;
174
+
175
+ display: block;
176
+
177
+ width: 22px;
178
+
179
+ height: 22px;
180
+
181
+ position: relative;
182
+
183
+ top: 0px;
184
+
185
+ z-index: 1000;
186
+
187
+ }
188
+
189
+ #nav_toggle div {
190
+
191
+ position: relative;
192
+
193
+ }
194
+
195
+ /*hamburger menu close style*/
196
+
197
+ #nav_toggle span {
198
+
199
+ display: block;
200
+
201
+ height: 1px;
202
+
203
+ background: #262626;
204
+
205
+ position: absolute;
206
+
207
+ width: 100%;
208
+
209
+ left: 0;
210
+
211
+ z-index: 900;
212
+
213
+ -webkit-transition: 0.5s ease-in-out;
214
+
215
+ -moz-transition: 0.5s ease-in-out;
216
+
217
+ transition: 0.5s ease-in-out;
218
+
219
+ }
220
+
221
+ #nav_toggle span:nth-child(1) {
222
+
223
+ top: 0px;
224
+
225
+ }
226
+
227
+ #nav_toggle span:nth-child(2) {
228
+
229
+ top: 10px;
230
+
231
+ }
232
+
233
+ #nav_toggle span:nth-child(3) {
234
+
235
+ top: 20px;
236
+
237
+ }
238
+
239
+ /*hamburger menu open style*/
240
+
241
+ .open #nav_toggle span:nth-child(1) {
242
+
243
+ top: 10px;
244
+
245
+ -webkit-transform: rotate(135deg);
246
+
247
+ -moz-transform: rotate(135deg);
248
+
249
+ transform: rotate(135deg);
250
+
251
+ }
252
+
253
+ .open #nav_toggle span:nth-child(2) {
254
+
255
+ width: 0;
256
+
257
+ left: 50%;
258
+
259
+ }
260
+
261
+ .open #nav_toggle span:nth-child(3) {
262
+
263
+ top: 10px;
264
+
265
+ -webkit-transform: rotate(-135deg);
266
+
267
+ -moz-transform: rotate(-135deg);
268
+
269
+ transform: rotate(-135deg);
270
+
271
+ }
272
+
273
+ /*nav style*/
274
+
275
+ #top-head nav {
276
+
277
+ display: none;
278
+
279
+ position: absolute;
280
+
281
+ top: 0;
282
+
283
+ right: 0;
284
+
285
+ width: 100%;
286
+
287
+ height: 100vh;
288
+
289
+ background: #f8f8f8dd;
290
+
291
+ z-index: 800;
292
+
293
+ }
294
+
295
+ #top-head nav ul {
296
+
297
+ display: block;
298
+
299
+ width: 100%;
300
+
301
+ }
302
+
303
+ #top-head nav ul li {
304
+
305
+ text-align: center;
306
+
307
+ border-bottom: 1px solid #dcdcdc;
308
+
309
+ }
310
+
311
+ #top-head nav ul li:last-child {
312
+
313
+ border: none;
314
+
315
+ }
316
+
317
+ /*nav link style*/
318
+
319
+ #top-head nav ul li a {
320
+
321
+ display: block;
322
+
323
+ color: #262626;
324
+
325
+ padding: 28px; /*列の高さ*/
326
+
327
+ }
328
+
329
+
330
+
331
+ .sns1 {
332
+
333
+ display: flex;
334
+
335
+ justify-content: center;
336
+
337
+ }
338
+
339
+ .menu a::after {
340
+
341
+ content: none;
342
+
343
+ }
344
+
345
+ .menu a:hover::after {
346
+
347
+ content: none;
348
+
349
+ }
350
+
351
+ }
140
352
 
141
353
  ```
142
354
 
143
- ```css
355
+ ```js
144
-
356
+
145
- (menu.html)
357
+ $('#nav_toggle').click(function(){
146
-
358
+
147
- <header id="top-head">
359
+ $("#top-head").toggleClass('open');
148
-
149
- <div class="inner">
360
+
150
-
151
- <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
152
-
153
- <div id="nav_toggle">
361
+ $("nav").slideToggle(500);
154
-
155
- <div>
362
+
156
-
157
- <span></span>
158
-
159
- <span></span>
160
-
161
- <span></span>
162
-
163
- </div>
164
-
165
- </div>
166
-
167
- <nav>
168
-
169
- <ul>
363
+ });
170
-
171
- <li class="menu"><a href="index.html">TOP</a></li>
364
+
172
-
173
- <li class="menu"><a href="index.html#news">NEWS</a></li>
174
-
175
- <li class="menu"><a href="index.html#about">ABOUT</a></li>
176
-
177
- <li class="menu"><a href="menu.html">MENU</a></li>
178
-
179
- <li class="menu"><a href="index.html#access">ACCESS</a></li>
180
-
181
- <li>
182
-
183
- <div class="sns1">
184
-
185
- <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
186
-
187
- <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
188
-
189
- <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
190
-
191
- </div>
192
-
193
- </li>
194
-
195
- </ul>
196
-
197
- </nav>
198
-
199
- </div>
200
-
201
- </header>
365
+ //menu link click
366
+
367
+ $('nav a').click(function(){
368
+
369
+ if(window.innerWidth <= 680){
370
+
371
+ $("#top-head").toggleClass('open');
372
+
373
+ $("nav").slideToggle(500);
374
+
375
+ }
376
+
377
+ });
378
+
379
+ });
202
380
 
203
381
  ```
204
-
205
- ```js
206
-
207
- $('#nav_toggle').click(function(){
208
-
209
- $("#top-head").toggleClass('open');
210
-
211
- $("nav").slideToggle(500);
212
-
213
- });
214
-
215
- //menu link click
216
-
217
- $('nav a').click(function(){
218
-
219
- if(window.innerWidth <= 680){
220
-
221
- $("#top-head").toggleClass('open');
222
-
223
- $("nav").slideToggle(500);
224
-
225
- }
226
-
227
- });
228
-
229
- });
230
-
231
- ```

2

2つ目のcss追加

2021/04/10 01:50

投稿

mikan23
mikan23

スコア13

test CHANGED
File without changes
test CHANGED
@@ -80,207 +80,125 @@
80
80
 
81
81
  ```css
82
82
 
83
- @media screen and (max-width: 770px) {
84
-
85
- #top-head {
86
-
87
- height: 50px;
88
-
89
- }
90
-
91
- .logopic {
92
-
93
- height: 80%;
94
-
95
- width: 80%;
96
-
97
- }
98
-
99
-
100
-
101
- /*hamburger menu style*/
102
-
103
- #nav_toggle {
104
-
105
- background: #fdfdfd00;
106
-
107
- display: block;
108
-
109
- width: 22px;
110
-
111
- height: 22px;
112
-
113
- position: relative;
114
-
115
- top: 0px;
116
-
117
- z-index: 1000;
118
-
119
- }
120
-
121
- #nav_toggle div {
122
-
123
- position: relative;
124
-
125
- }
126
-
127
- /*hamburger menu close style*/
128
-
129
- #nav_toggle span {
130
-
131
- display: block;
132
-
133
- height: 1px;
134
-
135
- background: #262626;
136
-
137
- position: absolute;
138
-
139
- width: 100%;
140
-
141
- left: 0;
142
-
143
- z-index: 900;
144
-
145
- -webkit-transition: 0.5s ease-in-out;
146
-
147
- -moz-transition: 0.5s ease-in-out;
148
-
149
- transition: 0.5s ease-in-out;
150
-
151
- }
152
-
153
- #nav_toggle span:nth-child(1) {
154
-
155
- top: 0px;
156
-
157
- }
158
-
159
- #nav_toggle span:nth-child(2) {
160
-
161
- top: 10px;
162
-
163
- }
164
-
165
- #nav_toggle span:nth-child(3) {
166
-
167
- top: 20px;
168
-
169
- }
170
-
171
- /*hamburger menu open style*/
172
-
173
- .open #nav_toggle span:nth-child(1) {
174
-
175
- top: 10px;
176
-
177
- -webkit-transform: rotate(135deg);
178
-
179
- -moz-transform: rotate(135deg);
180
-
181
- transform: rotate(135deg);
182
-
183
- }
184
-
185
- .open #nav_toggle span:nth-child(2) {
186
-
187
- width: 0;
188
-
189
- left: 50%;
190
-
191
- }
192
-
193
- .open #nav_toggle span:nth-child(3) {
194
-
195
- top: 10px;
196
-
197
- -webkit-transform: rotate(-135deg);
198
-
199
- -moz-transform: rotate(-135deg);
200
-
201
- transform: rotate(-135deg);
202
-
203
- }
204
-
205
- /*nav style*/
206
-
207
- #top-head nav {
208
-
209
- display: none;
210
-
211
- position: absolute;
212
-
213
- top: 0;
214
-
215
- right: 0;
216
-
217
- width: 100%;
218
-
219
- height: 100vh;
220
-
221
- background: #f8f8f8dd;
222
-
223
- z-index: 800;
224
-
225
- }
226
-
227
- #top-head nav ul {
228
-
229
- display: block;
230
-
231
- width: 100%;
232
-
233
- }
234
-
235
- #top-head nav ul li {
236
-
237
- text-align: center;
238
-
239
- border-bottom: 1px solid #dcdcdc;
240
-
241
- }
242
-
243
- #top-head nav ul li:last-child {
244
-
245
- border: none;
246
-
247
- }
248
-
249
- /*nav link style*/
250
-
251
- #top-head nav ul li a {
252
-
253
- display: block;
254
-
255
- color: #262626;
256
-
257
- padding: 28px; /*列の高さ*/
258
-
259
- }
260
-
261
-
262
-
263
- .sns1 {
264
-
265
- display: flex;
266
-
267
- justify-content: center;
268
-
269
- }
270
-
271
- .menu a::after {
272
-
273
- content: none;
274
-
275
- }
276
-
277
- .menu a:hover::after {
278
-
279
- content: none;
280
-
281
- }
282
-
283
- }
83
+ index.html)
84
+
85
+ <header id="top-head">
86
+
87
+ <div class="inner">
88
+
89
+ <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
90
+
91
+ <div id="nav_toggle">
92
+
93
+ <div>
94
+
95
+ <span></span>
96
+
97
+ <span></span>
98
+
99
+ <span></span>
100
+
101
+ </div>
102
+
103
+ </div>
104
+
105
+ <nav>
106
+
107
+ <ul>
108
+
109
+ <li class="menu"><a href="index.html">TOP</a></li>
110
+
111
+ <li class="menu"><a href="index.html#news">NEWS</a></li>
112
+
113
+ <li class="menu"><a href="index.html#about">ABOUT</a></li>
114
+
115
+ <li class="menu"><a href="menu.html">MENU</a></li>
116
+
117
+ <li class="menu"><a href="index.html#access">ACCESS</a></li>
118
+
119
+ <li>
120
+
121
+ <div class="sns1">
122
+
123
+ <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
124
+
125
+ <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
126
+
127
+ <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
128
+
129
+ </div>
130
+
131
+ </li>
132
+
133
+ </ul>
134
+
135
+ </nav>
136
+
137
+ </div>
138
+
139
+ </header>
140
+
141
+ ```
142
+
143
+ ```css
144
+
145
+ (menu.html)
146
+
147
+ <header id="top-head">
148
+
149
+ <div class="inner">
150
+
151
+ <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
152
+
153
+ <div id="nav_toggle">
154
+
155
+ <div>
156
+
157
+ <span></span>
158
+
159
+ <span></span>
160
+
161
+ <span></span>
162
+
163
+ </div>
164
+
165
+ </div>
166
+
167
+ <nav>
168
+
169
+ <ul>
170
+
171
+ <li class="menu"><a href="index.html">TOP</a></li>
172
+
173
+ <li class="menu"><a href="index.html#news">NEWS</a></li>
174
+
175
+ <li class="menu"><a href="index.html#about">ABOUT</a></li>
176
+
177
+ <li class="menu"><a href="menu.html">MENU</a></li>
178
+
179
+ <li class="menu"><a href="index.html#access">ACCESS</a></li>
180
+
181
+ <li>
182
+
183
+ <div class="sns1">
184
+
185
+ <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
186
+
187
+ <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
188
+
189
+ <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
190
+
191
+ </div>
192
+
193
+ </li>
194
+
195
+ </ul>
196
+
197
+ </nav>
198
+
199
+ </div>
200
+
201
+ </header>
284
202
 
285
203
  ```
286
204
 

1

css追加

2021/04/10 01:37

投稿

mikan23
mikan23

スコア13

test CHANGED
File without changes
test CHANGED
@@ -78,7 +78,211 @@
78
78
 
79
79
  ```
80
80
 
81
-
81
+ ```css
82
+
83
+ @media screen and (max-width: 770px) {
84
+
85
+ #top-head {
86
+
87
+ height: 50px;
88
+
89
+ }
90
+
91
+ .logopic {
92
+
93
+ height: 80%;
94
+
95
+ width: 80%;
96
+
97
+ }
98
+
99
+
100
+
101
+ /*hamburger menu style*/
102
+
103
+ #nav_toggle {
104
+
105
+ background: #fdfdfd00;
106
+
107
+ display: block;
108
+
109
+ width: 22px;
110
+
111
+ height: 22px;
112
+
113
+ position: relative;
114
+
115
+ top: 0px;
116
+
117
+ z-index: 1000;
118
+
119
+ }
120
+
121
+ #nav_toggle div {
122
+
123
+ position: relative;
124
+
125
+ }
126
+
127
+ /*hamburger menu close style*/
128
+
129
+ #nav_toggle span {
130
+
131
+ display: block;
132
+
133
+ height: 1px;
134
+
135
+ background: #262626;
136
+
137
+ position: absolute;
138
+
139
+ width: 100%;
140
+
141
+ left: 0;
142
+
143
+ z-index: 900;
144
+
145
+ -webkit-transition: 0.5s ease-in-out;
146
+
147
+ -moz-transition: 0.5s ease-in-out;
148
+
149
+ transition: 0.5s ease-in-out;
150
+
151
+ }
152
+
153
+ #nav_toggle span:nth-child(1) {
154
+
155
+ top: 0px;
156
+
157
+ }
158
+
159
+ #nav_toggle span:nth-child(2) {
160
+
161
+ top: 10px;
162
+
163
+ }
164
+
165
+ #nav_toggle span:nth-child(3) {
166
+
167
+ top: 20px;
168
+
169
+ }
170
+
171
+ /*hamburger menu open style*/
172
+
173
+ .open #nav_toggle span:nth-child(1) {
174
+
175
+ top: 10px;
176
+
177
+ -webkit-transform: rotate(135deg);
178
+
179
+ -moz-transform: rotate(135deg);
180
+
181
+ transform: rotate(135deg);
182
+
183
+ }
184
+
185
+ .open #nav_toggle span:nth-child(2) {
186
+
187
+ width: 0;
188
+
189
+ left: 50%;
190
+
191
+ }
192
+
193
+ .open #nav_toggle span:nth-child(3) {
194
+
195
+ top: 10px;
196
+
197
+ -webkit-transform: rotate(-135deg);
198
+
199
+ -moz-transform: rotate(-135deg);
200
+
201
+ transform: rotate(-135deg);
202
+
203
+ }
204
+
205
+ /*nav style*/
206
+
207
+ #top-head nav {
208
+
209
+ display: none;
210
+
211
+ position: absolute;
212
+
213
+ top: 0;
214
+
215
+ right: 0;
216
+
217
+ width: 100%;
218
+
219
+ height: 100vh;
220
+
221
+ background: #f8f8f8dd;
222
+
223
+ z-index: 800;
224
+
225
+ }
226
+
227
+ #top-head nav ul {
228
+
229
+ display: block;
230
+
231
+ width: 100%;
232
+
233
+ }
234
+
235
+ #top-head nav ul li {
236
+
237
+ text-align: center;
238
+
239
+ border-bottom: 1px solid #dcdcdc;
240
+
241
+ }
242
+
243
+ #top-head nav ul li:last-child {
244
+
245
+ border: none;
246
+
247
+ }
248
+
249
+ /*nav link style*/
250
+
251
+ #top-head nav ul li a {
252
+
253
+ display: block;
254
+
255
+ color: #262626;
256
+
257
+ padding: 28px; /*列の高さ*/
258
+
259
+ }
260
+
261
+
262
+
263
+ .sns1 {
264
+
265
+ display: flex;
266
+
267
+ justify-content: center;
268
+
269
+ }
270
+
271
+ .menu a::after {
272
+
273
+ content: none;
274
+
275
+ }
276
+
277
+ .menu a:hover::after {
278
+
279
+ content: none;
280
+
281
+ }
282
+
283
+ }
284
+
285
+ ```
82
286
 
83
287
  ```js
84
288