質問編集履歴
2
記載漏れの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -355,3 +355,101 @@
|
|
|
355
355
|
|
|
356
356
|
|
|
357
357
|
```
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
- Burger.tsx
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
```TypeScript
|
|
366
|
+
|
|
367
|
+
import * as React from 'react';
|
|
368
|
+
|
|
369
|
+
import styled from 'styled-components';
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
const Burger = () => {
|
|
374
|
+
|
|
375
|
+
return (
|
|
376
|
+
|
|
377
|
+
<Button>
|
|
378
|
+
|
|
379
|
+
<div />
|
|
380
|
+
|
|
381
|
+
<div />
|
|
382
|
+
|
|
383
|
+
<div />
|
|
384
|
+
|
|
385
|
+
</Button>
|
|
386
|
+
|
|
387
|
+
)
|
|
388
|
+
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
export { Burger };
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
|
|
397
|
+
const Button = styled.button`
|
|
398
|
+
|
|
399
|
+
position: absolute;
|
|
400
|
+
|
|
401
|
+
top: 5%;
|
|
402
|
+
|
|
403
|
+
left: 2rem;
|
|
404
|
+
|
|
405
|
+
display: flex;
|
|
406
|
+
|
|
407
|
+
flex-direction: column;
|
|
408
|
+
|
|
409
|
+
justify-content: space-around;
|
|
410
|
+
|
|
411
|
+
width: 2rem;
|
|
412
|
+
|
|
413
|
+
height: 2rem;
|
|
414
|
+
|
|
415
|
+
background: transparent;
|
|
416
|
+
|
|
417
|
+
border: none;
|
|
418
|
+
|
|
419
|
+
cursor: pointer;
|
|
420
|
+
|
|
421
|
+
padding: 0;
|
|
422
|
+
|
|
423
|
+
z-index: 10;
|
|
424
|
+
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
&:focus {
|
|
428
|
+
|
|
429
|
+
outline: none;
|
|
430
|
+
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
div {
|
|
436
|
+
|
|
437
|
+
width: 2rem;
|
|
438
|
+
|
|
439
|
+
height: 0.25rem;
|
|
440
|
+
|
|
441
|
+
border-radius: 10px;
|
|
442
|
+
|
|
443
|
+
transition: all 0.3s linear;
|
|
444
|
+
|
|
445
|
+
position: relative;
|
|
446
|
+
|
|
447
|
+
transform-origin: 1px;
|
|
448
|
+
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
`;
|
|
452
|
+
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
```
|
1
みやすさ改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
webブラウザのウィンドウサイズによってヘッダーナビゲーションを動的に変更したいと思っています。
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
|
-
具体的にはモバイル用のウィンドウサイズとPC用のウィンドウサイズでヘッダーナビゲーションを変更しようと思っているのですが、
|
|
7
|
+
具体的にはモバイル用のウィンドウサイズとPC用のウィンドウサイズでヘッダーナビゲーションを変更しようと思っているのですが、
|
|
6
|
-
|
|
8
|
+
|
|
7
|
-
ブラウザをリロードすると、下のワーニングメッセージが表示されてしまいます。
|
|
9
|
+
ウィンドウサイズをモバイル用サイズにした状態でブラウザをリロードすると、下のワーニングメッセージが表示されてしまいます。
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
|
|
@@ -180,6 +182,8 @@
|
|
|
180
182
|
|
|
181
183
|
}, [])
|
|
182
184
|
|
|
185
|
+
// stateで管理されたwidth, heightをreturnする
|
|
186
|
+
|
|
183
187
|
return windowDimensions;
|
|
184
188
|
|
|
185
189
|
}
|
|
@@ -244,7 +248,7 @@
|
|
|
244
248
|
|
|
245
249
|
} else {
|
|
246
250
|
|
|
247
|
-
//
|
|
251
|
+
// PC用のHeader
|
|
248
252
|
|
|
249
253
|
return (
|
|
250
254
|
|