質問編集履歴

1

ヘッダー部分のコードを追加しました

2021/08/07 04:49

投稿

mei.m
mei.m

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,678 @@
1
+ ```ここに言語を入力
2
+
3
+ ↓html
4
+
5
+ <!DOCTYPE html>
6
+
7
+ <html>
8
+
9
+ <head>
10
+
11
+ <meta charset="UTF-8">
12
+
13
+ <title>イオ太ノート</title>
14
+
15
+ <link rel="stylesheet" href="normalize.css">
16
+
17
+ <link rel="stylesheet" type="text/css" href="maistyle.css">
18
+
19
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><!--ファビコンhttps://realfavicongenerator.net/ -->
20
+
21
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
22
+
23
+ <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
24
+
25
+ <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
26
+
27
+
28
+
29
+ <!-- jQueryの読み込み -->
30
+
31
+ <!-- スマホナビの表示・非表示 「humに入れた要素」を「クリック」したら
32
+
33
+ 「navに入れた要素」に「toggleというclass」を「足したり・消したり」する-->
34
+
35
+ <script>
36
+
37
+ $(function() {
38
+
39
+ const hum = $('#hamburger, .close')
40
+
41
+ const nav = $('.sp-nav')
42
+
43
+ hum.on('click', function(){
44
+
45
+ nav.toggleClass('toggle');
46
+
47
+ });
48
+
49
+ });
50
+
51
+ </script>
52
+
53
+ <!--<link href="jquery.mb.bgndgallery.min.css" rel="stylesheet" media="all" type="text/css" />
54
+
55
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
56
+
57
+ <script type="text/javascript" src="jquery.mb.bgndGallery.min.js"></script>
58
+
59
+ -->
60
+
61
+ <link href="jquery.mb.bgndgallery.min.css" rel="stylesheet" media="all" type="text/css" />
62
+
63
+ <script type="text/javascript" src="./js/jquery-1.12.0.min.js"></script>
64
+
65
+ <script type="text/javascript" src="jquery.mb.bgndGallery.min.js"></script><!--https://blog.raizzenet.com/how-to-use-jquery-mb-bgndgallery/-->
66
+
67
+ <script type="text/javascript">
68
+
69
+ $(function(){
70
+
71
+ $.mbBgndGallery.buildGallery({
72
+
73
+ containment:"body",
74
+
75
+ timer:500,
76
+
77
+ effTimer:8000,
78
+
79
+ effect:"zoom",
80
+
81
+ autoStart:true,
82
+
83
+ images:[
84
+
85
+ "./imagesi/i1.jpg",
86
+
87
+ "./imagesi/i2.jpg",
88
+
89
+ "./imagesi/i3.jpg",
90
+
91
+ "./imagesi/i4.jpg",
92
+
93
+ "./imagesi/i5.jpg",
94
+
95
+ "./imagesi/i6.jpg",
96
+
97
+ "./imagesi/i7.jpg",
98
+
99
+ "./imagesi/i8.jpg",
100
+
101
+ ]
102
+
103
+ });
104
+
105
+ });
106
+
107
+ </script>
108
+
109
+
110
+
111
+ </head>
112
+
113
+
114
+
115
+ <body>
116
+
117
+ <header>
118
+
119
+ <div id="logo">
120
+
121
+ <a href="index.html"><img src="title.gif" alt="イオ太ノート" class="iota"></a>
122
+
123
+ </div>
124
+
125
+ <nav id="gloval-nav">
126
+
127
+ <ul>
128
+
129
+ <li><a href="index.html" class="arrow arrow--right" style="color: #938b4b">トップ</a></li>
130
+
131
+ <li><a href="profi-ru.html" class="arrow arrow--right" style= "color: #ffffff;">プロフィール</a></li>
132
+
133
+ <li><a href="seicyou.html" class="arrow arrow--right" style= "color: #ffffff;">成長記録</a></li>
134
+
135
+ <li><a href="sakuhinnsyuu.html" class="arrow arrow--right" style= "color: #ffffff;">作品集</a></li>
136
+
137
+ <li><a href="photo.html" class="arrow arrow--right" style= "color: #ffffff;">写真集</a></li>
138
+
139
+ <li><a href="dokusyo.html" class="arrow arrow--right" style= "color: #ffffff;">読書リスト</a></li>
140
+
141
+ <li><a href="guzzu.html" class="arrow arrow--right" style= "color: #ffffff;">持ち物</a></li>
142
+
143
+ </ul>
144
+
145
+ </nav>
146
+
147
+ <nav class="sp-nav">
148
+
149
+ <ul>
150
+
151
+ <li><a href="index.html" class="arrow arrow--right" style="color: #938b4b">トップ</a></li>
152
+
153
+ <li><a href="profi-ru.html" class="arrow arrow--right" style= "color: #ffffff;">プロフィール</a></li>
154
+
155
+ <li><a href="seicyou.html" class="arrow arrow--right" style= "color: #ffffff;">成長記録</a></li>
156
+
157
+ <li><a href="sakuhinnsyuu.html" class="arrow arrow--right" style= "color: #ffffff;">作品集</a></li>
158
+
159
+ <li><a href="photo.html" class="arrow arrow--right" style= "color: #ffffff;">写真集</a></li>
160
+
161
+ <li><a href="dokusyo.html" class="arrow arrow--right" style= "color: #ffffff;">読書リスト</a></li>
162
+
163
+ <li><a href="guzzu.html" class="arrow arrow--right" style= "color: #ffffff;">持ち物</a></li>
164
+
165
+ <li class="close"><span>閉じる</span></li>
166
+
167
+ </ul>
168
+
169
+ </nav>
170
+
171
+ <div id="hamburger">
172
+
173
+ <span></span>
174
+
175
+ </div>
176
+
177
+ </header>
178
+
179
+
180
+
181
+
182
+
183
+ ↓css
184
+
185
+
186
+
187
+ /*ヘッダーゾーン*/
188
+
189
+ header {
190
+
191
+ position: relative;
192
+
193
+ z-index: 2;
194
+
195
+ flex-grow: 0; /* 省略可 */
196
+
197
+ flex-basis: auto; /* 省略可 */
198
+
199
+ width: 100%;
200
+
201
+ margin: 0 15px 0 auto;
202
+
203
+ position: fixed;/*positionプロパティーで画面の上部にヘッダーを固定このせいでmainが潜るのでmargin-topで調整する*/
204
+
205
+ top: 0;/*画面上から0pxのところに配置*/
206
+
207
+ display: flex;/*header直下の子要素のレイアウトをコントロールできる状態*/
208
+
209
+ align-items: center;/*子要素が縦方向中心配置*/
210
+
211
+ }
212
+
213
+ /*#logo img {
214
+
215
+ padding: 6px;
216
+
217
+ }
218
+
219
+ .iota {
220
+
221
+ margin-left: 8px;
222
+
223
+ }*/
224
+
225
+ ul {
226
+
227
+ list-style: none;/*.を消して無駄な余白をなくす*/
228
+
229
+ margin: 0 80px 0 auto;
230
+
231
+ display: flex;/*横並び*/
232
+
233
+ justify-content: space-around;/*両端ボックスは始端、終端からボックス間隔の半分の距離*/
234
+
235
+ }
236
+
237
+ li {
238
+
239
+ margin: 0 0 0 20px;
240
+
241
+ font-size: 14px;
242
+
243
+ color: #203744;
244
+
245
+ align-items: center;
246
+
247
+ }
248
+
249
+ nav {
250
+
251
+ margin: 0 0 0 auto;/*nav要素の外側の余白を調整する「margin」にautoを設定して、
252
+
253
+ タイトルとナビゲーションが両サイドの配置になるように
254
+
255
+ 「nav」要素を右端に配置したいので、左マージンに「auto」を設定します。
256
+
257
+ すると、左側に余白ができて、nav要素を右端まで押し出してくれます。*/
258
+
259
+ }
260
+
261
+ /*indexスライドショー*/
262
+
263
+ body {
264
+
265
+ z-index:0;
266
+
267
+ margin:0;
268
+
269
+ padding:0;
270
+
271
+ }
272
+
273
+
274
+
275
+ /*ヘッダー ナビゲーション */
276
+
277
+ #gloval-nav {
278
+
279
+ width: 100%;
280
+
281
+ white-space: nowrap;
282
+
283
+ }
284
+
285
+ .nav {
286
+
287
+ list-style:none;
288
+
289
+ margin: 0 auto 0 auto;
290
+
291
+ display: flex;
292
+
293
+ }
294
+
295
+ .nav li{
296
+
297
+
298
+
299
+ }
300
+
301
+ .nav li:last-child {
302
+
303
+ border-right: #888 1px solid;
304
+
305
+ }
306
+
307
+ .nav li:hover {
308
+
309
+ background-color: #1f3134;/*桃入茶ももしおちゃ*/
310
+
311
+ }
312
+
313
+ a {
314
+
315
+ display: block;
316
+
317
+ /*padding: 1.3em 0;*/
318
+
319
+ text-decoration: none;
320
+
321
+ }
322
+
323
+
324
+
325
+ /*メインゾーン*/
326
+
327
+ #two-column {
328
+
329
+ flex-grow: 1;
330
+
331
+ flex-basis: 0;
332
+
333
+ }
334
+
335
+ main {
336
+
337
+ flex-grow: 1;
338
+
339
+ flex-basis: 0;
340
+
341
+ overflow-y: scroll;
342
+
343
+ overflow-y: scroll;
344
+
345
+ background-color: yellow;
346
+
347
+ padding: 0 8%;
348
+
349
+ margin-top: 15vh;
350
+
351
+ display: flex;
352
+
353
+ justify-content: space-between;
354
+
355
+ align-items: flex-start;
356
+
357
+ }
358
+
359
+
360
+
361
+
362
+
363
+
364
+
365
+ /*メディアクエリ 中間サイズ*/
366
+
367
+ @media screen and (max-width: 1019.9px) {
368
+
369
+ #gloval-nav {
370
+
371
+ display: none;
372
+
373
+ }
374
+
375
+ #logo img {
376
+
377
+ max-width:180px; /* 画像の最大幅 */
378
+
379
+ margin: 12px 0 0 18px;
380
+
381
+ }
382
+
383
+ #hamburger {
384
+
385
+ position: relative;/*配置基準*/
386
+
387
+ display: block;
388
+
389
+ width: 30px;
390
+
391
+ height: 25px;
392
+
393
+ margin: 0 50px 0 auto;
394
+
395
+ }
396
+
397
+ #hamburger span {
398
+
399
+ position: absolute;/*上から丁度半分のところから配置する*/
400
+
401
+ top: 50%;
402
+
403
+ left: 0;
404
+
405
+ display: block;/*ブロック要素にする*/
406
+
407
+ width: 100%;
408
+
409
+ height: 2px;
410
+
411
+ background-color: #634950;/*濃色 こきいろ*/
412
+
413
+ transform: translateY(-50%);
414
+
415
+ }
416
+
417
+ /*メディアクエリ 中間 要素の高さの「50%分」を上にズラす ハンバーガーメニュー*/
418
+
419
+ #hamburger::before {
420
+
421
+ content: '';
422
+
423
+ display: block;
424
+
425
+ position: absolute;
426
+
427
+ top: 0;
428
+
429
+ left: 0;
430
+
431
+ width: 100%;
432
+
433
+ height: 2px;
434
+
435
+ background-color: #634950;
436
+
437
+ }
438
+
439
+ #hamburger::after {
440
+
441
+ content: '';
442
+
443
+ display: block;
444
+
445
+ position: absolute;
446
+
447
+ bottom: 0;
448
+
449
+ left: 0;
450
+
451
+ width: 70%;/*短めにデザイン*/
452
+
453
+ height: 2px;
454
+
455
+ background-color: #634950;
456
+
457
+ }
458
+
459
+ .sp-nav {
460
+
461
+ z-index: 1;/*要素の重なり前面表示1*/
462
+
463
+ position: fixed;
464
+
465
+ top: 0;
466
+
467
+ left: 0;
468
+
469
+ width: 100%;
470
+
471
+ height: 100vh;
472
+
473
+ display: block;
474
+
475
+ width: 100%;
476
+
477
+ background: rgba(0, 0, 0, .8);
478
+
479
+ transition: all .2s ease-in-out;/*表示非表示の変化を0.2秒でアニメーション*/
480
+
481
+ opacity: 0;/*メニューは透明、画面外に出ている状態*/
482
+
483
+ transform: translateY(-100%);/*画面と同じ高さ上にずらす*/
484
+
485
+ }
486
+
487
+ .sp-nav ul {
488
+
489
+ padding: 0;
490
+
491
+ display: flex;/*縦並びで画面中心*/
492
+
493
+ flex-direction: column;/*デフォルトではrow*/
494
+
495
+ justify-content: center;
496
+
497
+ align-items: center;
498
+
499
+ height: 100%;
500
+
501
+ }
502
+
503
+ .sp-nav li {
504
+
505
+ margin: 0;
506
+
507
+ padding: 0;
508
+
509
+ }
510
+
511
+ .sp-nav li span {
512
+
513
+ font-size: 15px;
514
+
515
+ color: #fff;
516
+
517
+ }
518
+
519
+ .sp-nav li a, .sp-nav li span {
520
+
521
+ display: block;
522
+
523
+ padding: 20px 0;/*指でタップし易く余白を確保*/
524
+
525
+ }
526
+
527
+ /*メディアクエリ 中間 閉じるアイコン*/
528
+
529
+ .sp-nav .close {
530
+
531
+ position: relative;
532
+
533
+ padding-left: 20px;/*閉じるが重ならないようスペース*/
534
+
535
+ }
536
+
537
+ /*メディアクエリ 中間 バツ印線1*/
538
+
539
+ .sp-nav .close::before {
540
+
541
+ content: '';
542
+
543
+ position: absolute;
544
+
545
+ top: 50%;
546
+
547
+ left: 0;
548
+
549
+ display: block;
550
+
551
+ width: 16px;
552
+
553
+ height: 1px;
554
+
555
+ background: #fff;
556
+
557
+ transform: rotate( 45deg );/*時計回り45度*/
558
+
559
+ }
560
+
561
+ /*メディアクエリ 中間 バツ印線2*/
562
+
563
+ .sp-nav .close::after {
564
+
565
+ content: '';
566
+
567
+ position: absolute;
568
+
569
+ top: 50%;
570
+
571
+ left: 0;
572
+
573
+ display: block;
574
+
575
+ width: 16px;
576
+
577
+ height: 1px;
578
+
579
+ background: #fff;
580
+
581
+ transform: rotate( -45deg );
582
+
583
+ }
584
+
585
+ .toggle {
586
+
587
+ transform: translateY( 0 );
588
+
589
+ opacity: 1;/*位置と透明度をリセット*/
590
+
591
+ }
592
+
593
+
594
+
595
+
596
+
597
+ }/*←中間ここまで*/
598
+
599
+
600
+
601
+ /*メディアクエリ 小サイズ*/
602
+
603
+ @media screen and (max-width: 400px) {
604
+
605
+ main {
606
+
607
+ box-sizing: border-box;
608
+
609
+ }
610
+
611
+ #logo img {
612
+
613
+ max-width:100px; /* 画像の最大幅 */
614
+
615
+ margin: 3px 0 0 3px;
616
+
617
+ }
618
+
619
+ .toph1 {
620
+
621
+ font-size: 30px;
622
+
623
+ color: rgba(211,227,242,0.3);/*薄い青*/
624
+
625
+ text-align: center;
626
+
627
+ }
628
+
629
+ h1 {
630
+
631
+ font-size:25px;
632
+
633
+ color: rgba(211,227,242);
634
+
635
+ margin: 0 0 0 7%;
636
+
637
+ }
638
+
639
+ p {
640
+
641
+ font-size: 15px;
642
+
643
+ }
644
+
645
+ /*main {
646
+
647
+ margin-top: 20vh;
648
+
649
+ }*/
650
+
651
+ .gyou {
652
+
653
+ clear: both;
654
+
655
+ }
656
+
657
+ }
658
+
659
+
660
+
661
+ /*メディアクエリ 大サイズ*/
662
+
663
+ @media screen and (min-width: 1020px) {
664
+
665
+ .sp-nav {
666
+
667
+ display: none;
668
+
669
+ }
670
+
671
+ }
672
+
673
+
674
+
1
- ### 前提・実現したいこと
675
+ ```### 前提・実現したいこと
2
676
 
3
677
 
4
678