回答編集履歴

2

修正

2017/07/09 16:23

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -14,6 +14,8 @@
14
14
 
15
15
  <html lang="ja">
16
16
 
17
+
18
+
17
19
  <head>
18
20
 
19
21
  <meta charset="UTF-8">
@@ -24,16 +26,8 @@
24
26
 
25
27
  <style type="text/css">
26
28
 
27
-
28
-
29
- /*PC用*/
30
-
31
-
32
-
33
29
  @media (min-width: 481px) {
34
30
 
35
-
36
-
37
31
  /* メイン */
38
32
 
39
33
  .main {
@@ -46,18 +40,12 @@
46
40
 
47
41
  margin: 0px;
48
42
 
49
-
50
-
51
43
  }
52
44
 
53
45
 
54
46
 
55
47
  .tab-change {
56
48
 
57
-
58
-
59
- /*max-width: 100%;*/
60
-
61
49
  height: auto;
62
50
 
63
51
  margin-right: 27%;
@@ -68,8 +56,6 @@
68
56
 
69
57
  margin-top: 10%;
70
58
 
71
-
72
-
73
59
  }
74
60
 
75
61
 
@@ -102,8 +88,6 @@
102
88
 
103
89
  padding: 0 32px;
104
90
 
105
-
106
-
107
91
  }
108
92
 
109
93
 
@@ -148,8 +132,6 @@
148
132
 
149
133
  display: none;
150
134
 
151
-
152
-
153
135
  }
154
136
 
155
137
 
@@ -196,8 +178,6 @@
196
178
 
197
179
  margin-right: 10%;
198
180
 
199
-
200
-
201
181
  }
202
182
 
203
183
 
@@ -214,8 +194,6 @@
214
194
 
215
195
  border: 1px solid black;
216
196
 
217
-
218
-
219
197
  }
220
198
 
221
199
 
@@ -232,8 +210,6 @@
232
210
 
233
211
  margin-right: 10%;
234
212
 
235
-
236
-
237
213
  }
238
214
 
239
215
 
@@ -250,8 +226,6 @@
250
226
 
251
227
  width: 200px;
252
228
 
253
-
254
-
255
229
  }
256
230
 
257
231
 
@@ -280,12 +254,8 @@
280
254
 
281
255
  position: absolute;
282
256
 
283
-
284
-
285
257
  left: -8%;
286
258
 
287
-
288
-
289
259
  }
290
260
 
291
261
 
@@ -296,22 +266,16 @@
296
266
 
297
267
  left: -8%;
298
268
 
299
-
300
-
301
269
  }
302
270
 
303
271
 
304
272
 
305
273
  .decibel {
306
274
 
307
-
308
-
309
275
  margin-top: 0%;
310
276
 
311
277
  padding-top: 8%;
312
278
 
313
-
314
-
315
279
  }
316
280
 
317
281
 
@@ -320,8 +284,6 @@
320
284
 
321
285
  position: relative;
322
286
 
323
-
324
-
325
287
  }
326
288
 
327
289
 
@@ -330,16 +292,12 @@
330
292
 
331
293
  position: absolute;
332
294
 
333
-
334
-
335
295
  }
336
296
 
337
297
 
338
298
 
339
299
  #explain-1 {
340
300
 
341
-
342
-
343
301
  margin-left: 47%;
344
302
 
345
303
  font-size: 22px;
@@ -348,8 +306,6 @@
348
306
 
349
307
  padding: 0%;
350
308
 
351
-
352
-
353
309
  }
354
310
 
355
311
 
@@ -366,8 +322,6 @@
366
322
 
367
323
  margin-right: 0.5em;
368
324
 
369
-
370
-
371
325
  }
372
326
 
373
327
 
@@ -380,8 +334,6 @@
380
334
 
381
335
  margin-top: 17%;
382
336
 
383
-
384
-
385
337
  }
386
338
 
387
339
 
@@ -398,16 +350,12 @@
398
350
 
399
351
  margin-right: 0.5em;
400
352
 
401
-
402
-
403
353
  }
404
354
 
405
355
 
406
356
 
407
357
  #explain-3 {
408
358
 
409
-
410
-
411
359
  padding-top: 10%;
412
360
 
413
361
  font-size: 22px;
@@ -416,16 +364,12 @@
416
364
 
417
365
  margin-left: 13%;
418
366
 
419
-
420
-
421
367
  }
422
368
 
423
369
 
424
370
 
425
371
  .small-1 {
426
372
 
427
-
428
-
429
373
  padding-right: 55%;
430
374
 
431
375
  margin-left: 13%;
@@ -434,20 +378,14 @@
434
378
 
435
379
  margin-top: 23%;
436
380
 
437
-
438
-
439
381
  }
440
382
 
441
383
 
442
384
 
443
385
  .small-2 {
444
386
 
445
-
446
-
447
387
  margin-left: 16%;
448
388
 
449
-
450
-
451
389
  }
452
390
 
453
391
 
@@ -460,8 +398,6 @@
460
398
 
461
399
  font-size: 22px;
462
400
 
463
-
464
-
465
401
  }
466
402
 
467
403
 
@@ -476,8 +412,6 @@
476
412
 
477
413
  margin-left: 5%;
478
414
 
479
-
480
-
481
415
  }
482
416
 
483
417
 
@@ -498,8 +432,6 @@
498
432
 
499
433
  margin-bottom: 5%;
500
434
 
501
-
502
-
503
435
  }
504
436
 
505
437
 
@@ -518,8 +450,6 @@
518
450
 
519
451
  margin-left: 10%;
520
452
 
521
-
522
-
523
453
  }
524
454
 
525
455
 
@@ -538,8 +468,6 @@
538
468
 
539
469
  margin-left: 10%;
540
470
 
541
-
542
-
543
471
  }
544
472
 
545
473
 
@@ -558,8 +486,6 @@
558
486
 
559
487
  margin-top: 10%;
560
488
 
561
-
562
-
563
489
  }
564
490
 
565
491
 
@@ -582,223 +508,149 @@
582
508
 
583
509
  <!---------- ヘッダー --------->
584
510
 
511
+ <div class="header"></div>
512
+
513
+ <div class="main">
514
+
515
+ <p class="photo-title">###</p>
516
+
517
+ <div class="box">
518
+
519
+ <div class="whole-photo">
520
+
521
+ <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic.png" alt="">
522
+
523
+ </div>
524
+
525
+ </div>
526
+
527
+ <div class="note" id="note">
528
+
529
+ <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=green.png" class="tape"/>
530
+
531
+
532
+
533
+ <p class="memo-title">〜メモ〜</p>
534
+
585
- <div class="header">
535
+ <div class="letters">
536
+
586
-
537
+ <p>###
538
+
587
-
539
+ </p>
540
+
541
+ </div>
542
+
543
+ </div>
544
+
545
+ <div>
546
+
547
+ <div>
548
+
549
+ <nav class="tab-change">
550
+
551
+ <a href='#howtosee'>見かた</a>
552
+
553
+ <a href='#this-week'>一週間</a>
554
+
555
+ <a href='#today'>今日</a>
556
+
557
+ </nav>
558
+
559
+ </div>
560
+
561
+ <div id='today' class='content'>
562
+
563
+ <p class="Day-title">♪<span id="view_today"></span>の情報</p>
564
+
565
+ <div class="day">
566
+
567
+ テキスト1
568
+
569
+ <table border="1" rules="cols">
570
+
571
+ </table>
572
+
573
+ </div>
574
+
575
+ </div>
576
+
577
+ <div id='this-week' class='content'>
578
+
579
+ <p class="Week-title">先週</p>
580
+
581
+ <div class="week">
582
+
583
+ テキスト2
584
+
585
+ <table border="1" rules="cols">
586
+
587
+
588
+
589
+ </table>
590
+
591
+ </div>
592
+
593
+ </div>
594
+
595
+ <div id='howtosee' class='content'>
596
+
597
+ <p class="howtosee-title">見方</p>
598
+
599
+ <div class="out">
600
+
601
+ <p class="in" id="explain-1">###</p>
602
+
603
+ </div>
604
+
605
+ <div class="frequency-levels">
606
+
607
+ <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-levels.png">
608
+
609
+ </div>
610
+
611
+ <p class="small-1">####</p>
612
+
613
+ <div class="out">
614
+
615
+ <p class="in" id="explain-2">#####</p>
616
+
617
+ </div>
618
+
619
+ <div class="decibel-levels">
620
+
621
+ <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-levels.png">
622
+
623
+ </div>
624
+
625
+ <p id="explain-3">###</p>
626
+
627
+ <p class="small-2">###</p>
628
+
629
+ <p class="howtosee-title2">111</p>
630
+
631
+ <!-- 終了タグが不完全だったので修正 -->
632
+
633
+ <p class="explain">111</p>
634
+
635
+ <!-- 開始タグが不完全だったので修正 -->
636
+
637
+ <p class="explain">111</p>
638
+
639
+ <p class="howtosee-title3">222</p>
640
+
641
+ <p class="explain">222</p>
642
+
643
+ </div>
644
+
645
+ </div>
646
+
647
+ <div class="push"></div>
588
648
 
589
649
  </div>
590
650
 
591
-
592
-
593
-
594
-
595
- <div class="main">
596
-
597
- <p class="photo-title">###</p>
598
-
599
-
600
-
601
-
602
-
603
- <div class="box">
604
-
605
- <div class="whole-photo">
606
-
607
-
608
-
609
-
610
-
611
- <img src="pic.png" alt="">
612
-
613
-
614
-
615
-
616
-
617
- </div>
618
-
619
- </div>
620
-
621
-
622
-
623
-
624
-
625
- <div class="note" id="note">
626
-
627
- <img src="green.png" class="tape"/>
628
-
629
-
630
-
631
- <p class="memo-title">〜メモ〜</p>
632
-
633
- <div class="letters">
634
-
635
- <p>###
636
-
637
- </p>
638
-
639
- </div>
640
-
641
-
642
-
643
- </div>
644
-
645
- <div>
646
-
647
-
648
-
649
-
650
-
651
- <div>
652
-
653
- <nav class="tab-change">
654
-
655
- <a href='#howtosee'>見かた</a>
656
-
657
- <a href='#this-week'>一週間</a>
658
-
659
- <a href='#today'>今日</a>
660
-
661
-
662
-
663
-
664
-
665
- </nav>
666
-
667
- </div>
668
-
669
-
670
-
671
-
672
-
673
- <div id='today' class='content'>
674
-
675
- <p class="Day-title">♪<span id="view_today"></span>の情報</p>
676
-
677
- <div class="day">
678
-
679
- テキスト1
680
-
681
- <table border="1" rules="cols">
682
-
683
-
684
-
685
-
686
-
687
- </table>
688
-
689
- </div>
690
-
691
-
692
-
693
- </div>
694
-
695
-
696
-
697
-
698
-
699
- <div id='this-week' class='content'>
700
-
701
- <p class="Week-title">先週</p>
702
-
703
- <div class="week">
704
-
705
- テキスト2
706
-
707
- <table border="1" rules="cols">
708
-
709
-
710
-
711
- </table>
712
-
713
- </div>
714
-
715
-
716
-
717
- </div>
718
-
719
-
720
-
721
-
722
-
723
- <div id='howtosee' class='content'>
724
-
725
-
726
-
727
-
728
-
729
- <p class="howtosee-title">見方</p>
730
-
731
-
732
-
733
- <div class="out"><p class="in" id="explain-1">###</p>
734
-
735
- </div>
736
-
737
-
738
-
739
-
740
-
741
- <!-- <p class="explain" id="explain-1">####</p> -->
742
-
743
-
744
-
745
- <div class="frequency-levels">
746
-
747
- <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-levels.png">
748
-
749
- </div>
750
-
751
-
752
-
753
- <p class="small-1">####</p>
754
-
755
-
756
-
757
-
758
-
759
- <div class="out"><p class="in" id="explain-2">#####</p>
760
-
761
- </div>
762
-
763
-
764
-
765
- <div class="decibel-levels">
766
-
767
- <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-levels.png">
768
-
769
- </div>
770
-
771
-
772
-
773
- <p id="explain-3">###</p>
774
-
775
- <p class="small-2">###</p>
776
-
777
- <p class="howtosee-title2">111</p><!-- 終了タグが不完全だったので修正 -->
778
-
779
- <p class="explain">111</p><!-- 開始タグが不完全だったので修正 -->
780
-
781
- <p class="explain">111</p>
782
-
783
- <p class="howtosee-title3">222</p>
784
-
785
- <p class="explain">222</p>
786
-
787
- </div>
788
-
789
- </div>
790
-
791
- <div class="push"></div>
792
-
793
- </div>
794
-
795
651
  <!---------- フッター --------->
796
652
 
797
- <div class="footer" id="footer">
653
+ <div class="footer" id="footer"></div>
798
-
799
-
800
-
801
- </div>
802
654
 
803
655
  </body>
804
656
 

1

追記

2017/07/09 16:23

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -1,5 +1,13 @@
1
1
  こちらの環境ではそのような挙動が再現できませんでした。一度、[キャッシュの消去](http://portal.tac-school.co.jp/faq_system/?id=38)をしてみてはいかがでしょうか?また、`id="today"`が複数箇所にありますが、文法違反なので、直したほうが良いでしょう。
2
2
 
3
+ **文字数の関係でこちらのコードは省略しました。**
4
+
5
+ 追記
6
+
7
+ ---
8
+
9
+ 問題が再現しません。以下のコードを実行してみてください。
10
+
3
11
  ```HTML
4
12
 
5
13
  <!DOCTYPE html>
@@ -16,135 +24,563 @@
16
24
 
17
25
  <style type="text/css">
18
26
 
19
- .tab-change {
20
-
21
-
22
-
23
- /*max-width: 100%;*/
24
-
25
- height: auto;
26
-
27
- margin-right: 27%;
28
-
29
- margin-left: 27%;
30
-
31
- margin-bottom: 15%;
32
-
33
- margin-top: 10%;
34
-
35
-
27
+
28
+
29
+ /*PC用*/
30
+
31
+
32
+
33
+ @media (min-width: 481px) {
34
+
35
+
36
+
37
+ /* メイン */
38
+
39
+ .main {
40
+
41
+ width: 100%;
42
+
43
+ height: 1000px;
44
+
45
+ padding: 100px 0px;
46
+
47
+ margin: 0px;
48
+
49
+
50
+
51
+ }
52
+
53
+
54
+
55
+ .tab-change {
56
+
57
+
58
+
59
+ /*max-width: 100%;*/
60
+
61
+ height: auto;
62
+
63
+ margin-right: 27%;
64
+
65
+ margin-left: 27%;
66
+
67
+ margin-bottom: 15%;
68
+
69
+ margin-top: 10%;
70
+
71
+
72
+
73
+ }
74
+
75
+
76
+
77
+ /*メニューの切り替えタブ*/
78
+
79
+ .tab-change a {
80
+
81
+ border-radius: 7px 7px 0 0;
82
+
83
+ display: inline-block;
84
+
85
+ line-height: 38px;
86
+
87
+ text-align: center;
88
+
89
+ background-color: white;
90
+
91
+ color: black;
92
+
93
+ margin-left: auto;
94
+
95
+ margin-right: 6%;
96
+
97
+ font-size: 20px;
98
+
99
+ float: right;
100
+
101
+ text-decoration: none;
102
+
103
+ padding: 0 32px;
104
+
105
+
106
+
107
+ }
108
+
109
+
110
+
111
+ /*マウスをメニュータブに乗せた時、透過させる*/
112
+
113
+ .tab-change a:hover {
114
+
115
+ opacity: 0.6;
116
+
117
+ }
118
+
119
+
120
+
121
+ .tab-change a:nth-child(2) {
122
+
123
+ border-top: 6px solid #23c1ea;
124
+
125
+ }
126
+
127
+
128
+
129
+ .tab-change a:nth-child(1) {
130
+
131
+ border-top: 6px solid #23c1ea;
132
+
133
+ }
134
+
135
+
136
+
137
+ .tab-change a:nth-child(3) {
138
+
139
+ border-top: 6px solid #23c1ea;
140
+
141
+ }
142
+
143
+
144
+
145
+ .content {
146
+
147
+ height: 320px;
148
+
149
+ display: none;
150
+
151
+
152
+
153
+ }
154
+
155
+
156
+
157
+ .content:target {
158
+
159
+ display: block;
160
+
161
+ }
162
+
163
+
164
+
165
+ /*表のレイアウト*/
166
+
167
+ table {
168
+
169
+ border: 1px solid #000;
170
+
171
+ margin-left: 0;
172
+
173
+ margin-right: auto;
174
+
175
+ background-color: white;
176
+
177
+ width: 100%;
178
+
179
+ height: 100%;
180
+
181
+ font-size: 25px;
182
+
183
+ }
184
+
185
+
186
+
187
+ .day {
188
+
189
+ text-align: center;
190
+
191
+ font-size: 22px;
192
+
193
+ margin-top: auto;
194
+
195
+ margin-left: 10%;
196
+
197
+ margin-right: 10%;
198
+
199
+
200
+
201
+ }
202
+
203
+
204
+
205
+ .day img {
206
+
207
+ width: 200px;
208
+
209
+ }
210
+
211
+
212
+
213
+ .day tr td {
214
+
215
+ border: 1px solid black;
216
+
217
+
218
+
219
+ }
220
+
221
+
222
+
223
+ .week {
224
+
225
+ text-align: center;
226
+
227
+ font-size: 22px;
228
+
229
+ margin-top: auto;
230
+
231
+ margin-left: 10%;
232
+
233
+ margin-right: 10%;
234
+
235
+
236
+
237
+ }
238
+
239
+
240
+
241
+ .week tr td {
242
+
243
+ border: 1px solid black;
244
+
245
+ }
246
+
247
+
248
+
249
+ .week img {
250
+
251
+ width: 200px;
252
+
253
+
254
+
255
+ }
256
+
257
+
258
+
259
+ .box:after {
260
+
261
+ content: ' ';
262
+
263
+ clear: both;
264
+
265
+ display: block;
266
+
267
+ }
268
+
269
+
270
+
271
+ .base {
272
+
273
+ position: relative;
274
+
275
+ }
276
+
277
+
278
+
279
+ .low-frequency {
280
+
281
+ position: absolute;
282
+
283
+
284
+
285
+ left: -8%;
286
+
287
+
288
+
289
+ }
290
+
291
+
292
+
293
+ .low-frequency2 {
294
+
295
+ position: absolute;
296
+
297
+ left: -8%;
298
+
299
+
300
+
301
+ }
302
+
303
+
304
+
305
+ .decibel {
306
+
307
+
308
+
309
+ margin-top: 0%;
310
+
311
+ padding-top: 8%;
312
+
313
+
314
+
315
+ }
316
+
317
+
318
+
319
+ .out {
320
+
321
+ position: relative;
322
+
323
+
324
+
325
+ }
326
+
327
+
328
+
329
+ .in {
330
+
331
+ position: absolute;
332
+
333
+
334
+
335
+ }
336
+
337
+
338
+
339
+ #explain-1 {
340
+
341
+
342
+
343
+ margin-left: 47%;
344
+
345
+ font-size: 22px;
346
+
347
+ margin-top: 10%;
348
+
349
+ padding: 0%;
350
+
351
+
352
+
353
+ }
354
+
355
+
356
+
357
+ /*#explain-1の直前に画像を表示させる*/
358
+
359
+ #explain-1::before {
360
+
361
+ content: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-2.png);
362
+
363
+ position: relative;
364
+
365
+ top: 0.8em;
366
+
367
+ margin-right: 0.5em;
368
+
369
+
370
+
371
+ }
372
+
373
+
374
+
375
+ #explain-2 {
376
+
377
+ margin-left: 47%;
378
+
379
+ font-size: 22px;
380
+
381
+ margin-top: 17%;
382
+
383
+
384
+
385
+ }
386
+
387
+
388
+
389
+ /*#explain-2の直前に画像を表示させる*/
390
+
391
+ #explain-2::before {
392
+
393
+ content: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-1.png);
394
+
395
+ position: relative;
396
+
397
+ top: 0.8em;
398
+
399
+ margin-right: 0.5em;
400
+
401
+
402
+
403
+ }
404
+
405
+
406
+
407
+ #explain-3 {
408
+
409
+
410
+
411
+ padding-top: 10%;
412
+
413
+ font-size: 22px;
414
+
415
+ padding-right: 55%;
416
+
417
+ margin-left: 13%;
418
+
419
+
420
+
421
+ }
422
+
423
+
424
+
425
+ .small-1 {
426
+
427
+
428
+
429
+ padding-right: 55%;
430
+
431
+ margin-left: 13%;
432
+
433
+ padding-top: 0%;
434
+
435
+ margin-top: 23%;
436
+
437
+
438
+
439
+ }
440
+
441
+
442
+
443
+ .small-2 {
444
+
445
+
446
+
447
+ margin-left: 16%;
448
+
449
+
450
+
451
+ }
452
+
453
+
454
+
455
+ .explain {
456
+
457
+ margin-right: 5%;
458
+
459
+ margin-left: 10%;
460
+
461
+ font-size: 22px;
462
+
463
+
464
+
465
+ }
466
+
467
+
468
+
469
+ .frequency-levels img {
470
+
471
+ width: 40%;
472
+
473
+ height: 40%;
474
+
475
+ margin-top: -10%;
476
+
477
+ margin-left: 5%;
478
+
479
+
480
+
481
+ }
482
+
483
+
484
+
485
+ .decibel-levels img {
486
+
487
+ width: 32%;
488
+
489
+ height: 32%;
490
+
491
+ margin-top: 3%;
492
+
493
+ margin-right: 50%;
494
+
495
+ margin-left: 10%;
496
+
497
+ padding: 0%;
498
+
499
+ margin-bottom: 5%;
500
+
501
+
502
+
503
+ }
504
+
505
+
506
+
507
+ .howtosee-title {
508
+
509
+ border-bottom: 3px solid #23c1ea;
510
+
511
+ width: 14%;
512
+
513
+ text-align: center;
514
+
515
+ font-size: 26px;
516
+
517
+ padding-top: 10%;
518
+
519
+ margin-left: 10%;
520
+
521
+
522
+
523
+ }
524
+
525
+
526
+
527
+ .howtosee-title2 {
528
+
529
+ border-bottom: 3px solid #23c1ea;
530
+
531
+ width: 12%;
532
+
533
+ font-size: 26px;
534
+
535
+ text-align: center;
536
+
537
+ padding-top: 10%;
538
+
539
+ margin-left: 10%;
540
+
541
+
542
+
543
+ }
544
+
545
+
546
+
547
+ .howtosee-title3 {
548
+
549
+ border-bottom: 3px solid #23c1ea;
550
+
551
+ width: 17%;
552
+
553
+ font-size: 26px;
554
+
555
+ text-align: center;
556
+
557
+ margin-left: 10%;
558
+
559
+ margin-top: 10%;
560
+
561
+
562
+
563
+ }
564
+
565
+
566
+
567
+ /*hideクラスをつけた、土曜日と日曜日情報は、非表示にしておく*/
568
+
569
+ .hide {
570
+
571
+ display: none;
572
+
573
+ }
36
574
 
37
575
  }
38
576
 
39
-
40
-
41
- /*メニューの切り替えタブ*/
42
-
43
-
44
-
45
- .tab-change a {
46
-
47
- border-radius: 7px 7px 0 0;
48
-
49
- display: inline-block;
50
-
51
- line-height: 38px;
52
-
53
- text-align: center;
54
-
55
- background-color: white;
56
-
57
- color: black;
58
-
59
- margin-left: auto;
60
-
61
- margin-right: 6%;
62
-
63
- font-size: 20px;
64
-
65
- float: right;
66
-
67
- text-decoration: none;
68
-
69
- padding: 0 32px;
70
-
71
-
72
-
73
- }
74
-
75
-
76
-
77
- /*マウスをメニュータブに乗せた時、透過させる*/
78
-
79
- .tab-change a:hover {
80
-
81
- opacity: 0.6;
82
-
83
- }
84
-
85
-
86
-
87
- .tab-change a:nth-child(2) {
88
-
89
- border-top: 6px solid #23c1ea;
90
-
91
- }
92
-
93
-
94
-
95
- .tab-change a:nth-child(1) {
96
-
97
- border-top: 6px solid #23c1ea;
98
-
99
- }
100
-
101
-
102
-
103
- .tab-change a:nth-child(3) {
104
-
105
- border-top: 6px solid #23c1ea;
106
-
107
- }
108
-
109
-
110
-
111
- .content {
112
-
113
- height: 320px;
114
-
115
- display: none;
116
-
117
-
118
-
119
- }
120
-
121
-
122
-
123
- .content:target {
124
-
125
- display: block;
126
-
127
- }
128
-
129
-
130
-
131
- .box:after {
132
-
133
- content: ' ';
134
-
135
- clear: both;
136
-
137
- display: block;
138
-
139
- }
140
-
141
577
  </style>
142
578
 
143
579
  </head>
144
580
 
145
581
  <body>
146
582
 
147
-
583
+ <!---------- ヘッダー --------->
148
584
 
149
585
  <div class="header">
150
586
 
@@ -168,66 +604,200 @@
168
604
 
169
605
  <div class="whole-photo">
170
606
 
607
+
608
+
609
+
610
+
171
- <img src="###" alt="###">
611
+ <img src="pic.png" alt="">
612
+
613
+
614
+
615
+
172
616
 
173
617
  </div>
174
618
 
175
619
  </div>
176
620
 
621
+
622
+
623
+
624
+
625
+ <div class="note" id="note">
626
+
627
+ <img src="green.png" class="tape"/>
628
+
629
+
630
+
631
+ <p class="memo-title">〜メモ〜</p>
632
+
633
+ <div class="letters">
634
+
635
+ <p>###
636
+
637
+ </p>
638
+
639
+ </div>
640
+
641
+
642
+
643
+ </div>
644
+
177
645
  <div>
178
646
 
647
+
648
+
649
+
650
+
179
651
  <div>
180
652
 
181
653
  <nav class="tab-change">
182
654
 
183
- <a href='#howtosee'>222</a>
655
+ <a href='#howtosee'>見かた</a>
184
-
656
+
185
- <a href='#this-week'>333</a>
657
+ <a href='#this-week'>一週間</a>
186
-
658
+
187
- <a href='#today'>444</a>
659
+ <a href='#today'>今日</a>
660
+
661
+
662
+
663
+
188
664
 
189
665
  </nav>
190
666
 
191
667
  </div>
192
668
 
669
+
670
+
671
+
672
+
193
- <div id='today' class='content'><!-- idの重複があったので修正 -->
673
+ <div id='today' class='content'>
194
-
674
+
195
- <p class="Day-title">♪<span id="view_today"></span>今日</p>
675
+ <p class="Day-title">♪<span id="view_today"></span>の情報</p>
196
-
676
+
197
- <div class="day" id='today2'>
677
+ <div class="day">
678
+
198
-
679
+ テキスト1
680
+
681
+ <table border="1" rules="cols">
682
+
683
+
684
+
685
+
686
+
199
- <p>000</p>
687
+ </table>
200
688
 
201
689
  </div>
202
690
 
691
+
692
+
203
693
  </div>
204
694
 
695
+
696
+
697
+
698
+
205
699
  <div id='this-week' class='content'>
206
700
 
207
701
  <p class="Week-title">先週</p>
208
702
 
209
703
  <div class="week">
210
704
 
705
+ テキスト2
706
+
707
+ <table border="1" rules="cols">
708
+
709
+
710
+
211
- <p>1111</p>
711
+ </table>
212
712
 
213
713
  </div>
214
714
 
715
+
716
+
215
717
  </div>
216
718
 
719
+
720
+
721
+
722
+
217
723
  <div id='howtosee' class='content'>
218
724
 
725
+
726
+
727
+
728
+
219
729
  <p class="howtosee-title">見方</p>
220
730
 
731
+
732
+
733
+ <div class="out"><p class="in" id="explain-1">###</p>
734
+
735
+ </div>
736
+
737
+
738
+
739
+
740
+
741
+ <!-- <p class="explain" id="explain-1">####</p> -->
742
+
743
+
744
+
745
+ <div class="frequency-levels">
746
+
747
+ <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-levels.png">
748
+
749
+ </div>
750
+
751
+
752
+
221
- <p>####</p>
753
+ <p class="small-1">####</p>
754
+
755
+
756
+
757
+
758
+
759
+ <div class="out"><p class="in" id="explain-2">#####</p>
760
+
761
+ </div>
762
+
763
+
764
+
765
+ <div class="decibel-levels">
766
+
767
+ <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-levels.png">
768
+
769
+ </div>
770
+
771
+
772
+
773
+ <p id="explain-3">###</p>
774
+
775
+ <p class="small-2">###</p>
776
+
777
+ <p class="howtosee-title2">111</p><!-- 終了タグが不完全だったので修正 -->
778
+
779
+ <p class="explain">111</p><!-- 開始タグが不完全だったので修正 -->
780
+
781
+ <p class="explain">111</p>
782
+
783
+ <p class="howtosee-title3">222</p>
784
+
785
+ <p class="explain">222</p>
222
786
 
223
787
  </div>
224
788
 
225
789
  </div>
226
790
 
791
+ <div class="push"></div>
792
+
227
793
  </div>
228
794
 
795
+ <!---------- フッター --------->
796
+
229
797
  <div class="footer" id="footer">
230
798
 
799
+
800
+
231
801
  </div>
232
802
 
233
803
  </body>