質問編集履歴

5

タイトルの変更

2017/10/22 16:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- ``#contents_2の#fixed_label_2の固定
9
+ ``#contents_2の#fixed_label_2の固定#contents_3の#fixed_label_3の固定
10
-
11
- ``#contents_3の#fixed_label_3の固定
12
10
 
13
11
 
14
12
 

4

タイトル変更

2017/10/22 16:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  ``#contents_2の#fixed_label_2の固定
10
10
 
11
- #contents_3の#fixed_label_3の固定``
11
+ ``#contents_3の#fixed_label_3の固定
12
12
 
13
13
 
14
14
 

3

タイトル変更

2017/10/22 16:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,9 @@
6
6
 
7
7
 
8
8
 
9
- #contents_2の#fixed_label_2の固定
9
+ ``#contents_2の#fixed_label_2の固定
10
-
10
+
11
- #contents_3の#fixed_label_3の固定
11
+ #contents_3の#fixed_label_3の固定``
12
12
 
13
13
 
14
14
 

2

コード修正

2017/10/22 16:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -480,267 +480,267 @@
480
480
 
481
481
 
482
482
 
483
+ *{
484
+
485
+ margin: 0;
486
+
487
+ padding: 0;
488
+
489
+ }
490
+
491
+
492
+
493
+ a{
494
+
495
+ text-decoration: none;
496
+
497
+ }
498
+
499
+ .header{
500
+
501
+ width: 100vw;
502
+
503
+ height: 50vw;
504
+
505
+ background-color: darkblue;
506
+
507
+ border-radius: 5vw;
508
+
509
+ color: #ffffff;
510
+
511
+ font-size: 10vw;
512
+
513
+ line-height: 50vw;
514
+
515
+ text-align: center;
516
+
517
+ }
518
+
519
+
520
+
521
+ .contents_1{
522
+
523
+ .fixed_label_1{
524
+
525
+ background-color: #ffffff;
526
+
527
+ .one{
528
+
529
+ display: inline-block;
530
+
531
+ height: 20vw;
532
+
533
+ width: 32vw;
534
+
535
+ line-height: 20vw;
536
+
537
+ font-size: 5vw;
538
+
539
+ text-align: center;
540
+
541
+ border-bottom: solid 5px pink;
542
+
543
+ }
544
+
545
+ .two{
546
+
547
+ display: inline-block;
548
+
549
+ height: 20vw;
550
+
551
+ width: 32vw;
552
+
553
+ line-height: 20vw;
554
+
555
+ font-size: 5vw;
556
+
557
+ text-align: center;
558
+
559
+ border-bottom: solid 5px pink;
560
+
561
+ }
562
+
563
+ .three{
564
+
565
+ display: inline-block;
566
+
567
+ height: 20vw;
568
+
569
+ width: 32vw;
570
+
571
+ line-height: 20vw;
572
+
573
+ font-size: 5vw;
574
+
575
+ text-align: center;
576
+
577
+ border-bottom: solid 5px pink;
578
+
579
+ }
580
+
581
+ }
582
+
583
+ .list{
584
+
585
+ font-size: 7vw;
586
+
587
+ }
588
+
589
+ }
590
+
591
+
592
+
593
+ .contents_2{
594
+
595
+ display: none;
596
+
597
+ .fixed_label_2{
598
+
599
+ background-color: #ffffff;
600
+
601
+ .one{
602
+
603
+ display: inline-block;
604
+
605
+ height: 20vw;
606
+
607
+ width: 32vw;
608
+
609
+ line-height: 20vw;
610
+
611
+ font-size: 5vw;
612
+
613
+ text-align: center;
614
+
615
+ border-bottom: solid 5px pink;
616
+
617
+ }
618
+
619
+ .two{
620
+
621
+ display: inline-block;
622
+
623
+ height: 20vw;
624
+
625
+ width: 32vw;
626
+
627
+ line-height: 20vw;
628
+
629
+ font-size: 5vw;
630
+
631
+ text-align: center;
632
+
633
+ border-bottom: solid 5px pink;
634
+
635
+ }
636
+
637
+ .three{
638
+
639
+ display: inline-block;
640
+
641
+ height: 20vw;
642
+
643
+ width: 32vw;
644
+
645
+ line-height: 20vw;
646
+
647
+ font-size: 5vw;
648
+
649
+ text-align: center;
650
+
651
+ border-bottom: solid 5px pink;
652
+
653
+ }
654
+
655
+ }
656
+
657
+ .list{
658
+
659
+ font-size: 7vw;
660
+
661
+ }
662
+
663
+ }
664
+
665
+
666
+
667
+ .contents_3{
668
+
669
+ display: none;
670
+
671
+ .fixed_label_3{
672
+
673
+ background-color: #fff;
674
+
675
+ .one{
676
+
677
+ display: inline-block;
678
+
679
+ height: 20vw;
680
+
681
+ width: 32vw;
682
+
683
+ line-height: 20vw;
684
+
685
+ font-size: 5vw;
686
+
687
+ text-align: center;
688
+
689
+ border-bottom: solid 5px pink;
690
+
691
+ }
692
+
693
+ .two{
694
+
695
+ display: inline-block;
696
+
697
+ height: 20vw;
698
+
699
+ width: 32vw;
700
+
701
+ line-height: 20vw;
702
+
703
+ font-size: 5vw;
704
+
705
+ text-align: center;
706
+
707
+ border-bottom: solid 5px pink;
708
+
709
+ }
710
+
711
+ .three{
712
+
713
+ display: inline-block;
714
+
715
+ height: 20vw;
716
+
717
+ width: 32vw;
718
+
719
+ line-height: 20vw;
720
+
721
+ font-size: 5vw;
722
+
723
+ text-align: center;
724
+
725
+ border-bottom: solid 5px pink;
726
+
727
+ }
728
+
729
+ }
730
+
731
+ .list{
732
+
733
+ font-size: 7vw;
734
+
735
+ }
736
+
737
+ }
738
+
739
+
740
+
483
741
  ```
484
742
 
485
- *{
743
+
486
-
487
- margin: 0;
488
-
489
- padding: 0;
490
-
491
- }
492
-
493
-
494
-
495
- a{
496
-
497
- text-decoration: none;
498
-
499
- }
500
-
501
- .header{
502
-
503
- width: 100vw;
504
-
505
- height: 50vw;
506
-
507
- background-color: darkblue;
508
-
509
- border-radius: 5vw;
510
-
511
- color: #ffffff;
512
-
513
- font-size: 10vw;
514
-
515
- line-height: 50vw;
516
-
517
- text-align: center;
518
-
519
- }
520
-
521
-
522
-
523
- .contents_1{
524
-
525
- .fixed_label_1{
526
-
527
- background-color: #ffffff;
528
-
529
- .one{
530
-
531
- display: inline-block;
532
-
533
- height: 20vw;
534
-
535
- width: 32vw;
536
-
537
- line-height: 20vw;
538
-
539
- font-size: 5vw;
540
-
541
- text-align: center;
542
-
543
- border-bottom: solid 5px pink;
544
-
545
- }
546
-
547
- .two{
548
-
549
- display: inline-block;
550
-
551
- height: 20vw;
552
-
553
- width: 32vw;
554
-
555
- line-height: 20vw;
556
-
557
- font-size: 5vw;
558
-
559
- text-align: center;
560
-
561
- border-bottom: solid 5px pink;
562
-
563
- }
564
-
565
- .three{
566
-
567
- display: inline-block;
568
-
569
- height: 20vw;
570
-
571
- width: 32vw;
572
-
573
- line-height: 20vw;
574
-
575
- font-size: 5vw;
576
-
577
- text-align: center;
578
-
579
- border-bottom: solid 5px pink;
580
-
581
- }
582
-
583
- }
584
-
585
- .list{
586
-
587
- font-size: 7vw;
588
-
589
- }
590
-
591
- }
592
-
593
-
594
-
595
- .contents_2{
596
-
597
- display: none;
598
-
599
- .fixed_label_2{
600
-
601
- background-color: #ffffff;
602
-
603
- .one{
604
-
605
- display: inline-block;
606
-
607
- height: 20vw;
608
-
609
- width: 32vw;
610
-
611
- line-height: 20vw;
612
-
613
- font-size: 5vw;
614
-
615
- text-align: center;
616
-
617
- border-bottom: solid 5px pink;
618
-
619
- }
620
-
621
- .two{
622
-
623
- display: inline-block;
624
-
625
- height: 20vw;
626
-
627
- width: 32vw;
628
-
629
- line-height: 20vw;
630
-
631
- font-size: 5vw;
632
-
633
- text-align: center;
634
-
635
- border-bottom: solid 5px pink;
636
-
637
- }
638
-
639
- .three{
640
-
641
- display: inline-block;
642
-
643
- height: 20vw;
644
-
645
- width: 32vw;
646
-
647
- line-height: 20vw;
648
-
649
- font-size: 5vw;
650
-
651
- text-align: center;
652
-
653
- border-bottom: solid 5px pink;
654
-
655
- }
656
-
657
- }
658
-
659
- .list{
660
-
661
- font-size: 7vw;
662
-
663
- }
664
-
665
- }
666
-
667
-
668
-
669
- .contents_3{
670
-
671
- display: none;
672
-
673
- .fixed_label_3{
674
-
675
- background-color: #fff;
676
-
677
- .one{
678
-
679
- display: inline-block;
680
-
681
- height: 20vw;
682
-
683
- width: 32vw;
684
-
685
- line-height: 20vw;
686
-
687
- font-size: 5vw;
688
-
689
- text-align: center;
690
-
691
- border-bottom: solid 5px pink;
692
-
693
- }
694
-
695
- .two{
696
-
697
- display: inline-block;
698
-
699
- height: 20vw;
700
-
701
- width: 32vw;
702
-
703
- line-height: 20vw;
704
-
705
- font-size: 5vw;
706
-
707
- text-align: center;
708
-
709
- border-bottom: solid 5px pink;
710
-
711
- }
712
-
713
- .three{
714
-
715
- display: inline-block;
716
-
717
- height: 20vw;
718
-
719
- width: 32vw;
720
-
721
- line-height: 20vw;
722
-
723
- font-size: 5vw;
724
-
725
- text-align: center;
726
-
727
- border-bottom: solid 5px pink;
728
-
729
- }
730
-
731
- }
732
-
733
- .list{
734
-
735
- font-size: 7vw;
736
-
737
- }
738
-
739
- }
740
-
741
-
742
-
743
- ```
744
744
 
745
745
 
746
746
 

1

コード追加

2017/10/22 16:05

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -28,15 +28,719 @@
28
28
 
29
29
 
30
30
 
31
- php
32
-
33
- https://codeshare.io/aJPZQn
34
-
35
-
36
-
37
- sass
38
-
39
- https://codeshare.io/2KoV6E
31
+ ```ここに言語を入力
32
+
33
+ <!DOCTYPE html>
34
+
35
+ <html lang="en">
36
+
37
+ <head>
38
+
39
+ <meta charset="UTF-8">
40
+
41
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
42
+
43
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
44
+
45
+ <title>Document</title>
46
+
47
+
48
+
49
+ <!--jquery本体-->
50
+
51
+ <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
52
+
53
+
54
+
55
+ <!--css-->
56
+
57
+ <link rel="stylesheet" href="./css/practice1.min.css">
58
+
59
+
60
+
61
+ </head>
62
+
63
+ <body>
64
+
65
+
66
+
67
+ <div class="header">
68
+
69
+ header
70
+
71
+ </div>
72
+
73
+
74
+
75
+ <div class="contents_1" id="contents_1">
76
+
77
+
78
+
79
+ <div class="fixed_label_1" id="fixed_label_1">
80
+
81
+
82
+
83
+ <a class="fixed_label_1_1" id="fixed_label_1_1">
84
+
85
+ <div class="one">one</div>
86
+
87
+ </a>
88
+
89
+ <a class="fixed_label_1_2" id="fixed_label_1_2">
90
+
91
+ <div class="two">two</div>
92
+
93
+ </a>
94
+
95
+ <a class="fixed_label_1_3" id="fixed_label_1_3">
96
+
97
+ <div class="three">three</div>
98
+
99
+ </a>
100
+
101
+
102
+
103
+ </div>
104
+
105
+ <ul class="list">
106
+
107
+ <?php for($i=0; $i<50; $i++){ ?>
108
+
109
+ <li>one</li>
110
+
111
+ <?php } ?>
112
+
113
+ </ul>
114
+
115
+
116
+
117
+ </div>
118
+
119
+
120
+
121
+ <div class="contents_2" id="contents_2">
122
+
123
+ <div class="fixed_label_2" id="fixed_label_2">
124
+
125
+ <a class="fixed_label_2_1" id="fixed_label_2_1">
126
+
127
+ <div class="one">one</div>
128
+
129
+ </a>
130
+
131
+ <a class="fixed_label_2_2" id="fixed_label_2_2">
132
+
133
+ <div class="two">two</div>
134
+
135
+ </a>
136
+
137
+ <a class="fixed_label_2_3" id="fixed_label_2_3">
138
+
139
+ <div class="three">three</div>
140
+
141
+ </a>
142
+
143
+ </div>
144
+
145
+
146
+
147
+ <ul class="list">
148
+
149
+ <?php for($i=0; $i<50; $i++){ ?>
150
+
151
+ <li>two</li>
152
+
153
+ <?php } ?>
154
+
155
+ </ul>
156
+
157
+
158
+
159
+ </div>
160
+
161
+
162
+
163
+ <div class="contents_3" id="contents_3">
164
+
165
+
166
+
167
+ <div class="fixed_label_3" id="fixed_label_3">
168
+
169
+ <a class="fixed_label_3_1" id="fixed_label_3_1">
170
+
171
+ <div class="one">one</div>
172
+
173
+ </a>
174
+
175
+ <a class="fixed_label_3_2" id="fixed_label_3_2">
176
+
177
+ <div class="two">two</div>
178
+
179
+ </a>
180
+
181
+ <a class="fixed_label_3_3" id="fixed_label_3_3">
182
+
183
+ <div class="three">three</div>
184
+
185
+ </a>
186
+
187
+ </div>
188
+
189
+
190
+
191
+ <ul class="list">
192
+
193
+ <?php for($i=0; $i<50; $i++){ ?>
194
+
195
+ <li>three</li>
196
+
197
+ <?php } ?>
198
+
199
+ </ul>
200
+
201
+
202
+
203
+ </div>
204
+
205
+
206
+
207
+
208
+
209
+
210
+
211
+
212
+
213
+
214
+
215
+ </body>
216
+
217
+
218
+
219
+ <script>
220
+
221
+ /*contents_1*/
222
+
223
+
224
+
225
+ $(function() {
226
+
227
+ $("#fixed_label_1_2").click(function() {
228
+
229
+ $("#contents_2").toggle(1);
230
+
231
+ });
232
+
233
+ });
234
+
235
+
236
+
237
+ $(function() {
238
+
239
+ $("#fixed_label_1_2").click(function() {
240
+
241
+ $("#contents_1").toggle(1);
242
+
243
+ });
244
+
245
+ });
246
+
247
+
248
+
249
+ $(function() {
250
+
251
+ $("#fixed_label_1_3").click(function() {
252
+
253
+ $("#contents_3").toggle(1);
254
+
255
+ });
256
+
257
+ });
258
+
259
+
260
+
261
+ $(function() {
262
+
263
+ $("#fixed_label_1_3").click(function() {
264
+
265
+ $("#contents_1").toggle(1);
266
+
267
+ });
268
+
269
+ });
270
+
271
+
272
+
273
+ /*contents_2*/
274
+
275
+
276
+
277
+ $(function() {
278
+
279
+ $("#fixed_label_2_1").click(function() {
280
+
281
+ $("#contents_1").toggle(1);
282
+
283
+ });
284
+
285
+ });
286
+
287
+
288
+
289
+ $(function() {
290
+
291
+ $("#fixed_label_2_1").click(function() {
292
+
293
+ $("#contents_2").toggle(1);
294
+
295
+ });
296
+
297
+ });
298
+
299
+
300
+
301
+ $(function() {
302
+
303
+ $("#fixed_label_2_3").click(function() {
304
+
305
+ $("#contents_3").toggle(1);
306
+
307
+ });
308
+
309
+ });
310
+
311
+
312
+
313
+ $(function() {
314
+
315
+ $("#fixed_label_2_3").click(function() {
316
+
317
+ $("#contents_2").toggle(1);
318
+
319
+ });
320
+
321
+ });
322
+
323
+
324
+
325
+ /*contents_3*/
326
+
327
+
328
+
329
+ $(function() {
330
+
331
+ $("#fixed_label_3_1").click(function() {
332
+
333
+ $("#contents_1").toggle(1);
334
+
335
+ });
336
+
337
+ });
338
+
339
+
340
+
341
+ $(function() {
342
+
343
+ $("#fixed_label_3_1").click(function() {
344
+
345
+ $("#contents_3").toggle(1);
346
+
347
+ });
348
+
349
+ });
350
+
351
+
352
+
353
+ $(function() {
354
+
355
+ $("#fixed_label_3_2").click(function() {
356
+
357
+ $("#contents_2").toggle(1);
358
+
359
+ });
360
+
361
+ });
362
+
363
+
364
+
365
+ $(function() {
366
+
367
+ $("#fixed_label_3_2").click(function() {
368
+
369
+ $("#contents_3").toggle(1);
370
+
371
+ });
372
+
373
+ });
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+ /*スクロールで固定*/
382
+
383
+ $(function(){
384
+
385
+ var fix = $("#fixed_label_1");
386
+
387
+ var fixTop = fix.offset().top;
388
+
389
+ $(window).scroll(function () {
390
+
391
+ if($(window).scrollTop() >= fixTop) {
392
+
393
+ fix.css("position","fixed");
394
+
395
+ fix.css("top","0");
396
+
397
+ } else {
398
+
399
+ fix.css("position","");
400
+
401
+ fix.css("top","");
402
+
403
+ }
404
+
405
+ });
406
+
407
+ });
408
+
409
+
410
+
411
+ $(function(){
412
+
413
+ var fix = $("#fixed_label_2");
414
+
415
+ var fixTop = fix.offset().top;
416
+
417
+ $(window).scroll(function () {
418
+
419
+ if($(window).scrollTop() >= fixTop) {
420
+
421
+ fix.css("position","fixed");
422
+
423
+ fix.css("top","0");
424
+
425
+ } else {
426
+
427
+ fix.css("position","");
428
+
429
+ fix.css("top","");
430
+
431
+ }
432
+
433
+ });
434
+
435
+ });
436
+
437
+
438
+
439
+ $(function(){
440
+
441
+ var fix = $("#fixed_label_3");
442
+
443
+ var fixTop = fix.offset().top;
444
+
445
+ $(window).scroll(function () {
446
+
447
+ if($(window).scrollTop() >= fixTop) {
448
+
449
+ fix.css("position","fixed");
450
+
451
+ fix.css("top","0");
452
+
453
+ } else {
454
+
455
+ fix.css("position","");
456
+
457
+ fix.css("top","");
458
+
459
+ }
460
+
461
+ });
462
+
463
+ });
464
+
465
+
466
+
467
+
468
+
469
+ </script>
470
+
471
+
472
+
473
+
474
+
475
+
476
+
477
+
478
+
479
+ </html>
480
+
481
+
482
+
483
+ ```
484
+
485
+ *{
486
+
487
+ margin: 0;
488
+
489
+ padding: 0;
490
+
491
+ }
492
+
493
+
494
+
495
+ a{
496
+
497
+ text-decoration: none;
498
+
499
+ }
500
+
501
+ .header{
502
+
503
+ width: 100vw;
504
+
505
+ height: 50vw;
506
+
507
+ background-color: darkblue;
508
+
509
+ border-radius: 5vw;
510
+
511
+ color: #ffffff;
512
+
513
+ font-size: 10vw;
514
+
515
+ line-height: 50vw;
516
+
517
+ text-align: center;
518
+
519
+ }
520
+
521
+
522
+
523
+ .contents_1{
524
+
525
+ .fixed_label_1{
526
+
527
+ background-color: #ffffff;
528
+
529
+ .one{
530
+
531
+ display: inline-block;
532
+
533
+ height: 20vw;
534
+
535
+ width: 32vw;
536
+
537
+ line-height: 20vw;
538
+
539
+ font-size: 5vw;
540
+
541
+ text-align: center;
542
+
543
+ border-bottom: solid 5px pink;
544
+
545
+ }
546
+
547
+ .two{
548
+
549
+ display: inline-block;
550
+
551
+ height: 20vw;
552
+
553
+ width: 32vw;
554
+
555
+ line-height: 20vw;
556
+
557
+ font-size: 5vw;
558
+
559
+ text-align: center;
560
+
561
+ border-bottom: solid 5px pink;
562
+
563
+ }
564
+
565
+ .three{
566
+
567
+ display: inline-block;
568
+
569
+ height: 20vw;
570
+
571
+ width: 32vw;
572
+
573
+ line-height: 20vw;
574
+
575
+ font-size: 5vw;
576
+
577
+ text-align: center;
578
+
579
+ border-bottom: solid 5px pink;
580
+
581
+ }
582
+
583
+ }
584
+
585
+ .list{
586
+
587
+ font-size: 7vw;
588
+
589
+ }
590
+
591
+ }
592
+
593
+
594
+
595
+ .contents_2{
596
+
597
+ display: none;
598
+
599
+ .fixed_label_2{
600
+
601
+ background-color: #ffffff;
602
+
603
+ .one{
604
+
605
+ display: inline-block;
606
+
607
+ height: 20vw;
608
+
609
+ width: 32vw;
610
+
611
+ line-height: 20vw;
612
+
613
+ font-size: 5vw;
614
+
615
+ text-align: center;
616
+
617
+ border-bottom: solid 5px pink;
618
+
619
+ }
620
+
621
+ .two{
622
+
623
+ display: inline-block;
624
+
625
+ height: 20vw;
626
+
627
+ width: 32vw;
628
+
629
+ line-height: 20vw;
630
+
631
+ font-size: 5vw;
632
+
633
+ text-align: center;
634
+
635
+ border-bottom: solid 5px pink;
636
+
637
+ }
638
+
639
+ .three{
640
+
641
+ display: inline-block;
642
+
643
+ height: 20vw;
644
+
645
+ width: 32vw;
646
+
647
+ line-height: 20vw;
648
+
649
+ font-size: 5vw;
650
+
651
+ text-align: center;
652
+
653
+ border-bottom: solid 5px pink;
654
+
655
+ }
656
+
657
+ }
658
+
659
+ .list{
660
+
661
+ font-size: 7vw;
662
+
663
+ }
664
+
665
+ }
666
+
667
+
668
+
669
+ .contents_3{
670
+
671
+ display: none;
672
+
673
+ .fixed_label_3{
674
+
675
+ background-color: #fff;
676
+
677
+ .one{
678
+
679
+ display: inline-block;
680
+
681
+ height: 20vw;
682
+
683
+ width: 32vw;
684
+
685
+ line-height: 20vw;
686
+
687
+ font-size: 5vw;
688
+
689
+ text-align: center;
690
+
691
+ border-bottom: solid 5px pink;
692
+
693
+ }
694
+
695
+ .two{
696
+
697
+ display: inline-block;
698
+
699
+ height: 20vw;
700
+
701
+ width: 32vw;
702
+
703
+ line-height: 20vw;
704
+
705
+ font-size: 5vw;
706
+
707
+ text-align: center;
708
+
709
+ border-bottom: solid 5px pink;
710
+
711
+ }
712
+
713
+ .three{
714
+
715
+ display: inline-block;
716
+
717
+ height: 20vw;
718
+
719
+ width: 32vw;
720
+
721
+ line-height: 20vw;
722
+
723
+ font-size: 5vw;
724
+
725
+ text-align: center;
726
+
727
+ border-bottom: solid 5px pink;
728
+
729
+ }
730
+
731
+ }
732
+
733
+ .list{
734
+
735
+ font-size: 7vw;
736
+
737
+ }
738
+
739
+ }
740
+
741
+
742
+
743
+ ```
40
744
 
41
745
 
42
746