質問編集履歴

1

CSSを追加しました

2018/10/12 02:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -9,3 +9,847 @@
9
9
  同じ条件で制作した他の記事ページにはエラーが出ず、エラーが出たページも実際は問題なく表示されている場合、どの部分を修正すればエラーが消えるのでしょうか。
10
10
 
11
11
  詳しい方、ご教授ください。
12
+
13
+
14
+
15
+ ---------------------追記---------------------
16
+
17
+ @media screen and ( max-width:960px) {
18
+
19
+ /* 画面サイズが960px以下はここを読み込む */
20
+
21
+
22
+
23
+ /*================== header ==================*/
24
+
25
+
26
+
27
+
28
+
29
+ header h1 img {
30
+
31
+ width: 180px;
32
+
33
+ height: auto;
34
+
35
+ }
36
+
37
+
38
+
39
+ header .sns {
40
+
41
+ padding:0.8rem 0.5rem;
42
+
43
+ }
44
+
45
+
46
+
47
+ header .sns li {
48
+
49
+ width: 35px;
50
+
51
+ padding: 0.3rem 0 0 0.5rem;
52
+
53
+ list-style: none;
54
+
55
+
56
+
57
+ }
58
+
59
+
60
+
61
+ header {
62
+
63
+ padding: 1.3rem 1rem ;
64
+
65
+ }
66
+
67
+
68
+
69
+ #pc_nav {
70
+
71
+ display: none
72
+
73
+ }
74
+
75
+
76
+
77
+ /*================== nav ==================*/
78
+
79
+
80
+
81
+ header nav {
82
+
83
+ padding:1.5em;
84
+
85
+ position: absolute;
86
+
87
+ top:0;
88
+
89
+ left:0;
90
+
91
+ display: flex;
92
+
93
+ }
94
+
95
+
96
+
97
+ #nav-drawer {
98
+
99
+ position: relative;
100
+
101
+ }
102
+
103
+
104
+
105
+ /*チェックボックス等は非表示に*/
106
+
107
+ .nav-unshown {
108
+
109
+ display:none;
110
+
111
+ }
112
+
113
+
114
+
115
+ /*アイコンのスペース*/
116
+
117
+ #nav-open {
118
+
119
+ display: inline-block;
120
+
121
+ width: 30px;
122
+
123
+ height: 22px;
124
+
125
+ vertical-align: middle;
126
+
127
+ }
128
+
129
+
130
+
131
+ /*ハンバーガーアイコン*/
132
+
133
+ #nav-open span, #nav-open span:before, #nav-open span:after {
134
+
135
+ position: absolute;
136
+
137
+ height: 3px;/*線の太さ*/
138
+
139
+ width: 25px;/*長さ*/
140
+
141
+ border-radius: 3px;
142
+
143
+ background: #000;
144
+
145
+ display: block;
146
+
147
+ content: '';
148
+
149
+ cursor: pointer;
150
+
151
+ }
152
+
153
+
154
+
155
+ #nav-open span:before {
156
+
157
+ bottom: -8px;
158
+
159
+ }
160
+
161
+
162
+
163
+ #nav-open span:after {
164
+
165
+ bottom: -16px;
166
+
167
+ }
168
+
169
+
170
+
171
+ /*閉じる用の薄黒カバー*/
172
+
173
+
174
+
175
+ #nav-close {
176
+
177
+ display: none;/*はじめは隠しておく*/
178
+
179
+ position: fixed;
180
+
181
+ z-index: 99;
182
+
183
+ top: 0;/*全体に広がるように*/
184
+
185
+ left: 0;
186
+
187
+ width: 100%;
188
+
189
+ height: 100%;
190
+
191
+ background: black;
192
+
193
+ opacity: 0;
194
+
195
+ transition: .3s ease-in-out;
196
+
197
+ }
198
+
199
+
200
+
201
+ /*中身*/
202
+
203
+ #nav-content {
204
+
205
+ overflow: auto;
206
+
207
+ position: fixed;
208
+
209
+ top: 0;
210
+
211
+ left: 0;
212
+
213
+ z-index: 9999;/*最前面に*/
214
+
215
+ width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
216
+
217
+ max-width: 330px;/*最大幅(調整してください)*/
218
+
219
+ height: 100%;
220
+
221
+ background: #fff;/*背景色*/
222
+
223
+ transition: .3s ease-in-out;/*滑らかに表示*/
224
+
225
+ -webkit-transform: translateX(-105%);
226
+
227
+ transform: translateX(-105%);/*左に隠しておく*/
228
+
229
+ }
230
+
231
+
232
+
233
+ /*チェックが入ったらもろもろ表示*/
234
+
235
+ #nav-input:checked ~ #nav-close {
236
+
237
+ display: block;/*カバーを表示*/
238
+
239
+ opacity: .5;
240
+
241
+ }
242
+
243
+
244
+
245
+ #nav-input:checked ~ #nav-content {
246
+
247
+ -webkit-transform: translateX(0%);
248
+
249
+ transform: translateX(0%);/*中身を表示(右へスライド)*/
250
+
251
+ box-shadow: 6px 0 25px rgba(0,0,0,.15);
252
+
253
+ }
254
+
255
+
256
+
257
+ header nav .menu {
258
+
259
+ font-weight: bold;
260
+
261
+ font-size: 2em;
262
+
263
+ padding: 1.1em;
264
+
265
+ }
266
+
267
+
268
+
269
+ header nav li {
270
+
271
+ padding: 1em;
272
+
273
+ font-size: 1.3rem;
274
+
275
+ }
276
+
277
+
278
+
279
+ header nav a {
280
+
281
+ text-decoration: none;
282
+
283
+ color:#000;
284
+
285
+ font-weight: bold;
286
+
287
+ }
288
+
289
+
290
+
291
+ header nav .sub {
292
+
293
+ display: flex;
294
+
295
+ justify-content: space-between;
296
+
297
+ padding: 2rem;
298
+
299
+ }
300
+
301
+
302
+
303
+ header nav .sub li {
304
+
305
+ font-size: 0.8rem;
306
+
307
+ }
308
+
309
+
310
+
311
+ /*ラベル*/
312
+
313
+ .accbox label {
314
+
315
+ display: block;
316
+
317
+ cursor :pointer;
318
+
319
+ transition: all 0.5s;
320
+
321
+ }
322
+
323
+
324
+
325
+
326
+
327
+ /*チェックは隠す*/
328
+
329
+ .accbox input {
330
+
331
+ display: none;
332
+
333
+ }
334
+
335
+
336
+
337
+ /*中身を非表示にしておく*/
338
+
339
+ .accbox .accshow {
340
+
341
+ height: 0;
342
+
343
+ padding: 0;
344
+
345
+ overflow: hidden;
346
+
347
+ opacity: 0;
348
+
349
+ transition: 0.8s;
350
+
351
+ }
352
+
353
+
354
+
355
+ .accbox .accshow p {
356
+
357
+ padding:0.4rem;
358
+
359
+ }
360
+
361
+
362
+
363
+ .accbox .accshow a {
364
+
365
+ font-size:0.9rem;
366
+
367
+ font-weight:normal;
368
+
369
+ font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
370
+
371
+ }
372
+
373
+
374
+
375
+ /*クリックで中身表示*/
376
+
377
+ .cssacc:checked + .accshow {
378
+
379
+ height: auto;
380
+
381
+ padding: 5px;
382
+
383
+ opacity: 1;
384
+
385
+ }
386
+
387
+
388
+
389
+
390
+
391
+
392
+
393
+ /*================== wrapper ==================*/
394
+
395
+
396
+
397
+
398
+
399
+ /*================== banner ==================*/
400
+
401
+
402
+
403
+
404
+
405
+ .banner img {
406
+
407
+ width: 100%;
408
+
409
+ }
410
+
411
+
412
+
413
+ /*================== footer ==================*/
414
+
415
+
416
+
417
+ footer .sitemap li {
418
+
419
+ display: none;
420
+
421
+ }
422
+
423
+
424
+
425
+ footer .sitemap {
426
+
427
+ display: flex;
428
+
429
+ flex-wrap: wrap;
430
+
431
+ padding-top: 1rem;
432
+
433
+ }
434
+
435
+
436
+
437
+ footer .sitemap_menu {
438
+
439
+ width: 50%;
440
+
441
+ text-align: center;
442
+
443
+ padding: 0.8rem 0;
444
+
445
+ }
446
+
447
+
448
+
449
+ footer .sitemap_menu a {
450
+
451
+ color:#777676;
452
+
453
+ text-decoration:none;
454
+
455
+ }
456
+
457
+
458
+
459
+ footer .map {
460
+
461
+ width: 100%;
462
+
463
+ padding: 1rem 2rem ;
464
+
465
+ }
466
+
467
+
468
+
469
+ footer .map p {
470
+
471
+ display: none;
472
+
473
+ }
474
+
475
+
476
+
477
+ footer iframe {
478
+
479
+ height: 250px;
480
+
481
+ }
482
+
483
+
484
+
485
+ footer .sitemap2 li {
486
+
487
+ list-style: none;
488
+
489
+ font-size: 0.7rem;
490
+
491
+ }
492
+
493
+
494
+
495
+ footer .sitemap2 li a {
496
+
497
+ text-decoration: none;
498
+
499
+ }
500
+
501
+
502
+
503
+ footer .sitemap2_wrap {
504
+
505
+ padding: 3rem 2rem;
506
+
507
+ }
508
+
509
+
510
+
511
+ footer .shop_deta {
512
+
513
+ text-align: center;
514
+
515
+ padding-bottom: 2rem;
516
+
517
+ }
518
+
519
+
520
+
521
+ footer .shop_deta li {
522
+
523
+ padding-bottom: 0.5rem;
524
+
525
+ }
526
+
527
+
528
+
529
+ footer .shop_deta img {
530
+
531
+ margin-bottom: 1rem;
532
+
533
+ }
534
+
535
+
536
+
537
+ footer .copy {
538
+
539
+ text-align: center;
540
+
541
+ }
542
+
543
+
544
+
545
+ footer .copy ul {
546
+
547
+ text-align: center;
548
+
549
+ }
550
+
551
+
552
+
553
+ footer .copy li {
554
+
555
+ display: inline-block;
556
+
557
+ }
558
+
559
+
560
+
561
+ .single .navigation {
562
+
563
+ margin-top: 4rem;
564
+
565
+ line-height: 1.6rem;
566
+
567
+ }
568
+
569
+
570
+
571
+ .description .post img {
572
+
573
+ width: 100%;
574
+
575
+ height: auto;
576
+
577
+ }
578
+
579
+
580
+
581
+
582
+
583
+ .single .entry-content img {
584
+
585
+ width: 100%;
586
+
587
+ height: auto;
588
+
589
+ }
590
+
591
+
592
+
593
+ .single h1.entry-title {
594
+
595
+ text-align: center;
596
+
597
+ padding:3rem 0 0.5rem 0;
598
+
599
+ font-size: 5vmin;
600
+
601
+ line-height:1.6rem;
602
+
603
+ }
604
+
605
+
606
+
607
+ .single .entry-meta {
608
+
609
+ text-align: center;
610
+
611
+ }
612
+
613
+
614
+
615
+ .home .entry-content {
616
+
617
+ display:none;
618
+
619
+ }
620
+
621
+
622
+
623
+ .sp_main img {
624
+
625
+ height:100vh;
626
+
627
+ }
628
+
629
+
630
+
631
+ #main_img {
632
+
633
+ display: none;
634
+
635
+ }
636
+
637
+
638
+
639
+ .news_area {
640
+
641
+ padding: 2rem 0 3rem 0;
642
+
643
+ }
644
+
645
+
646
+
647
+ .news_wrap {
648
+
649
+ margin: 0 auto;
650
+
651
+ padding: 0 2rem;
652
+
653
+ }
654
+
655
+
656
+
657
+ .test {
658
+
659
+ display: flex;
660
+
661
+ flex-direction: column;
662
+
663
+ flex-wrap: wrap;
664
+
665
+ height: 100px;
666
+
667
+ }
668
+
669
+
670
+
671
+ .easy {
672
+
673
+ font-size: 6vw;
674
+
675
+ white-space: nowrap;
676
+
677
+ }
678
+
679
+
680
+
681
+ .easy_text {
682
+
683
+ font-size: 0.8rem;
684
+
685
+ line-height: 1.6rem;
686
+
687
+ width: 75%;
688
+
689
+ margin: 0 auto;
690
+
691
+ }
692
+
693
+
694
+
695
+ .order {
696
+
697
+ padding: 2rem 1rem;
698
+
699
+ }
700
+
701
+
702
+
703
+ .order img {
704
+
705
+ width: 80%;
706
+
707
+ }
708
+
709
+
710
+
711
+ .order .easy {
712
+
713
+ display: none;
714
+
715
+ }
716
+
717
+
718
+
719
+
720
+
721
+ .inner {
722
+
723
+ width: 200px;
724
+
725
+ }
726
+
727
+
728
+
729
+ .tel_pc {
730
+
731
+ display: none;
732
+
733
+ }
734
+
735
+
736
+
737
+ .contact_area .tel a {
738
+
739
+ text-decoration: none;
740
+
741
+ color: #000;
742
+
743
+ }
744
+
745
+
746
+
747
+ .news_area .date {
748
+
749
+ padding-right:0.5rem;
750
+
751
+ }
752
+
753
+
754
+
755
+ .metaslider .flexslider {
756
+
757
+ margin-bottom: 0 !important;
758
+
759
+ }
760
+
761
+
762
+
763
+ .title {
764
+
765
+ line-height:1.5rem;
766
+
767
+ }
768
+
769
+
770
+
771
+ .toriatukai {
772
+
773
+ display: none!important;
774
+
775
+ }
776
+
777
+
778
+
779
+ .sp_toriatukai {
780
+
781
+ padding:0 2rem 3rem 2rem;
782
+
783
+ }
784
+
785
+
786
+
787
+ .sp_toriatukai img {
788
+
789
+ width: 100%;
790
+
791
+ }
792
+
793
+
794
+
795
+ .toriatukai_img {
796
+
797
+ background-color:#e2e3e3;
798
+
799
+ }
800
+
801
+
802
+
803
+ .toriatukai_text {
804
+
805
+ background-color:#e2e3e3;
806
+
807
+ padding:2rem;
808
+
809
+ color:#908f8f;
810
+
811
+ font-size:0.8rem;
812
+
813
+ text-align:center;
814
+
815
+ line-height:1.3rem;
816
+
817
+ }
818
+
819
+
820
+
821
+ .toriatukai_text .more {
822
+
823
+ margin-top:1rem;
824
+
825
+ display:block;
826
+
827
+ background-color:#908f8f;
828
+
829
+ padding: 0.7rem 1.5rem;
830
+
831
+ color: #FFF;
832
+
833
+
834
+
835
+ }
836
+
837
+
838
+
839
+ .toriatukai_text img {
840
+
841
+ margin-bottom:0.8rem;
842
+
843
+ }
844
+
845
+
846
+
847
+ .toriatukai .inner .more a {
848
+
849
+ text-decoration:none;
850
+
851
+ color:#FFF;
852
+
853
+ }
854
+
855
+ }