質問編集履歴

9

ついk

2017/07/10 13:25

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -1103,19 +1103,3 @@
1103
1103
 
1104
1104
 
1105
1105
  ```
1106
-
1107
-
1108
-
1109
- ![イメージ説明](cd381fd629a921ef16eff468f2fe8999.png)
1110
-
1111
-
1112
-
1113
- ![イメージ説明](0f8cf44b1332e0c462c04a8da985ca41.png)
1114
-
1115
-
1116
-
1117
- ![イメージ説明](38772e8b4f8d6812ca3cad81b098fda1.png)
1118
-
1119
-
1120
-
1121
- ( 「見方」の位置がおかしく、直せていないのですが、申し訳有りません汗)

8

追記

2017/07/10 13:25

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,328 @@
22
22
 
23
23
  ```CSS
24
24
 
25
+ @charset "UTF-8";
26
+
27
+
28
+
29
+ /*PC用*/
30
+
31
+
32
+
33
+ @media (min-width:481px){
34
+
35
+
36
+
37
+ body{
38
+
39
+
40
+
41
+ background-color: #f9fbfe;
42
+
43
+ font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO",serif!important;
44
+
45
+ }
46
+
47
+ /* --- ヘッダー --- */
48
+
49
+ .header{
50
+
51
+ position: fixed;
52
+
53
+ width: 100%;
54
+
55
+ height: 85px;
56
+
57
+ margin: 0px;
58
+
59
+ padding: 0px;
60
+
61
+ background-color: #ffffff;
62
+
63
+ z-index: 9999;
64
+
65
+ top: 0px;
66
+
67
+ left: 0px;
68
+
69
+ }
70
+
71
+ .header h1,img{
72
+
73
+ width: 250px;
74
+
75
+ margin: 0px 0px 0px 6%;
76
+
77
+ float: left;
78
+
79
+ }
80
+
81
+ .header nav{
82
+
83
+ padding-right: 6%;
84
+
85
+ }
86
+
87
+ .header li{
88
+
89
+ width: 180px;
90
+
91
+ padding: 0px;
92
+
93
+ margin: 0px;
94
+
95
+ font-size: 15px;
96
+
97
+ color: #3d9ec7;
98
+
99
+ list-style: none;
100
+
101
+ text-align: center;
102
+
103
+ }
104
+
105
+
106
+
107
+ /*ページをクリックした後も、文字色を変えないでおく*/
108
+
109
+
110
+
111
+ .header li :visited{
112
+
113
+ color: #3d9ec7;
114
+
115
+ }
116
+
117
+ .header_item{
118
+
119
+ display: inline;
120
+
121
+ float: right;
122
+
123
+ }
124
+
125
+
126
+
127
+ /* ヘッダーのナビをPCの時は表示させる */
128
+
129
+ .menu-pc{
130
+
131
+ display:inline-block;
132
+
133
+ }
134
+
135
+ /*スマホ用のハンバーガーボタンをPCの時は非表示にする*/
136
+
137
+ #menu{
138
+
139
+ display:none;
140
+
141
+ }
142
+
143
+
144
+
145
+ /*ハンバーガーボタンを開いた際の「元に戻る」という文を非表示にする*/
146
+
147
+ .return{
148
+
149
+ display:none;
150
+
151
+ }
152
+
153
+
154
+
155
+ /* メイン */
156
+
157
+ .main{
158
+
159
+ width: 100%;
160
+
161
+ height: 1000px;
162
+
163
+ padding: 100px 0px;
164
+
165
+ margin: 0px;
166
+
167
+
168
+
169
+ }
170
+
171
+
172
+
173
+
174
+
175
+ @font-face {
176
+
177
+ font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO",serif!important";
178
+
179
+ src: url("font.eot?") format('eot');
180
+
181
+ src: url("font.eot?#iefix") format('embedded-opentype'),
182
+
183
+ url("font.woff") format('woff'),
184
+
185
+ url("font.ttf") format('truetype');
186
+
187
+ }
188
+
189
+
190
+
191
+ img {
192
+
193
+ max-width : 100% ;
194
+
195
+ height : auto ;
196
+
197
+ }
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+ .photo-title{
206
+
207
+ font-size:25px;
208
+
209
+ margin-left:150px;
210
+
211
+ border-bottom:3px solid #23c1ea;
212
+
213
+ width:375px;
214
+
215
+ max-width: 100%;
216
+
217
+ height: auto;
218
+
219
+ }
220
+
221
+
222
+
223
+ .whole-photo{
224
+
225
+ margin-left:70px;
226
+
227
+ margin-top: 50px;
228
+
229
+ position:relative;
230
+
231
+
232
+
233
+ }
234
+
235
+
236
+
237
+ .whole-photo img{
238
+
239
+ width:32%;
240
+
241
+ height:32%;
242
+
243
+ }
244
+
245
+ .tape{
246
+
247
+ position:relative;
248
+
249
+ bottom:30px;
250
+
251
+ left:30px;
252
+
253
+ }
254
+
255
+ .memo-title{
256
+
257
+ margin-left:33%;
258
+
259
+ margin-right:25%;
260
+
261
+
262
+
263
+ font-size:28px;
264
+
265
+ }
266
+
267
+
268
+
269
+ .note{
270
+
271
+ width:30%;
272
+
273
+ height:44%;
274
+
275
+ float:right;
276
+
277
+ position: relative;
278
+
279
+ bottom:48%;
280
+
281
+ right:15%;
282
+
283
+ background-color: #ffffe7;
284
+
285
+ background-image:
286
+
287
+ linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
288
+
289
+ background-size: 100% 1.5em;
290
+
291
+ line-height:1.5em;
292
+
293
+ max-width: 100%;
294
+
295
+ font-size:22px;
296
+
297
+ }
298
+
299
+
300
+
301
+ /*PC表示の時は、メモを傾ける*/
302
+
303
+ .note{
304
+
305
+ -moz-transform: rotate(-4deg);
306
+
307
+ -webkit-transform: rotate(-4deg);
308
+
309
+ }
310
+
311
+
312
+
313
+
314
+
315
+ .in{
316
+
317
+ padding-bottom: 20px;
318
+
319
+ font-size: 28px;
320
+
321
+ margin-top: 5px;
322
+
323
+
324
+
325
+ }
326
+
327
+
328
+
329
+
330
+
331
+ .letters{
332
+
333
+ padding-top:10px;
334
+
335
+ padding-left:20px;
336
+
337
+ padding-right:20px;
338
+
339
+ font-size:26px;
340
+
341
+ line-height:130%;
342
+
343
+ text-align: center;
344
+
345
+ }
346
+
25
347
 
26
348
 
27
349
  .tab-change{
@@ -530,12 +852,16 @@
530
852
 
531
853
  width: 40%;
532
854
 
533
- height:40%:;
855
+ height:40%;
534
-
856
+
535
- margin-top:-10%;
857
+ margin-top:10%;
536
858
 
537
859
  margin-left:5%;
538
860
 
861
+
862
+
863
+
864
+
539
865
 
540
866
 
541
867
  }
@@ -546,7 +872,7 @@
546
872
 
547
873
  width: 32%;
548
874
 
549
- height:32%:;
875
+ height:32%;
550
876
 
551
877
  margin-top:3%;
552
878
 
@@ -560,6 +886,8 @@
560
886
 
561
887
 
562
888
 
889
+
890
+
563
891
  }
564
892
 
565
893
 
@@ -580,9 +908,27 @@
580
908
 
581
909
  margin-left:10%;
582
910
 
583
-
911
+ }
912
+
913
+
914
+
915
+
916
+
917
+
918
+
584
-
919
+ .howtosee-title2{
920
+
585
-
921
+ border-bottom:3px solid #23c1ea;
922
+
923
+ width:12%;
924
+
925
+ font-size:26px;
926
+
927
+ text-align: center;
928
+
929
+ padding-top:10%;
930
+
931
+ margin-left:10%;
586
932
 
587
933
 
588
934
 
@@ -590,23 +936,21 @@
590
936
 
591
937
 
592
938
 
593
-
594
-
595
-
596
-
597
- .howtosee-title2{
939
+ .howtosee-title3{
598
-
940
+
599
- border-bottom:3px solid #23c1ea;
941
+ border-bottom:3px solid #23c1ea;
600
-
942
+
601
- width:12%;
943
+ width:17%;
602
-
944
+
603
- font-size:26px;
945
+ font-size:26px;
604
-
946
+
605
- text-align: center;
947
+ text-align: center;
606
-
607
- padding-top:10%;
948
+
608
-
609
- margin-left:10%;
949
+ margin-left:10%;
950
+
951
+ margin-top:10%;
952
+
953
+
610
954
 
611
955
 
612
956
 
@@ -614,26 +958,148 @@
614
958
 
615
959
 
616
960
 
961
+
962
+
963
+
964
+
617
- .howtosee-title3{
965
+ #howtosee{
618
-
619
- border-bottom:3px solid #23c1ea;
966
+
620
-
621
- width:17%;
967
+ display:none;
968
+
622
-
969
+ }
970
+
971
+
972
+
973
+ /*hideクラスをつけた、土曜日と日曜日の音情報は、非表示にしておく*/
974
+
975
+
976
+
977
+
978
+
979
+
980
+
981
+
982
+
983
+
984
+
623
- font-size:26px;
985
+ .hide{
624
-
986
+
625
- text-align: center;
987
+ display: none;
626
-
627
- margin-left:10%;
628
-
629
- margin-top:10%;
630
-
631
-
632
-
633
-
634
988
 
635
989
  }
636
990
 
991
+ /*
992
+
993
+
994
+
995
+ .--- フッター --- */
996
+
997
+ /* .footer,
998
+
999
+ .push {
1000
+
1001
+ height: 300px;
1002
+
1003
+ } */
1004
+
1005
+
1006
+
1007
+ .footer{
1008
+
1009
+ width: 88%;
1010
+
1011
+ height: 200px;
1012
+
1013
+ padding: 30px 6%;
1014
+
1015
+ background-color: #ffffff;
1016
+
1017
+ position: absolute;
1018
+
1019
+ top: 450%;
1020
+
1021
+
1022
+
1023
+
1024
+
1025
+
1026
+
1027
+
1028
+
1029
+
1030
+
1031
+ }
1032
+
1033
+ .footer img{
1034
+
1035
+ width: 180px;
1036
+
1037
+ margin: 0px;
1038
+
1039
+ padding: 0px;
1040
+
1041
+ float: none;
1042
+
1043
+ }
1044
+
1045
+ .copyright{
1046
+
1047
+ font-size: 14px;
1048
+
1049
+ color: #000000;
1050
+
1051
+ }
1052
+
1053
+ .footer li{
1054
+
1055
+ list-style: none;
1056
+
1057
+ }
1058
+
1059
+ .footerB,.footerC,.footerD,.footerA{
1060
+
1061
+ width: 25%;
1062
+
1063
+ height: 200px;
1064
+
1065
+ margin: 0px;
1066
+
1067
+ padding: 0px;
1068
+
1069
+ float: left;
1070
+
1071
+ }
1072
+
1073
+ .footerB p,.footerC p,.footerD p{
1074
+
1075
+ font-size: 17px;
1076
+
1077
+ }
1078
+
1079
+ .footerB a,.footerC a,.footerD a{
1080
+
1081
+ font-size: 13px;
1082
+
1083
+ }
1084
+
1085
+
1086
+
1087
+ .footer a:link { color:#3d9ec7; text-decoration:none }
1088
+
1089
+ .footer a:visited { color:#3d9ec7; text-decoration:none }
1090
+
1091
+ .footer a:hover { color:#3d9ec7; text-decoration:none }
1092
+
1093
+ .footer a:active { color:#3d9ec7; text-decoration:none }
1094
+
1095
+
1096
+
1097
+ }
1098
+
1099
+
1100
+
1101
+
1102
+
637
1103
 
638
1104
 
639
1105
  ```

7

追加

2017/07/10 11:43

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -22,38 +22,6 @@
22
22
 
23
23
  ```CSS
24
24
 
25
- .@charset "UTF-8";
26
-
27
-
28
-
29
- /*PC用*/
30
-
31
-
32
-
33
- @media (min-width:481px){
34
-
35
-
36
-
37
-
38
-
39
- /* メイン */
40
-
41
- .main{
42
-
43
- width: 100%;
44
-
45
- height: 1000px;
46
-
47
- padding: 100px 0px;
48
-
49
- margin: 0px;
50
-
51
-
52
-
53
- }
54
-
55
-
56
-
57
25
 
58
26
 
59
27
  .tab-change{
@@ -404,7 +372,157 @@
404
372
 
405
373
  }
406
374
 
375
+
376
+
407
-
377
+ #explain-1{
378
+
379
+
380
+
381
+ margin-left:47%;
382
+
383
+ font-size:22px;
384
+
385
+ margin-top:10%;
386
+
387
+ padding:0%;
388
+
389
+
390
+
391
+ }
392
+
393
+
394
+
395
+
396
+
397
+ /*#explain-1の直前に画像を表示させる*/
398
+
399
+ #explain-1::before{
400
+
401
+ content: url(symbol-2.png);
402
+
403
+ position: relative;
404
+
405
+ top: 0.8em;
406
+
407
+ margin-right: 0.5em;
408
+
409
+
410
+
411
+
412
+
413
+ }
414
+
415
+
416
+
417
+ #explain-2{
418
+
419
+ margin-left:47%;
420
+
421
+ font-size:22px;
422
+
423
+ margin-top:17%;
424
+
425
+
426
+
427
+
428
+
429
+ }
430
+
431
+
432
+
433
+
434
+
435
+
436
+
437
+ /*#explain-2の直前に画像を表示させる*/
438
+
439
+ #explain-2::before{
440
+
441
+ content: url(symbol-1.png);
442
+
443
+ position: relative;
444
+
445
+ top: 0.8em;
446
+
447
+ margin-right: 0.5em;
448
+
449
+
450
+
451
+
452
+
453
+ }
454
+
455
+ #explain-3{
456
+
457
+
458
+
459
+ padding-top:10%;
460
+
461
+ font-size:22px;
462
+
463
+ padding-right:55%;
464
+
465
+ margin-left:13%;
466
+
467
+
468
+
469
+
470
+
471
+ }
472
+
473
+
474
+
475
+
476
+
477
+
478
+
479
+ .small-1{
480
+
481
+
482
+
483
+ padding-right:55%;
484
+
485
+ margin-left:13%;
486
+
487
+ padding-top:0%;
488
+
489
+ margin-top:23%;
490
+
491
+
492
+
493
+
494
+
495
+ }
496
+
497
+
498
+
499
+
500
+
501
+ .small-2{
502
+
503
+
504
+
505
+ margin-left:16%;
506
+
507
+
508
+
509
+ }
510
+
511
+
512
+
513
+ .explain{
514
+
515
+ margin-right:5%;
516
+
517
+ margin-left:10%;
518
+
519
+ font-size:22px;
520
+
521
+
522
+
523
+
524
+
525
+ }
408
526
 
409
527
 
410
528
 
@@ -448,10 +566,76 @@
448
566
 
449
567
 
450
568
 
569
+ .howtosee-title{
570
+
571
+ border-bottom:3px solid #23c1ea;
572
+
573
+ width:14%;
574
+
575
+ text-align: center;
576
+
577
+ font-size:26px;
578
+
579
+ padding-top:10%;
580
+
581
+ margin-left:10%;
582
+
583
+
584
+
585
+
586
+
587
+
588
+
451
589
  }
452
590
 
453
591
 
454
592
 
593
+
594
+
595
+
596
+
597
+ .howtosee-title2{
598
+
599
+ border-bottom:3px solid #23c1ea;
600
+
601
+ width:12%;
602
+
603
+ font-size:26px;
604
+
605
+ text-align: center;
606
+
607
+ padding-top:10%;
608
+
609
+ margin-left:10%;
610
+
611
+
612
+
613
+ }
614
+
615
+
616
+
617
+ .howtosee-title3{
618
+
619
+ border-bottom:3px solid #23c1ea;
620
+
621
+ width:17%;
622
+
623
+ font-size:26px;
624
+
625
+ text-align: center;
626
+
627
+ margin-left:10%;
628
+
629
+ margin-top:10%;
630
+
631
+
632
+
633
+
634
+
635
+ }
636
+
637
+
638
+
455
639
  ```
456
640
 
457
641
 

6

追加

2017/07/10 07:27

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -453,3 +453,19 @@
453
453
 
454
454
 
455
455
  ```
456
+
457
+
458
+
459
+ ![イメージ説明](cd381fd629a921ef16eff468f2fe8999.png)
460
+
461
+
462
+
463
+ ![イメージ説明](0f8cf44b1332e0c462c04a8da985ca41.png)
464
+
465
+
466
+
467
+ ![イメージ説明](38772e8b4f8d6812ca3cad81b098fda1.png)
468
+
469
+
470
+
471
+ ( 「見方」の位置がおかしく、直せていないのですが、申し訳有りません汗)

5

追記

2017/07/10 07:16

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,12 @@
8
8
 
9
9
 
10
10
 
11
+ 文字数の関係で入りきらなかったので、HTMLだけ別に投稿させていただきました。
12
+
13
+ (https://teratail.com/questions/83617?modal=q-comp)
14
+
15
+
16
+
11
17
 
12
18
 
13
19
 

4

追記

2017/07/10 07:05

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -10,866 +10,440 @@
10
10
 
11
11
 
12
12
 
13
- ```HTML
14
-
15
- <!DOCTYPE html>
16
-
17
- <html lang="ja">
18
-
19
- <head>
20
-
21
- <meta charset="UTF-8">
22
-
23
- <title>###</title>
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
- <link rel="stylesheet" type="text/css" href="test.css">
32
-
33
- <link rel="icon" href="icon.jpg">
34
-
35
-
36
-
37
-
38
-
39
- </head>
40
-
41
- <body>
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
- <div class="main">
13
+
14
+
15
+
16
+
17
+ ```CSS
18
+
19
+ .@charset "UTF-8";
20
+
21
+
22
+
23
+ /*PC用*/
24
+
25
+
26
+
27
+ @media (min-width:481px){
28
+
29
+
30
+
31
+
32
+
33
+ /* メイン */
34
+
35
+ .main{
36
+
37
+ width: 100%;
38
+
39
+ height: 1000px;
40
+
41
+ padding: 100px 0px;
42
+
43
+ margin: 0px;
44
+
45
+
46
+
47
+ }
48
+
49
+
50
+
51
+
52
+
53
+ .tab-change{
54
+
55
+
56
+
57
+ /*max-width: 100%;*/
58
+
59
+ height:auto;
60
+
61
+ margin-right:27%;
62
+
63
+ margin-left:27%;
64
+
65
+ margin-bottom:15%;
66
+
67
+ margin-top:10%;
68
+
69
+
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) { border-top: 6px solid #23c1ea; }
122
+
123
+ .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
124
+
125
+ .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+ .content {
134
+
135
+ height: 320px;
136
+
137
+ display: none;
138
+
139
+
140
+
141
+
142
+
143
+
144
+
145
+ }
146
+
147
+
148
+
149
+ .content:target {
150
+
151
+ display: block;
152
+
153
+ }
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+
162
+
163
+
164
+
165
+ .Week-title{
166
+
167
+ border-bottom:3px solid #23c1ea;
168
+
169
+ width:17%;
170
+
171
+ padding-top:8%;
172
+
173
+ margin-left:10%;
174
+
175
+ font-size:25px;
176
+
177
+ margin-top:20%;
178
+
179
+ text-align: center;
180
+
181
+
182
+
183
+
184
+
185
+ }
186
+
187
+
188
+
189
+ .Day-title{
190
+
191
+ margin-left:10%;
192
+
193
+ border-bottom:3px solid #23c1ea;
194
+
195
+ width:24%;
196
+
197
+ padding-top:8%;
198
+
199
+ font-size:25px;
200
+
201
+ margin-top:20%;
202
+
203
+ text-align: center;
204
+
205
+
206
+
207
+ }
208
+
209
+ /*表のレイアウト*/
210
+
211
+
212
+
213
+ table {
214
+
215
+ border:1px solid #000;
216
+
217
+ margin-left:0;
218
+
219
+ margin-right:auto;
220
+
221
+ background-color: white;
222
+
223
+ width:100%;
224
+
225
+ height:100%;
226
+
227
+ font-size: 25px;
228
+
229
+ }
230
+
231
+
232
+
233
+
234
+
235
+
236
+
237
+
238
+
239
+ .day {
240
+
241
+ text-align: center;
242
+
243
+ font-size: 22px;
244
+
245
+ margin-top:auto;
246
+
247
+ margin-left:10%;
248
+
249
+ margin-right:10%;
250
+
251
+
252
+
253
+ }
254
+
255
+
256
+
257
+
258
+
259
+ .day img {
260
+
261
+ width: 200px;
262
+
263
+ }
264
+
265
+
266
+
267
+ .day tr td{
268
+
269
+ border:1px solid black;
270
+
271
+
272
+
273
+ }
274
+
275
+
276
+
277
+ .week{
278
+
279
+ text-align: center;
280
+
281
+ font-size: 22px;
282
+
283
+ margin-top: auto;
284
+
285
+ margin-left:10%;
286
+
287
+ margin-right:10%;
288
+
289
+
290
+
291
+ }
292
+
293
+
294
+
295
+ .week tr td{
296
+
297
+ border:1px solid black;
298
+
299
+ }
300
+
301
+
302
+
303
+ .week img {
304
+
305
+ width:200px;
306
+
307
+
308
+
309
+ }
310
+
311
+
312
+
313
+
314
+
315
+ .box:after {
316
+
317
+ content: ' ';
318
+
319
+ clear: both;
320
+
321
+ display: block;
322
+
323
+ }
324
+
325
+
326
+
327
+ .base {
328
+
329
+ position: relative;
330
+
331
+ }
332
+
333
+
334
+
335
+ .low-frequency {
336
+
337
+ position: absolute;
338
+
339
+ left:-8%;
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+ }
348
+
349
+
350
+
351
+ .low-frequency2{
352
+
353
+ position: absolute;
354
+
355
+ left:-8%;
356
+
357
+
358
+
359
+
360
+
361
+ }
362
+
363
+ .decibel{
364
+
365
+
366
+
367
+ margin-top:0%;
368
+
369
+ padding-top:8%;
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+ }
378
+
379
+
380
+
381
+ .out{
382
+
383
+ position:relative;
50
384
 
51
385
 
52
386
 
53
- <div>
54
-
55
-
56
-
57
- <div>
58
-
59
- <nav class="tab-change">
60
-
61
- <a href='#howtosee'>見かた</a>
62
-
63
- <a href='#this-week'>一週間</a>
64
-
65
- <a href='#today'>今日</a>
66
-
67
-
68
-
69
-
70
-
71
- </nav>
72
-
73
- </div>
74
-
75
-
76
-
77
-
78
-
79
- <div id='today' class='content'>
80
-
81
- <p class="Day-title"><span id="view_today"></span>情報</p>
82
-
83
- <div class="day">
84
-
85
- <table border="1" rules="cols" >
86
-
87
-
88
-
89
- <tr>
90
-
91
- <td>10時</td>
92
-
93
- <td>12時</td>
94
-
95
- <td>14時</td>
96
-
97
- <td>16時</td>
98
-
99
- <td>18時</td>
100
-
101
- </tr>
102
-
103
-
104
-
105
- <tr>
106
-
107
- <td>
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
- <p>79Hz</p>
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
- </td>
124
-
125
- <td>
126
-
127
-
128
-
129
-
130
-
131
- <p>237Hz</p>
132
-
133
-
134
-
135
- </td>
136
-
137
- <td>
138
-
139
-
140
-
141
-
142
-
143
- <p>195Hz</p>
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
- </td>
152
-
153
- <td>
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
- <p>250Hz</p>
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
- </td>
170
-
171
- <td>
172
-
173
-
174
-
175
-
176
-
177
- <p>129Hz</p>
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
- </td>
186
-
187
-
188
-
189
- </tr>
190
-
191
-
192
-
193
- </table>
194
-
195
- </div>
196
-
197
-
198
-
199
- </div>
200
-
201
- <div id='this-week' class='content'>
202
-
203
- <p class="Week-title">先週</p>
204
-
205
- <div class="week">
206
-
207
- <table border="1" rules="cols">
208
-
209
-
210
-
211
- <tr>
212
-
213
- <td>月</td>
214
-
215
- <td>火</td>
216
-
217
- <td>水</td>
218
-
219
- <td>木</td>
220
-
221
- <td>金</td>
222
-
223
- <td class="hide">土</td>
224
-
225
- <td class="hide">日</td>
226
-
227
-
228
-
229
- </tr>
230
-
231
-
232
-
233
- <tr>
234
-
235
- <td>
236
-
237
- <img src="rest.png">
238
-
239
-
240
-
241
- </td>
242
-
243
- <td>
244
-
245
-
246
-
247
- <img src="rest.png">
248
-
249
-
250
-
251
- </td>
252
-
253
- <td>
254
-
255
- <img src="rest.png">
256
-
257
-
258
-
259
-
260
-
261
- </td>
262
-
263
- <td>
264
-
265
- <img src="rest.png">
266
-
267
-
268
-
269
-
270
-
271
- </td>
272
-
273
- <td>
274
-
275
- <img src="rest.png">
276
-
277
-
278
-
279
-
280
-
281
- </td>
282
-
283
- <td class="hide">
284
-
285
-
286
-
287
- <img src="rest.png">
288
-
289
- </td>
290
-
291
- <td class="hide">
292
-
293
- <img src="rest.png">
294
-
295
- </td>
296
-
297
- </tr>
298
-
299
-
300
-
301
- </table>
302
-
303
- </div>
304
-
305
-
306
-
307
- </div>
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
- <div id='howtosee' class='content'>
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
- <p class="howtosee-title">見方</p>
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
- <div class="out"><p class="in" id="explain-1">####</p>
336
-
337
- </div>
338
-
339
-
340
-
341
-
342
-
343
-
344
-
345
- <div class="frequency-levels">
346
-
347
- <img src="frequency-levels.png">
348
-
349
- </div>
350
-
351
-
352
-
353
- <p class="small-1">####</p>
354
-
355
-
356
-
357
-
358
-
359
- <div class="out"><p class="in" id="explain-2">###</p>
360
-
361
- </div>
362
-
363
-
364
-
365
- <div class="decibel-levels">
366
-
367
- <img src="decibel-levels.png">
368
-
369
- </div>
370
-
371
-
372
-
373
- <p id="explain-3">###</p>
374
-
375
- <p class="small-2">####</p>
376
-
377
-
378
-
379
-
380
-
381
-
382
-
383
- <p class="howtosee-title2">###</p>
384
-
385
- <p class="explain">####</p>
386
-
387
- <p class="explain"><br>####<br/><br>
388
-
389
- ##<br/></p>
390
-
391
-
392
-
393
-
394
-
395
-
396
-
397
- <p class="howtosee-title3">####</p>
398
-
399
- <p class="explain">####<br>
400
-
401
- <br>####</p>
402
-
403
-
404
-
405
-
406
-
407
- </div> <!-- #howtoseeの閉じタグ -->
408
-
409
-
410
-
411
-
412
-
413
- </div>
414
-
415
-
416
-
417
- <!-- <div class="push"></div> -->
418
-
419
-
420
-
421
- </div>
422
-
423
- <div class="footer" id="footer">
424
-
425
-
426
-
427
- </div>
428
-
429
- </body>
430
-
431
- </html>
432
-
433
-
434
-
435
-
387
+ }
388
+
389
+
390
+
391
+ .in{
392
+
393
+ position:absolute;
394
+
395
+
396
+
397
+
398
+
399
+ }
400
+
401
+
402
+
403
+
404
+
405
+ .frequency-levels img{
406
+
407
+ width: 40%;
408
+
409
+ height:40%:;
410
+
411
+ margin-top:-10%;
412
+
413
+ margin-left:5%;
414
+
415
+
416
+
417
+ }
418
+
419
+
420
+
421
+ .decibel-levels img{
422
+
423
+ width: 32%;
424
+
425
+ height:32%:;
426
+
427
+ margin-top:3%;
428
+
429
+ margin-right:50%;
430
+
431
+ margin-left:10%;
432
+
433
+ padding:0%;
434
+
435
+ margin-bottom:5%;
436
+
437
+
438
+
439
+ }
440
+
441
+
442
+
443
+
444
+
445
+ }
436
446
 
437
447
 
438
448
 
439
449
  ```
440
-
441
-
442
-
443
- ```CSS
444
-
445
- .@charset "UTF-8";
446
-
447
-
448
-
449
- /*PC用*/
450
-
451
-
452
-
453
- @media (min-width:481px){
454
-
455
-
456
-
457
-
458
-
459
- /* メイン */
460
-
461
- .main{
462
-
463
- width: 100%;
464
-
465
- height: 1000px;
466
-
467
- padding: 100px 0px;
468
-
469
- margin: 0px;
470
-
471
-
472
-
473
- }
474
-
475
-
476
-
477
-
478
-
479
- .tab-change{
480
-
481
-
482
-
483
- /*max-width: 100%;*/
484
-
485
- height:auto;
486
-
487
- margin-right:27%;
488
-
489
- margin-left:27%;
490
-
491
- margin-bottom:15%;
492
-
493
- margin-top:10%;
494
-
495
-
496
-
497
- }
498
-
499
-
500
-
501
- /*メニューの切り替えタブ*/
502
-
503
-
504
-
505
- .tab-change a{
506
-
507
- border-radius: 7px 7px 0 0;
508
-
509
- display:inline-block;
510
-
511
- line-height: 38px;
512
-
513
- text-align: center;
514
-
515
- background-color:white ;
516
-
517
- color: black;
518
-
519
- margin-left:auto;
520
-
521
- margin-right:6%;
522
-
523
- font-size:20px;
524
-
525
- float:right;
526
-
527
- text-decoration: none;
528
-
529
- padding: 0 32px;
530
-
531
-
532
-
533
- }
534
-
535
-
536
-
537
- /*マウスをメニュータブに乗せた時、透過させる*/
538
-
539
- .tab-change a:hover{
540
-
541
- opacity:0.6;
542
-
543
- }
544
-
545
-
546
-
547
- .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
548
-
549
- .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
550
-
551
- .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
552
-
553
-
554
-
555
-
556
-
557
-
558
-
559
- .content {
560
-
561
- height: 320px;
562
-
563
- display: none;
564
-
565
-
566
-
567
-
568
-
569
-
570
-
571
- }
572
-
573
-
574
-
575
- .content:target {
576
-
577
- display: block;
578
-
579
- }
580
-
581
-
582
-
583
-
584
-
585
-
586
-
587
-
588
-
589
-
590
-
591
- .Week-title{
592
-
593
- border-bottom:3px solid #23c1ea;
594
-
595
- width:17%;
596
-
597
- padding-top:8%;
598
-
599
- margin-left:10%;
600
-
601
- font-size:25px;
602
-
603
- margin-top:20%;
604
-
605
- text-align: center;
606
-
607
-
608
-
609
-
610
-
611
- }
612
-
613
-
614
-
615
- .Day-title{
616
-
617
- margin-left:10%;
618
-
619
- border-bottom:3px solid #23c1ea;
620
-
621
- width:24%;
622
-
623
- padding-top:8%;
624
-
625
- font-size:25px;
626
-
627
- margin-top:20%;
628
-
629
- text-align: center;
630
-
631
-
632
-
633
- }
634
-
635
- /*表のレイアウト*/
636
-
637
-
638
-
639
- table {
640
-
641
- border:1px solid #000;
642
-
643
- margin-left:0;
644
-
645
- margin-right:auto;
646
-
647
- background-color: white;
648
-
649
- width:100%;
650
-
651
- height:100%;
652
-
653
- font-size: 25px;
654
-
655
- }
656
-
657
-
658
-
659
-
660
-
661
-
662
-
663
-
664
-
665
- .day {
666
-
667
- text-align: center;
668
-
669
- font-size: 22px;
670
-
671
- margin-top:auto;
672
-
673
- margin-left:10%;
674
-
675
- margin-right:10%;
676
-
677
-
678
-
679
- }
680
-
681
-
682
-
683
-
684
-
685
- .day img {
686
-
687
- width: 200px;
688
-
689
- }
690
-
691
-
692
-
693
- .day tr td{
694
-
695
- border:1px solid black;
696
-
697
-
698
-
699
- }
700
-
701
-
702
-
703
- .week{
704
-
705
- text-align: center;
706
-
707
- font-size: 22px;
708
-
709
- margin-top: auto;
710
-
711
- margin-left:10%;
712
-
713
- margin-right:10%;
714
-
715
-
716
-
717
- }
718
-
719
-
720
-
721
- .week tr td{
722
-
723
- border:1px solid black;
724
-
725
- }
726
-
727
-
728
-
729
- .week img {
730
-
731
- width:200px;
732
-
733
-
734
-
735
- }
736
-
737
-
738
-
739
-
740
-
741
- .box:after {
742
-
743
- content: ' ';
744
-
745
- clear: both;
746
-
747
- display: block;
748
-
749
- }
750
-
751
-
752
-
753
- .base {
754
-
755
- position: relative;
756
-
757
- }
758
-
759
-
760
-
761
- .low-frequency {
762
-
763
- position: absolute;
764
-
765
- left:-8%;
766
-
767
-
768
-
769
-
770
-
771
-
772
-
773
- }
774
-
775
-
776
-
777
- .low-frequency2{
778
-
779
- position: absolute;
780
-
781
- left:-8%;
782
-
783
-
784
-
785
-
786
-
787
- }
788
-
789
- .decibel{
790
-
791
-
792
-
793
- margin-top:0%;
794
-
795
- padding-top:8%;
796
-
797
-
798
-
799
-
800
-
801
-
802
-
803
- }
804
-
805
-
806
-
807
- .out{
808
-
809
- position:relative;
810
-
811
-
812
-
813
- }
814
-
815
-
816
-
817
- .in{
818
-
819
- position:absolute;
820
-
821
-
822
-
823
-
824
-
825
- }
826
-
827
-
828
-
829
-
830
-
831
- .frequency-levels img{
832
-
833
- width: 40%;
834
-
835
- height:40%:;
836
-
837
- margin-top:-10%;
838
-
839
- margin-left:5%;
840
-
841
-
842
-
843
- }
844
-
845
-
846
-
847
- .decibel-levels img{
848
-
849
- width: 32%;
850
-
851
- height:32%:;
852
-
853
- margin-top:3%;
854
-
855
- margin-right:50%;
856
-
857
- margin-left:10%;
858
-
859
- padding:0%;
860
-
861
- margin-bottom:5%;
862
-
863
-
864
-
865
- }
866
-
867
-
868
-
869
-
870
-
871
- }
872
-
873
-
874
-
875
- ```

3

修正

2017/07/10 06:29

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -434,18 +434,6 @@
434
434
 
435
435
 
436
436
 
437
- <!---------- フッター --------->
438
-
439
- <div class="footer" id="footer">
440
-
441
-
442
-
443
- </div>
444
-
445
- </body>
446
-
447
- </html>
448
-
449
437
 
450
438
 
451
439
  ```

2

追記

2017/07/10 06:08

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,15 @@
4
4
 
5
5
 
6
6
 
7
+ 追記:ブラウザ Google Chrome 59.0.3071.115(最新)
8
+
9
+
10
+
11
+
12
+
7
13
  ```HTML
8
14
 
9
- <!DOCTYPE html>
15
+ <!DOCTYPE html>
10
16
 
11
17
  <html lang="ja">
12
18
 
@@ -22,11 +28,7 @@
22
28
 
23
29
 
24
30
 
25
-
26
-
27
-
28
-
29
- <link rel="stylesheet" type="text/css" href="kamo.css">
31
+ <link rel="stylesheet" type="text/css" href="test.css">
30
32
 
31
33
  <link rel="icon" href="icon.jpg">
32
34
 
@@ -34,950 +36,852 @@
34
36
 
35
37
 
36
38
 
37
-
39
+ </head>
40
+
41
+ <body>
38
42
 
39
43
 
40
44
 
41
-
42
-
43
-
44
-
45
- </head>
46
-
47
- <body>
48
-
49
- <!---------- ヘッダー --------->
50
-
51
- <div class="header">
45
+
46
+
47
+
48
+
49
+ <div class="main">
50
+
51
+
52
+
53
+ <div>
54
+
55
+
56
+
57
+ <div>
58
+
59
+ <nav class="tab-change">
60
+
61
+ <a href='#howtosee'>見かた</a>
62
+
63
+ <a href='#this-week'>一週間</a>
64
+
65
+ <a href='#today'>今日</a>
66
+
67
+
68
+
69
+
70
+
71
+ </nav>
72
+
73
+ </div>
74
+
75
+
76
+
77
+
78
+
79
+ <div id='today' class='content'>
80
+
81
+ <p class="Day-title"><span id="view_today"></span>情報</p>
82
+
83
+ <div class="day">
84
+
85
+ <table border="1" rules="cols" >
86
+
87
+
88
+
89
+ <tr>
90
+
91
+ <td>10時</td>
92
+
93
+ <td>12時</td>
94
+
95
+ <td>14時</td>
96
+
97
+ <td>16時</td>
98
+
99
+ <td>18時</td>
100
+
101
+ </tr>
102
+
103
+
104
+
105
+ <tr>
106
+
107
+ <td>
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+ <p>79Hz</p>
116
+
117
+
118
+
119
+
120
+
121
+
122
+
123
+ </td>
124
+
125
+ <td>
126
+
127
+
128
+
129
+
130
+
131
+ <p>237Hz</p>
132
+
133
+
134
+
135
+ </td>
136
+
137
+ <td>
138
+
139
+
140
+
141
+
142
+
143
+ <p>195Hz</p>
144
+
145
+
146
+
147
+
148
+
149
+
150
+
151
+ </td>
152
+
153
+ <td>
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+ <p>250Hz</p>
162
+
163
+
164
+
165
+
166
+
167
+
168
+
169
+ </td>
170
+
171
+ <td>
172
+
173
+
174
+
175
+
176
+
177
+ <p>129Hz</p>
178
+
179
+
180
+
181
+
182
+
183
+
184
+
185
+ </td>
186
+
187
+
188
+
189
+ </tr>
190
+
191
+
192
+
193
+ </table>
194
+
195
+ </div>
196
+
197
+
198
+
199
+ </div>
200
+
201
+ <div id='this-week' class='content'>
202
+
203
+ <p class="Week-title">先週</p>
204
+
205
+ <div class="week">
206
+
207
+ <table border="1" rules="cols">
208
+
209
+
210
+
211
+ <tr>
212
+
213
+ <td>月</td>
214
+
215
+ <td>火</td>
216
+
217
+ <td>水</td>
218
+
219
+ <td>木</td>
220
+
221
+ <td>金</td>
222
+
223
+ <td class="hide">土</td>
224
+
225
+ <td class="hide">日</td>
226
+
227
+
228
+
229
+ </tr>
230
+
231
+
232
+
233
+ <tr>
234
+
235
+ <td>
236
+
237
+ <img src="rest.png">
238
+
239
+
240
+
241
+ </td>
242
+
243
+ <td>
244
+
245
+
246
+
247
+ <img src="rest.png">
248
+
249
+
250
+
251
+ </td>
252
+
253
+ <td>
254
+
255
+ <img src="rest.png">
256
+
257
+
258
+
259
+
260
+
261
+ </td>
262
+
263
+ <td>
264
+
265
+ <img src="rest.png">
266
+
267
+
268
+
269
+
270
+
271
+ </td>
272
+
273
+ <td>
274
+
275
+ <img src="rest.png">
276
+
277
+
278
+
279
+
280
+
281
+ </td>
282
+
283
+ <td class="hide">
284
+
285
+
286
+
287
+ <img src="rest.png">
288
+
289
+ </td>
290
+
291
+ <td class="hide">
292
+
293
+ <img src="rest.png">
294
+
295
+ </td>
296
+
297
+ </tr>
298
+
299
+
300
+
301
+ </table>
302
+
303
+ </div>
304
+
305
+
306
+
307
+ </div>
308
+
309
+
310
+
311
+
312
+
313
+
314
+
315
+
316
+
317
+ <div id='howtosee' class='content'>
318
+
319
+
320
+
321
+
322
+
323
+
324
+
325
+ <p class="howtosee-title">見方</p>
326
+
327
+
328
+
329
+
330
+
331
+
332
+
333
+
334
+
335
+ <div class="out"><p class="in" id="explain-1">####</p>
336
+
337
+ </div>
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <div class="frequency-levels">
346
+
347
+ <img src="frequency-levels.png">
348
+
349
+ </div>
350
+
351
+
352
+
353
+ <p class="small-1">####</p>
354
+
355
+
356
+
357
+
358
+
359
+ <div class="out"><p class="in" id="explain-2">###</p>
360
+
361
+ </div>
362
+
363
+
364
+
365
+ <div class="decibel-levels">
366
+
367
+ <img src="decibel-levels.png">
368
+
369
+ </div>
370
+
371
+
372
+
373
+ <p id="explain-3">###</p>
374
+
375
+ <p class="small-2">####</p>
376
+
377
+
378
+
379
+
380
+
381
+
382
+
383
+ <p class="howtosee-title2">###</p>
384
+
385
+ <p class="explain">####</p>
386
+
387
+ <p class="explain"><br>####<br/><br>
388
+
389
+ ##<br/></p>
390
+
391
+
392
+
393
+
394
+
395
+
396
+
397
+ <p class="howtosee-title3">####</p>
398
+
399
+ <p class="explain">####<br>
400
+
401
+ <br>####</p>
52
402
 
53
403
 
54
404
 
55
- </div>
56
-
57
-
58
-
59
-
60
-
61
- <div class="main">
62
-
63
- <p class="photo-title">###</p>
64
-
65
-
66
-
67
-
68
-
69
- <div class="box">
70
-
71
- <div class="whole-photo">
72
-
73
-
74
-
75
-
76
-
77
- <img src="pic.png" alt="">
78
-
79
-
80
-
81
-
82
-
83
- </div>
84
-
85
- </div>
405
+
406
+
407
+ </div> <!-- #howtoseeの閉じタグ -->
408
+
409
+
410
+
411
+
412
+
413
+ </div>
414
+
415
+
416
+
417
+ <!-- <div class="push"></div> -->
418
+
419
+
420
+
421
+ </div>
422
+
423
+ <div class="footer" id="footer">
424
+
425
+
426
+
427
+ </div>
428
+
429
+ </body>
430
+
431
+ </html>
432
+
433
+
434
+
435
+
436
+
437
+ <!---------- フッター --------->
438
+
439
+ <div class="footer" id="footer">
440
+
441
+
442
+
443
+ </div>
444
+
445
+ </body>
446
+
447
+ </html>
448
+
449
+
450
+
451
+ ```
452
+
453
+
454
+
455
+ ```CSS
456
+
457
+ .@charset "UTF-8";
458
+
459
+
460
+
461
+ /*PC用*/
462
+
463
+
464
+
465
+ @media (min-width:481px){
466
+
467
+
468
+
469
+
470
+
471
+ /* メイン */
472
+
473
+ .main{
474
+
475
+ width: 100%;
476
+
477
+ height: 1000px;
478
+
479
+ padding: 100px 0px;
480
+
481
+ margin: 0px;
482
+
483
+
484
+
485
+ }
486
+
487
+
488
+
489
+
490
+
491
+ .tab-change{
492
+
493
+
494
+
495
+ /*max-width: 100%;*/
496
+
497
+ height:auto;
498
+
499
+ margin-right:27%;
500
+
501
+ margin-left:27%;
502
+
503
+ margin-bottom:15%;
504
+
505
+ margin-top:10%;
506
+
507
+
508
+
509
+ }
510
+
511
+
512
+
513
+ /*メニューの切り替えタブ*/
514
+
515
+
516
+
517
+ .tab-change a{
518
+
519
+ border-radius: 7px 7px 0 0;
520
+
521
+ display:inline-block;
522
+
523
+ line-height: 38px;
524
+
525
+ text-align: center;
526
+
527
+ background-color:white ;
528
+
529
+ color: black;
530
+
531
+ margin-left:auto;
532
+
533
+ margin-right:6%;
534
+
535
+ font-size:20px;
536
+
537
+ float:right;
538
+
539
+ text-decoration: none;
540
+
541
+ padding: 0 32px;
542
+
543
+
544
+
545
+ }
546
+
547
+
548
+
549
+ /*マウスをメニュータブに乗せた時、透過させる*/
550
+
551
+ .tab-change a:hover{
552
+
553
+ opacity:0.6;
554
+
555
+ }
556
+
557
+
558
+
559
+ .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
560
+
561
+ .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
562
+
563
+ .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
564
+
565
+
566
+
567
+
568
+
569
+
570
+
571
+ .content {
572
+
573
+ height: 320px;
574
+
575
+ display: none;
576
+
577
+
578
+
579
+
580
+
581
+
582
+
583
+ }
584
+
585
+
586
+
587
+ .content:target {
588
+
589
+ display: block;
590
+
591
+ }
592
+
593
+
594
+
595
+
596
+
597
+
86
598
 
87
599
 
88
600
 
89
-
90
-
91
-
92
-
93
- <div class="note" id="note">
94
-
95
- <img src="green.png" class="tape"/>
96
-
97
-
98
-
99
- <p class="memo-title">〜メモ〜</p>
100
-
101
- <div class="letters">
102
-
103
- <p>###
104
-
105
- </p>
106
-
107
- </div>
108
-
109
-
110
-
111
- </div>
112
-
113
- <div>
114
-
115
-
116
-
117
-
118
-
119
- <div>
120
-
121
- <nav class="tab-change">
122
-
123
- <a href='#howtosee'>見かた</a>
124
-
125
- <a href='#this-week'>一週間</a>
126
-
127
- <a href='#today'>今日</a>
128
-
129
-
130
-
131
-
132
-
133
- </nav>
134
-
135
- </div>
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
- <div id='today' class='content'>
144
-
145
- <p class="Day-title">♪<span id="view_today"></span>の情報</p>
146
-
147
- <div class="day">
148
-
149
- <table border="1" rules="cols" >
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
- </table>
160
-
161
- </div>
162
-
163
-
164
-
165
- </div>
166
-
167
-
168
-
169
-
170
-
171
- <div id='this-week' class='content'>
172
-
173
- <p class="Week-title">先週</p>
174
-
175
- <div class="week">
176
-
177
- <table border="1" rules="cols">
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
- </table>
186
-
187
- </div>
188
-
189
-
190
-
191
- </div>
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
- <div id='howtosee' class='content'>
206
-
207
-
208
-
209
-
210
-
211
- <p class="howtosee-title">見方</p>
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
- <div class="out"><p class="in" id="explain-1">###</p>
222
-
223
- </div>
224
-
225
-
226
-
227
-
228
-
229
- <!-- <p class="explain" id="explain-1">####</p> -->
230
-
231
-
232
-
233
- <div class="frequency-levels">
234
-
235
- <img src="frequency-levels.png">
236
-
237
- </div>
238
-
239
-
240
-
241
- <p class="small-1">####</p>
242
-
243
-
244
-
245
-
246
-
247
- <div class="out"><p class="in" id="explain-2">#####</p>
248
-
249
- </div>
250
-
251
-
252
-
253
- <div class="decibel-levels">
254
-
255
- <img src="decibel-levels.png">
256
-
257
- </div>
258
-
259
-
260
-
261
- <p id="explain-3">###</p>
262
-
263
- <p class="small-2">###</p>
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
- <p class="howtosee-title2">111/p>
272
-
273
- <p class="explain"111</p>
274
-
275
- <p class="explain">111</p>
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
- <p class="howtosee-title3">222</p>
284
-
285
- <p class="explain">222</p>
286
-
287
-
288
-
289
-
290
-
291
- </div>
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
- </div>
304
-
305
-
306
-
307
-
308
-
309
- <div class="push"></div>
310
-
311
-
312
-
313
- </div>
314
-
315
-
316
-
317
-
318
-
319
- <!---------- フッター --------->
320
-
321
- <div class="footer" id="footer">
322
-
323
-
324
-
325
- </div>
326
-
327
- </body>
328
-
329
- </html>
601
+
602
+
603
+ .Week-title{
604
+
605
+ border-bottom:3px solid #23c1ea;
606
+
607
+ width:17%;
608
+
609
+ padding-top:8%;
610
+
611
+ margin-left:10%;
612
+
613
+ font-size:25px;
614
+
615
+ margin-top:20%;
616
+
617
+ text-align: center;
618
+
619
+
620
+
621
+
622
+
623
+ }
624
+
625
+
626
+
627
+ .Day-title{
628
+
629
+ margin-left:10%;
630
+
631
+ border-bottom:3px solid #23c1ea;
632
+
633
+ width:24%;
634
+
635
+ padding-top:8%;
636
+
637
+ font-size:25px;
638
+
639
+ margin-top:20%;
640
+
641
+ text-align: center;
642
+
643
+
644
+
645
+ }
646
+
647
+ /*表のレイアウト*/
648
+
649
+
650
+
651
+ table {
652
+
653
+ border:1px solid #000;
654
+
655
+ margin-left:0;
656
+
657
+ margin-right:auto;
658
+
659
+ background-color: white;
660
+
661
+ width:100%;
662
+
663
+ height:100%;
664
+
665
+ font-size: 25px;
666
+
667
+ }
668
+
669
+
670
+
671
+
672
+
673
+
674
+
675
+
676
+
677
+ .day {
678
+
679
+ text-align: center;
680
+
681
+ font-size: 22px;
682
+
683
+ margin-top:auto;
684
+
685
+ margin-left:10%;
686
+
687
+ margin-right:10%;
688
+
689
+
690
+
691
+ }
692
+
693
+
694
+
695
+
696
+
697
+ .day img {
698
+
699
+ width: 200px;
700
+
701
+ }
702
+
703
+
704
+
705
+ .day tr td{
706
+
707
+ border:1px solid black;
708
+
709
+
710
+
711
+ }
712
+
713
+
714
+
715
+ .week{
716
+
717
+ text-align: center;
718
+
719
+ font-size: 22px;
720
+
721
+ margin-top: auto;
722
+
723
+ margin-left:10%;
724
+
725
+ margin-right:10%;
726
+
727
+
728
+
729
+ }
730
+
731
+
732
+
733
+ .week tr td{
734
+
735
+ border:1px solid black;
736
+
737
+ }
738
+
739
+
740
+
741
+ .week img {
742
+
743
+ width:200px;
744
+
745
+
746
+
747
+ }
748
+
749
+
750
+
751
+
752
+
753
+ .box:after {
754
+
755
+ content: ' ';
756
+
757
+ clear: both;
758
+
759
+ display: block;
760
+
761
+ }
762
+
763
+
764
+
765
+ .base {
766
+
767
+ position: relative;
768
+
769
+ }
770
+
771
+
772
+
773
+ .low-frequency {
774
+
775
+ position: absolute;
776
+
777
+ left:-8%;
778
+
779
+
780
+
781
+
782
+
783
+
784
+
785
+ }
786
+
787
+
788
+
789
+ .low-frequency2{
790
+
791
+ position: absolute;
792
+
793
+ left:-8%;
794
+
795
+
796
+
797
+
798
+
799
+ }
800
+
801
+ .decibel{
802
+
803
+
804
+
805
+ margin-top:0%;
806
+
807
+ padding-top:8%;
808
+
809
+
810
+
811
+
812
+
813
+
814
+
815
+ }
816
+
817
+
818
+
819
+ .out{
820
+
821
+ position:relative;
822
+
823
+
824
+
825
+ }
826
+
827
+
828
+
829
+ .in{
830
+
831
+ position:absolute;
832
+
833
+
834
+
835
+
836
+
837
+ }
838
+
839
+
840
+
841
+
842
+
843
+ .frequency-levels img{
844
+
845
+ width: 40%;
846
+
847
+ height:40%:;
848
+
849
+ margin-top:-10%;
850
+
851
+ margin-left:5%;
852
+
853
+
854
+
855
+ }
856
+
857
+
858
+
859
+ .decibel-levels img{
860
+
861
+ width: 32%;
862
+
863
+ height:32%:;
864
+
865
+ margin-top:3%;
866
+
867
+ margin-right:50%;
868
+
869
+ margin-left:10%;
870
+
871
+ padding:0%;
872
+
873
+ margin-bottom:5%;
874
+
875
+
876
+
877
+ }
878
+
879
+
880
+
881
+
882
+
883
+ }
330
884
 
331
885
 
332
886
 
333
887
  ```
334
-
335
-
336
-
337
- ```CSS
338
-
339
- .@charset "UTF-8";
340
-
341
-
342
-
343
- /*PC用*/
344
-
345
-
346
-
347
- @media (min-width:481px){
348
-
349
-
350
-
351
-
352
-
353
- /* メイン */
354
-
355
- .main{
356
-
357
- width: 100%;
358
-
359
- height: 1000px;
360
-
361
- padding: 100px 0px;
362
-
363
- margin: 0px;
364
-
365
-
366
-
367
- }
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
- .tab-change{
380
-
381
-
382
-
383
- /*max-width: 100%;*/
384
-
385
- height:auto;
386
-
387
- margin-right:27%;
388
-
389
- margin-left:27%;
390
-
391
- margin-bottom:15%;
392
-
393
- margin-top:10%;
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
-
402
-
403
- }
404
-
405
-
406
-
407
- /*メニューの切り替えタブ*/
408
-
409
-
410
-
411
- .tab-change a{
412
-
413
- border-radius: 7px 7px 0 0;
414
-
415
- display:inline-block;
416
-
417
- line-height: 38px;
418
-
419
- text-align: center;
420
-
421
- background-color:white ;
422
-
423
- color: black;
424
-
425
- margin-left:auto;
426
-
427
- margin-right:6%;
428
-
429
- font-size:20px;
430
-
431
- float:right;
432
-
433
- text-decoration: none;
434
-
435
- padding: 0 32px;
436
-
437
-
438
-
439
- }
440
-
441
-
442
-
443
- /*マウスをメニュータブに乗せた時、透過させる*/
444
-
445
- .tab-change a:hover{
446
-
447
- opacity:0.6;
448
-
449
- }
450
-
451
-
452
-
453
- .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
454
-
455
- .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
456
-
457
- .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
- .content {
466
-
467
- height: 320px;
468
-
469
- display: none;
470
-
471
-
472
-
473
-
474
-
475
-
476
-
477
- }
478
-
479
-
480
-
481
- .content:target {
482
-
483
- display: block;
484
-
485
- }
486
-
487
-
488
-
489
-
490
-
491
-
492
-
493
-
494
-
495
- /*表のレイアウト*/
496
-
497
-
498
-
499
- table {
500
-
501
- border:1px solid #000;
502
-
503
- margin-left:0;
504
-
505
- margin-right:auto;
506
-
507
- background-color: white;
508
-
509
- width:100%;
510
-
511
- height:100%;
512
-
513
- font-size: 25px;
514
-
515
- }
516
-
517
-
518
-
519
-
520
-
521
-
522
-
523
-
524
-
525
- .day {
526
-
527
- text-align: center;
528
-
529
- font-size: 22px;
530
-
531
- margin-top:auto;
532
-
533
- margin-left:10%;
534
-
535
- margin-right:10%;
536
-
537
-
538
-
539
- }
540
-
541
-
542
-
543
-
544
-
545
- .day img {
546
-
547
- width: 200px;
548
-
549
- }
550
-
551
-
552
-
553
- .day tr td{
554
-
555
- border:1px solid black;
556
-
557
-
558
-
559
- }
560
-
561
-
562
-
563
- .week{
564
-
565
- text-align: center;
566
-
567
- font-size: 22px;
568
-
569
- margin-top: auto;
570
-
571
- margin-left:10%;
572
-
573
- margin-right:10%;
574
-
575
-
576
-
577
- }
578
-
579
-
580
-
581
- .week tr td{
582
-
583
- border:1px solid black;
584
-
585
- }
586
-
587
-
588
-
589
- .week img {
590
-
591
- width:200px;
592
-
593
-
594
-
595
- }
596
-
597
-
598
-
599
-
600
-
601
- .box:after {
602
-
603
- content: ' ';
604
-
605
- clear: both;
606
-
607
- display: block;
608
-
609
- }
610
-
611
-
612
-
613
- .base {
614
-
615
- position: relative;
616
-
617
- }
618
-
619
-
620
-
621
- .low-frequency {
622
-
623
- position: absolute;
624
-
625
-
626
-
627
- left:-8%;
628
-
629
-
630
-
631
-
632
-
633
-
634
-
635
- }
636
-
637
-
638
-
639
- .low-frequency2{
640
-
641
- position: absolute;
642
-
643
- left:-8%;
644
-
645
-
646
-
647
-
648
-
649
- }
650
-
651
- .decibel{
652
-
653
-
654
-
655
- margin-top:0%;
656
-
657
- padding-top:8%;
658
-
659
-
660
-
661
-
662
-
663
-
664
-
665
- }
666
-
667
-
668
-
669
- .out{
670
-
671
- position:relative;
672
-
673
-
674
-
675
- }
676
-
677
-
678
-
679
- .in{
680
-
681
- position:absolute;
682
-
683
-
684
-
685
-
686
-
687
- }
688
-
689
-
690
-
691
- #explain-1{
692
-
693
-
694
-
695
- margin-left:47%;
696
-
697
- font-size:22px;
698
-
699
- margin-top:10%;
700
-
701
- padding:0%;
702
-
703
-
704
-
705
- }
706
-
707
-
708
-
709
-
710
-
711
- /*#explain-1の直前に画像を表示させる*/
712
-
713
- #explain-1::before{
714
-
715
- content: url(symbol-2.png);
716
-
717
- position: relative;
718
-
719
- top: 0.8em;
720
-
721
- margin-right: 0.5em;
722
-
723
-
724
-
725
-
726
-
727
- }
728
-
729
-
730
-
731
- #explain-2{
732
-
733
- margin-left:47%;
734
-
735
- font-size:22px;
736
-
737
- margin-top:17%;
738
-
739
-
740
-
741
-
742
-
743
- }
744
-
745
-
746
-
747
-
748
-
749
-
750
-
751
- /*#explain-2の直前に画像を表示させる*/
752
-
753
- #explain-2::before{
754
-
755
- content: url(symbol-1.png);
756
-
757
- position: relative;
758
-
759
- top: 0.8em;
760
-
761
- margin-right: 0.5em;
762
-
763
-
764
-
765
-
766
-
767
- }
768
-
769
- #explain-3{
770
-
771
-
772
-
773
- padding-top:10%;
774
-
775
- font-size:22px;
776
-
777
- padding-right:55%;
778
-
779
- margin-left:13%;
780
-
781
-
782
-
783
-
784
-
785
- }
786
-
787
-
788
-
789
-
790
-
791
-
792
-
793
- .small-1{
794
-
795
-
796
-
797
- padding-right:55%;
798
-
799
- margin-left:13%;
800
-
801
- padding-top:0%;
802
-
803
- margin-top:23%;
804
-
805
-
806
-
807
-
808
-
809
- }
810
-
811
-
812
-
813
-
814
-
815
- .small-2{
816
-
817
-
818
-
819
- margin-left:16%;
820
-
821
-
822
-
823
- }
824
-
825
-
826
-
827
- .explain{
828
-
829
- margin-right:5%;
830
-
831
- margin-left:10%;
832
-
833
- font-size:22px;
834
-
835
-
836
-
837
-
838
-
839
- }
840
-
841
-
842
-
843
- .frequency-levels img{
844
-
845
- width: 40%;
846
-
847
- height:40%:;
848
-
849
- margin-top:-10%;
850
-
851
- margin-left:5%;
852
-
853
-
854
-
855
- }
856
-
857
-
858
-
859
- .decibel-levels img{
860
-
861
- width: 32%;
862
-
863
- height:32%:;
864
-
865
- margin-top:3%;
866
-
867
- margin-right:50%;
868
-
869
- margin-left:10%;
870
-
871
- padding:0%;
872
-
873
- margin-bottom:5%;
874
-
875
-
876
-
877
- }
878
-
879
-
880
-
881
-
882
-
883
- .howtosee-title{
884
-
885
- border-bottom:3px solid #23c1ea;
886
-
887
- width:14%;
888
-
889
- text-align: center;
890
-
891
- font-size:26px;
892
-
893
- padding-top:10%;
894
-
895
- margin-left:10%;
896
-
897
-
898
-
899
-
900
-
901
-
902
-
903
- }
904
-
905
-
906
-
907
-
908
-
909
-
910
-
911
- .howtosee-title2{
912
-
913
- border-bottom:3px solid #23c1ea;
914
-
915
- width:12%;
916
-
917
- font-size:26px;
918
-
919
- text-align: center;
920
-
921
- padding-top:10%;
922
-
923
- margin-left:10%;
924
-
925
-
926
-
927
-
928
-
929
-
930
-
931
- }
932
-
933
-
934
-
935
- .howtosee-title3{
936
-
937
- border-bottom:3px solid #23c1ea;
938
-
939
- width:17%;
940
-
941
- font-size:26px;
942
-
943
- text-align: center;
944
-
945
- margin-left:10%;
946
-
947
- margin-top:10%;
948
-
949
-
950
-
951
-
952
-
953
-
954
-
955
-
956
-
957
-
958
-
959
- }
960
-
961
-
962
-
963
- /*hideクラスをつけた、土曜日と日曜日情報は、非表示にしておく*/
964
-
965
-
966
-
967
- .hide{
968
-
969
- display: none;
970
-
971
- }
972
-
973
- /*
974
-
975
-
976
-
977
-
978
-
979
-
980
-
981
-
982
-
983
- ```

1

改善更新

2017/07/10 06:02

投稿

miramikan
miramikan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -6,8 +6,6 @@
6
6
 
7
7
  ```HTML
8
8
 
9
-
10
-
11
9
  <!DOCTYPE html>
12
10
 
13
11
  <html lang="ja">
@@ -24,6 +22,10 @@
24
22
 
25
23
 
26
24
 
25
+
26
+
27
+
28
+
27
29
  <link rel="stylesheet" type="text/css" href="kamo.css">
28
30
 
29
31
  <link rel="icon" href="icon.jpg">
@@ -34,13 +36,17 @@
34
36
 
35
37
 
36
38
 
39
+
40
+
41
+
42
+
37
43
 
38
44
 
39
45
  </head>
40
46
 
41
47
  <body>
42
48
 
43
-
49
+ <!---------- ヘッダー --------->
44
50
 
45
51
  <div class="header">
46
52
 
@@ -68,7 +74,7 @@
68
74
 
69
75
 
70
76
 
71
- <img src="###" alt="###">
77
+ <img src="pic.png" alt="">
72
78
 
73
79
 
74
80
 
@@ -84,6 +90,26 @@
84
90
 
85
91
 
86
92
 
93
+ <div class="note" id="note">
94
+
95
+ <img src="green.png" class="tape"/>
96
+
97
+
98
+
99
+ <p class="memo-title">〜メモ〜</p>
100
+
101
+ <div class="letters">
102
+
103
+ <p>###
104
+
105
+ </p>
106
+
107
+ </div>
108
+
109
+
110
+
111
+ </div>
112
+
87
113
  <div>
88
114
 
89
115
 
@@ -94,11 +120,11 @@
94
120
 
95
121
  <nav class="tab-change">
96
122
 
97
- <a href='#howtosee'>222</a>
123
+ <a href='#howtosee'>見かた</a>
98
-
124
+
99
- <a href='#this-week'>333</a>
125
+ <a href='#this-week'>一週間</a>
100
-
126
+
101
- <a href='#today'>444</a>
127
+ <a href='#today'>今日</a>
102
128
 
103
129
 
104
130
 
@@ -112,64 +138,160 @@
112
138
 
113
139
 
114
140
 
141
+
142
+
143
+ <div id='today' class='content'>
144
+
145
+ <p class="Day-title">♪<span id="view_today"></span>の情報</p>
146
+
147
+ <div class="day">
148
+
149
+ <table border="1" rules="cols" >
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+
158
+
159
+ </table>
160
+
161
+ </div>
162
+
163
+
164
+
165
+ </div>
166
+
167
+
168
+
169
+
170
+
171
+ <div id='this-week' class='content'>
172
+
173
+ <p class="Week-title">先週</p>
174
+
175
+ <div class="week">
176
+
177
+ <table border="1" rules="cols">
178
+
179
+
180
+
181
+
182
+
183
+
184
+
185
+ </table>
186
+
187
+ </div>
188
+
189
+
190
+
191
+ </div>
192
+
193
+
194
+
195
+
196
+
197
+
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+ <div id='howtosee' class='content'>
206
+
207
+
208
+
209
+
210
+
211
+ <p class="howtosee-title">見方</p>
212
+
213
+
214
+
215
+
216
+
217
+
218
+
219
+
220
+
221
+ <div class="out"><p class="in" id="explain-1">###</p>
222
+
223
+ </div>
224
+
225
+
226
+
227
+
228
+
229
+ <!-- <p class="explain" id="explain-1">####</p> -->
230
+
231
+
232
+
233
+ <div class="frequency-levels">
234
+
235
+ <img src="frequency-levels.png">
236
+
237
+ </div>
238
+
239
+
240
+
241
+ <p class="small-1">####</p>
242
+
243
+
244
+
245
+
246
+
247
+ <div class="out"><p class="in" id="explain-2">#####</p>
248
+
249
+ </div>
250
+
251
+
252
+
253
+ <div class="decibel-levels">
254
+
255
+ <img src="decibel-levels.png">
256
+
257
+ </div>
258
+
259
+
260
+
261
+ <p id="explain-3">###</p>
262
+
263
+ <p class="small-2">###</p>
264
+
265
+
266
+
267
+
268
+
269
+
270
+
271
+ <p class="howtosee-title2">111/p>
272
+
273
+ <p class="explain"111</p>
274
+
275
+ <p class="explain">111</p>
276
+
277
+
278
+
279
+
280
+
281
+
282
+
283
+ <p class="howtosee-title3">222</p>
284
+
285
+ <p class="explain">222</p>
286
+
287
+
288
+
289
+
290
+
291
+ </div>
292
+
115
293
 
116
294
 
117
- <div id='today' class='content'>
118
-
119
- <p class="Day-title">♪<span id="view_today"></span>今日</p>
120
-
121
- <div class="day" id='today'>
122
-
123
- <p>000</p>
124
-
125
-
126
-
127
- </div>
128
-
129
-
130
-
131
- </div>
132
-
133
-
134
-
135
-
136
-
137
- <div id='this-week' class='content'>
138
-
139
- <p class="Week-title">先週</p>
140
-
141
- <div class="week">
142
-
143
- <p>1111</p>
144
-
145
- </div>
146
-
147
-
148
-
149
- </div>
150
-
151
-
152
-
153
-
154
-
155
- <div id='howtosee' class='content'>
156
-
157
-
158
-
159
-
160
-
161
- <p class="howtosee-title">見方</p>
162
-
163
- <p>####</p>
164
-
165
-
166
-
167
-
168
-
169
- </div>
170
-
171
-
172
-
173
295
 
174
296
 
175
297
 
@@ -184,160 +306,678 @@
184
306
 
185
307
 
186
308
 
309
+ <div class="push"></div>
310
+
311
+
312
+
313
+ </div>
314
+
315
+
316
+
317
+
318
+
319
+ <!---------- フッター --------->
320
+
321
+ <div class="footer" id="footer">
322
+
323
+
324
+
325
+ </div>
326
+
327
+ </body>
328
+
329
+ </html>
330
+
331
+
332
+
333
+ ```
334
+
335
+
336
+
337
+ ```CSS
338
+
339
+ .@charset "UTF-8";
340
+
341
+
342
+
343
+ /*PC用*/
344
+
345
+
346
+
347
+ @media (min-width:481px){
348
+
349
+
350
+
351
+
352
+
353
+ /* メイン */
354
+
355
+ .main{
356
+
357
+ width: 100%;
358
+
359
+ height: 1000px;
360
+
361
+ padding: 100px 0px;
362
+
363
+ margin: 0px;
364
+
365
+
366
+
367
+ }
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+ .tab-change{
380
+
381
+
382
+
383
+ /*max-width: 100%;*/
384
+
385
+ height:auto;
386
+
387
+ margin-right:27%;
388
+
389
+ margin-left:27%;
390
+
391
+ margin-bottom:15%;
392
+
393
+ margin-top:10%;
394
+
395
+
396
+
397
+
398
+
399
+
400
+
401
+
402
+
403
+ }
404
+
405
+
406
+
407
+ /*メニューの切り替えタブ*/
408
+
409
+
410
+
411
+ .tab-change a{
412
+
413
+ border-radius: 7px 7px 0 0;
414
+
415
+ display:inline-block;
416
+
417
+ line-height: 38px;
418
+
419
+ text-align: center;
420
+
421
+ background-color:white ;
422
+
423
+ color: black;
424
+
425
+ margin-left:auto;
426
+
427
+ margin-right:6%;
428
+
429
+ font-size:20px;
430
+
431
+ float:right;
432
+
433
+ text-decoration: none;
434
+
435
+ padding: 0 32px;
436
+
437
+
438
+
439
+ }
440
+
441
+
442
+
443
+ /*マウスをメニュータブに乗せた時、透過させる*/
444
+
445
+ .tab-change a:hover{
446
+
447
+ opacity:0.6;
448
+
449
+ }
450
+
451
+
452
+
453
+ .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
454
+
455
+ .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
456
+
457
+ .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
458
+
459
+
460
+
461
+
462
+
463
+
464
+
465
+ .content {
466
+
467
+ height: 320px;
468
+
469
+ display: none;
470
+
471
+
472
+
473
+
474
+
475
+
476
+
477
+ }
478
+
479
+
480
+
481
+ .content:target {
482
+
483
+ display: block;
484
+
485
+ }
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+ /*表のレイアウト*/
496
+
497
+
498
+
499
+ table {
500
+
501
+ border:1px solid #000;
502
+
503
+ margin-left:0;
504
+
505
+ margin-right:auto;
506
+
507
+ background-color: white;
508
+
509
+ width:100%;
510
+
511
+ height:100%;
512
+
513
+ font-size: 25px;
514
+
515
+ }
516
+
517
+
518
+
519
+
520
+
521
+
522
+
523
+
524
+
525
+ .day {
526
+
527
+ text-align: center;
528
+
529
+ font-size: 22px;
530
+
531
+ margin-top:auto;
532
+
533
+ margin-left:10%;
534
+
535
+ margin-right:10%;
536
+
537
+
538
+
539
+ }
540
+
541
+
542
+
543
+
544
+
545
+ .day img {
546
+
547
+ width: 200px;
548
+
549
+ }
550
+
551
+
552
+
553
+ .day tr td{
554
+
555
+ border:1px solid black;
556
+
557
+
558
+
559
+ }
560
+
561
+
562
+
563
+ .week{
564
+
565
+ text-align: center;
566
+
567
+ font-size: 22px;
568
+
569
+ margin-top: auto;
570
+
571
+ margin-left:10%;
572
+
573
+ margin-right:10%;
574
+
575
+
576
+
577
+ }
578
+
579
+
580
+
581
+ .week tr td{
582
+
583
+ border:1px solid black;
584
+
585
+ }
586
+
587
+
588
+
589
+ .week img {
590
+
591
+ width:200px;
592
+
593
+
594
+
595
+ }
596
+
597
+
598
+
599
+
600
+
601
+ .box:after {
602
+
603
+ content: ' ';
604
+
605
+ clear: both;
606
+
607
+ display: block;
608
+
609
+ }
610
+
611
+
612
+
613
+ .base {
614
+
615
+ position: relative;
616
+
617
+ }
618
+
619
+
620
+
621
+ .low-frequency {
622
+
623
+ position: absolute;
624
+
625
+
626
+
627
+ left:-8%;
628
+
629
+
630
+
631
+
632
+
633
+
634
+
635
+ }
636
+
637
+
638
+
639
+ .low-frequency2{
640
+
641
+ position: absolute;
642
+
643
+ left:-8%;
644
+
645
+
646
+
647
+
648
+
649
+ }
650
+
651
+ .decibel{
652
+
653
+
654
+
655
+ margin-top:0%;
656
+
657
+ padding-top:8%;
658
+
659
+
660
+
661
+
662
+
663
+
664
+
665
+ }
666
+
667
+
668
+
669
+ .out{
670
+
671
+ position:relative;
672
+
187
673
 
188
674
 
189
-
190
-
191
- </div>
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
- <div class="footer" id="footer">
200
-
201
- </div>
202
-
203
- </body>
204
-
205
- </html>
675
+ }
676
+
677
+
678
+
679
+ .in{
680
+
681
+ position:absolute;
682
+
683
+
684
+
685
+
686
+
687
+ }
688
+
689
+
690
+
691
+ #explain-1{
692
+
693
+
694
+
695
+ margin-left:47%;
696
+
697
+ font-size:22px;
698
+
699
+ margin-top:10%;
700
+
701
+ padding:0%;
702
+
703
+
704
+
705
+ }
706
+
707
+
708
+
709
+
710
+
711
+ /*#explain-1の直前に画像を表示させる*/
712
+
713
+ #explain-1::before{
714
+
715
+ content: url(symbol-2.png);
716
+
717
+ position: relative;
718
+
719
+ top: 0.8em;
720
+
721
+ margin-right: 0.5em;
722
+
723
+
724
+
725
+
726
+
727
+ }
728
+
729
+
730
+
731
+ #explain-2{
732
+
733
+ margin-left:47%;
734
+
735
+ font-size:22px;
736
+
737
+ margin-top:17%;
738
+
739
+
740
+
741
+
742
+
743
+ }
744
+
745
+
746
+
747
+
748
+
749
+
750
+
751
+ /*#explain-2の直前に画像を表示させる*/
752
+
753
+ #explain-2::before{
754
+
755
+ content: url(symbol-1.png);
756
+
757
+ position: relative;
758
+
759
+ top: 0.8em;
760
+
761
+ margin-right: 0.5em;
762
+
763
+
764
+
765
+
766
+
767
+ }
768
+
769
+ #explain-3{
770
+
771
+
772
+
773
+ padding-top:10%;
774
+
775
+ font-size:22px;
776
+
777
+ padding-right:55%;
778
+
779
+ margin-left:13%;
780
+
781
+
782
+
783
+
784
+
785
+ }
786
+
787
+
788
+
789
+
790
+
791
+
792
+
793
+ .small-1{
794
+
795
+
796
+
797
+ padding-right:55%;
798
+
799
+ margin-left:13%;
800
+
801
+ padding-top:0%;
802
+
803
+ margin-top:23%;
804
+
805
+
806
+
807
+
808
+
809
+ }
810
+
811
+
812
+
813
+
814
+
815
+ .small-2{
816
+
817
+
818
+
819
+ margin-left:16%;
820
+
821
+
822
+
823
+ }
824
+
825
+
826
+
827
+ .explain{
828
+
829
+ margin-right:5%;
830
+
831
+ margin-left:10%;
832
+
833
+ font-size:22px;
834
+
835
+
836
+
837
+
838
+
839
+ }
840
+
841
+
842
+
843
+ .frequency-levels img{
844
+
845
+ width: 40%;
846
+
847
+ height:40%:;
848
+
849
+ margin-top:-10%;
850
+
851
+ margin-left:5%;
852
+
853
+
854
+
855
+ }
856
+
857
+
858
+
859
+ .decibel-levels img{
860
+
861
+ width: 32%;
862
+
863
+ height:32%:;
864
+
865
+ margin-top:3%;
866
+
867
+ margin-right:50%;
868
+
869
+ margin-left:10%;
870
+
871
+ padding:0%;
872
+
873
+ margin-bottom:5%;
874
+
875
+
876
+
877
+ }
878
+
879
+
880
+
881
+
882
+
883
+ .howtosee-title{
884
+
885
+ border-bottom:3px solid #23c1ea;
886
+
887
+ width:14%;
888
+
889
+ text-align: center;
890
+
891
+ font-size:26px;
892
+
893
+ padding-top:10%;
894
+
895
+ margin-left:10%;
896
+
897
+
898
+
899
+
900
+
901
+
902
+
903
+ }
904
+
905
+
906
+
907
+
908
+
909
+
910
+
911
+ .howtosee-title2{
912
+
913
+ border-bottom:3px solid #23c1ea;
914
+
915
+ width:12%;
916
+
917
+ font-size:26px;
918
+
919
+ text-align: center;
920
+
921
+ padding-top:10%;
922
+
923
+ margin-left:10%;
924
+
925
+
926
+
927
+
928
+
929
+
930
+
931
+ }
932
+
933
+
934
+
935
+ .howtosee-title3{
936
+
937
+ border-bottom:3px solid #23c1ea;
938
+
939
+ width:17%;
940
+
941
+ font-size:26px;
942
+
943
+ text-align: center;
944
+
945
+ margin-left:10%;
946
+
947
+ margin-top:10%;
948
+
949
+
950
+
951
+
952
+
953
+
954
+
955
+
956
+
957
+
958
+
959
+ }
960
+
961
+
962
+
963
+ /*hideクラスをつけた、土曜日と日曜日情報は、非表示にしておく*/
964
+
965
+
966
+
967
+ .hide{
968
+
969
+ display: none;
970
+
971
+ }
972
+
973
+ /*
974
+
975
+
976
+
977
+
978
+
979
+
206
980
 
207
981
 
208
982
 
209
983
  ```
210
-
211
-
212
-
213
- ```CSS
214
-
215
- .tab-change{
216
-
217
-
218
-
219
- /*max-width: 100%;*/
220
-
221
- height:auto;
222
-
223
- margin-right:27%;
224
-
225
- margin-left:27%;
226
-
227
- margin-bottom:15%;
228
-
229
- margin-top:10%;
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
- }
240
-
241
-
242
-
243
- /*メニューの切り替えタブ*/
244
-
245
-
246
-
247
- .tab-change a{
248
-
249
- border-radius: 7px 7px 0 0;
250
-
251
- display:inline-block;
252
-
253
- line-height: 38px;
254
-
255
- text-align: center;
256
-
257
- background-color:white ;
258
-
259
- color: black;
260
-
261
- margin-left:auto;
262
-
263
- margin-right:6%;
264
-
265
- font-size:20px;
266
-
267
- float:right;
268
-
269
- text-decoration: none;
270
-
271
- padding: 0 32px;
272
-
273
-
274
-
275
- }
276
-
277
-
278
-
279
- /*マウスをメニュータブに乗せた時、透過させる*/
280
-
281
- .tab-change a:hover{
282
-
283
- opacity:0.6;
284
-
285
- }
286
-
287
-
288
-
289
- .tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
290
-
291
- .tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
292
-
293
- .tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
- .content {
302
-
303
- height: 320px;
304
-
305
- display: none;
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
- }
314
-
315
-
316
-
317
- .content:target {
318
-
319
- display: block;
320
-
321
- }
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
- .box:after {
330
-
331
- content: ' ';
332
-
333
- clear: both;
334
-
335
- display: block;
336
-
337
- }
338
-
339
-
340
-
341
-
342
-
343
- ```