質問編集履歴

2

ブラウザを変更した場合について追記しました

2020/03/04 04:12

投稿

Murasaki_PurPle
Murasaki_PurPle

スコア37

test CHANGED
File without changes
test CHANGED
@@ -943,3 +943,19 @@
943
943
  |.................................|.................................
944
944
 
945
945
  contents.html MainTest.css
946
+
947
+
948
+
949
+ ### 解決の糸口??
950
+
951
+ なぜか、ブラウザをSafariからGoogle Chromeに変更したら
952
+
953
+ ```
954
+
955
+ <link rel="stylesheet" href="../css/MainTest.css">
956
+
957
+ ```
958
+
959
+ でうまくいきました。
960
+
961
+ 理由は全くわかりません。

1

修正依頼がございました。cssとファイルの階層図を載せました。

2020/03/04 04:12

投稿

Murasaki_PurPle
Murasaki_PurPle

スコア37

test CHANGED
File without changes
test CHANGED
@@ -155,3 +155,791 @@
155
155
 
156
156
 
157
157
  お忙しい中恐縮ですが、回答をお願いいたします。
158
+
159
+
160
+
161
+ ### 追記
162
+
163
+ 追記いたしました。
164
+
165
+ ```css
166
+
167
+ body {
168
+
169
+ margin: 0;
170
+
171
+ font-family: "Hiragino Kaku Gothic ProN";
172
+
173
+ }
174
+
175
+
176
+
177
+ a {
178
+
179
+ text-decoration: none;
180
+
181
+ }
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+ /*共通するツール*/
192
+
193
+ .btn {
194
+
195
+ padding: 10px 50px;
196
+
197
+ color: white;
198
+
199
+ display: inline-block;
200
+
201
+ opacity: 0.8;
202
+
203
+ border-radius: 4px;
204
+
205
+ font-size: 25px;
206
+
207
+ }
208
+
209
+
210
+
211
+ .btn:hover {
212
+
213
+ opacity: 1;
214
+
215
+ }
216
+
217
+
218
+
219
+ .facebook {
220
+
221
+ background-color: #3b5998;
222
+
223
+ margin:10px 10px 0px 0px;
224
+
225
+ }
226
+
227
+
228
+
229
+ .twitter {
230
+
231
+ background-color: #55acee;
232
+
233
+ }
234
+
235
+
236
+
237
+ /*アイコンを入れたいとき*/
238
+
239
+ .fa {
240
+
241
+ margin-right: 5px;
242
+
243
+ }
244
+
245
+
246
+
247
+ /*ページ上部の画像*/
248
+
249
+ .top-contents{
250
+
251
+ padding: 180px 0 100px 0;
252
+
253
+ background-image: url(fractal.jpg);
254
+
255
+ background-size: cover;
256
+
257
+ }
258
+
259
+ .top-about{
260
+
261
+ padding: 180px 0 100px 0;
262
+
263
+ background-image: url(yokohama.jpg);
264
+
265
+ background-size: cover;
266
+
267
+ }
268
+
269
+ .top-contact{
270
+
271
+ padding: 180px 0 100px 0;
272
+
273
+ background-image: url(wabisabi.jpg);
274
+
275
+ background-size: cover;
276
+
277
+ }
278
+
279
+ .top-menu{
280
+
281
+ padding: 200px 0 200px 0;
282
+
283
+ background-image: url(phone.jpg);
284
+
285
+ background-size: cover;
286
+
287
+ }
288
+
289
+
290
+
291
+
292
+
293
+
294
+
295
+
296
+
297
+
298
+
299
+ /*最初のページ*/
300
+
301
+ .BodyFirst{
302
+
303
+ background-color: rgba(34, 49, 52, 0.9);
304
+
305
+ }
306
+
307
+
308
+
309
+ /*最初のページのボタン*/
310
+
311
+ .welcome {
312
+
313
+ background-color: #239b76;
314
+
315
+ }
316
+
317
+
318
+
319
+ .firstImage {
320
+
321
+ padding: 180px 0 100px 0;
322
+
323
+ background-image: url(welcome.jpg);
324
+
325
+ background-size: cover;
326
+
327
+ color: white;
328
+
329
+ text-align: center;
330
+
331
+ }
332
+
333
+
334
+
335
+ .btn-first {
336
+
337
+ margin: 50px 20px;
338
+
339
+ }
340
+
341
+
342
+
343
+ .firstImage h1 {
344
+
345
+ opacity: 0.8;
346
+
347
+ font-size: 75px;
348
+
349
+ font-weight: bold;
350
+
351
+ }
352
+
353
+
354
+
355
+ .firstImage p {
356
+
357
+ opacity: 0.8;
358
+
359
+ font-weight: bold;
360
+
361
+ }
362
+
363
+
364
+
365
+ .footer {
366
+
367
+ height:100px;
368
+
369
+ }
370
+
371
+
372
+
373
+ /*メニュ〜〜*/
374
+
375
+ .MenuPicture{
376
+
377
+ height:3000px;
378
+
379
+ background-color: yellow;
380
+
381
+ }
382
+
383
+ .PicturePair{
384
+
385
+ width:98%;
386
+
387
+ height:30000px
388
+
389
+ padding:10px 0 10px 0;
390
+
391
+ background-color: blue;
392
+
393
+ margin: 0 auto;
394
+
395
+ }
396
+
397
+ .OnePicture{
398
+
399
+ width:49%;
400
+
401
+ height:600px;
402
+
403
+ background-color: blue;
404
+
405
+ margin-top:10px;
406
+
407
+ margin-left: 7px;
408
+
409
+ float:left;
410
+
411
+
412
+
413
+ }
414
+
415
+ .OnePicture img{
416
+
417
+ width:98%;
418
+
419
+ margin-top:10px auto 10px auto;
420
+
421
+ }
422
+
423
+ .PictureDiscription{
424
+
425
+ width:90%;
426
+
427
+ margin-left: auto;
428
+
429
+ margin-right: auto;
430
+
431
+ background-color: red;
432
+
433
+ }
434
+
435
+ .btn-center{
436
+
437
+ text-align: center;
438
+
439
+ }
440
+
441
+
442
+
443
+
444
+
445
+
446
+
447
+ /*コンタクト*/
448
+
449
+ .contactForm{
450
+
451
+ border-top: solid 1px #eee;
452
+
453
+ border-bottom: solid 1px #eee;
454
+
455
+ width:98%;
456
+
457
+ margin: 10px auto;
458
+
459
+ }
460
+
461
+ .contact{
462
+
463
+ width:500px;
464
+
465
+ margin: 10px auto;
466
+
467
+ }
468
+
469
+ .contact input{
470
+
471
+ width:500px;
472
+
473
+ }
474
+
475
+ .contact textarea{
476
+
477
+ width:500px;
478
+
479
+
480
+
481
+ }
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+ /*コンテンツ*/
492
+
493
+ .BodyContents{
494
+
495
+ background-color: Green;
496
+
497
+ }
498
+
499
+
500
+
501
+
502
+
503
+ header {
504
+
505
+ height: 65px;
506
+
507
+ width: 100%;
508
+
509
+ background-color: rgba(34, 49, 52, 0.9);
510
+
511
+ position:fixed;
512
+
513
+ top:0;
514
+
515
+ z-index:10;
516
+
517
+ }
518
+
519
+
520
+
521
+ /*header関連*/
522
+
523
+
524
+
525
+ .headerContainer {
526
+
527
+ width: 1200px;
528
+
529
+ padding: 0 15px;
530
+
531
+ margin: 0 auto;
532
+
533
+ }
534
+
535
+ .header-left {
536
+
537
+ float: left;
538
+
539
+ }
540
+
541
+ .header-left h1{
542
+
543
+ margin-top:0px;
544
+
545
+ font-size: 40px;
546
+
547
+ color:white;
548
+
549
+ }
550
+
551
+
552
+
553
+ .header-right {
554
+
555
+ float: right;
556
+
557
+ }
558
+
559
+
560
+
561
+ .header-right a {
562
+
563
+ line-height: 65px;
564
+
565
+ padding: 0 25px;
566
+
567
+ color: white;
568
+
569
+ display: block;
570
+
571
+ font-size:20px;
572
+
573
+ }
574
+
575
+ .menu{
576
+
577
+ float:left;
578
+
579
+ transition: all 1s;
580
+
581
+ }
582
+
583
+ .menu :hover{
584
+
585
+ background-color: rgba(255, 255, 255, 0.5);
586
+
587
+ }
588
+
589
+
590
+
591
+ /*上部の画像付きリンク*/
592
+
593
+ .Rink{
594
+
595
+ height:210px;
596
+
597
+ padding:10px 0 10px 0;
598
+
599
+ background-color: yellow;
600
+
601
+ }
602
+
603
+
604
+
605
+ .RinkMenu img{
606
+
607
+ width:24%;
608
+
609
+ float:left;
610
+
611
+ margin-right:5px;
612
+
613
+ margin-left: 5px;
614
+
615
+ }
616
+
617
+
618
+
619
+
620
+
621
+ /*コンテンツのメイン*/
622
+
623
+ .container {
624
+
625
+ width: 1200px;
626
+
627
+ padding: 10px 15px;
628
+
629
+ margin: 0 auto;
630
+
631
+ }
632
+
633
+
634
+
635
+ .mainBody{
636
+
637
+ width:69%;
638
+
639
+ float:left;
640
+
641
+ background-color: Red;
642
+
643
+
644
+
645
+ }
646
+
647
+
648
+
649
+ .mainBodyTitle{
650
+
651
+ width:95%;
652
+
653
+ background-color: blue;
654
+
655
+ margin: 20px auto 10px auto;
656
+
657
+ }
658
+
659
+ .mainBodyTitle p{
660
+
661
+ padding-left:30px;
662
+
663
+ }
664
+
665
+ .TitleName h1{
666
+
667
+ margin-top:0;
668
+
669
+ margin-bottom:0;
670
+
671
+ padding-left: 30px;
672
+
673
+ font-size: 50px;
674
+
675
+ background-color: green;
676
+
677
+ }
678
+
679
+ .menuTitleName h1{
680
+
681
+ margin-top:0;
682
+
683
+ margin-bottom:0;
684
+
685
+ padding-left: 30px;
686
+
687
+ font-size: 48px;
688
+
689
+ background-color: green;
690
+
691
+ }
692
+
693
+
694
+
695
+ .mainBodyContents{
696
+
697
+ width:95%;
698
+
699
+ background-color: Yellow;
700
+
701
+ margin:20px auto;
702
+
703
+ padding-top:10px;
704
+
705
+ padding-bottom:10px;
706
+
707
+ }
708
+
709
+ .mainBodyContents h1{
710
+
711
+ border-left: solid 8px #4682b4;
712
+
713
+ border-bottom: solid 1px #eee;
714
+
715
+ padding:5px 10px;
716
+
717
+ }
718
+
719
+ .mainBodyContents h2{
720
+
721
+ background: linear-gradient(transparent 70%, #a7d6ff 70%);
722
+
723
+ }
724
+
725
+
726
+
727
+ .mainBodyContents ul {
728
+
729
+ border: solid 2px skyblue;
730
+
731
+ border-radius: 5px;
732
+
733
+ padding: 0.5em 1em 0.5em 2.3em;
734
+
735
+ position: relative;
736
+
737
+ width:400px;
738
+
739
+ margin:10px auto;
740
+
741
+ }
742
+
743
+
744
+
745
+ .mainBodyContents ul li {
746
+
747
+ line-height: 1.5;
748
+
749
+ padding: 0.5em 0;
750
+
751
+ list-style-type: none!important;
752
+
753
+ }
754
+
755
+
756
+
757
+ .mainBodyContents ul li:before {
758
+
759
+ font-family: "Font Awesome 5 Free";
760
+
761
+ content: "\f138";/*アイコンの種類*/
762
+
763
+ position: absolute;
764
+
765
+ left : 1em;/*左端からのアイコンまでの距離*/
766
+
767
+ color: skyblue;/*アイコン色*/
768
+
769
+ }
770
+
771
+ .img{
772
+
773
+ text-align: center;
774
+
775
+ }
776
+
777
+ .img img{
778
+
779
+ width:95%;
780
+
781
+ }
782
+
783
+ .Tweet{
784
+
785
+ margin: 0 auto;
786
+
787
+ }
788
+
789
+ .YouTube{
790
+
791
+ text-align: center;
792
+
793
+ }
794
+
795
+
796
+
797
+
798
+
799
+
800
+
801
+ /*コンテンツの右側面*/
802
+
803
+ .subBody{
804
+
805
+ width:30%;
806
+
807
+ float:right;
808
+
809
+ background-color: Blue;
810
+
811
+ padding-bottom: 20px;
812
+
813
+ }
814
+
815
+ .subBodyContents{
816
+
817
+ width:95%;
818
+
819
+ background-color: White;
820
+
821
+ margin:20px auto;
822
+
823
+ }
824
+
825
+
826
+
827
+ .subBodyContents h1 {
828
+
829
+ border-bottom: double 5px #4682b4;
830
+
831
+ font-size: 25px;
832
+
833
+ }
834
+
835
+
836
+
837
+ .subBodyContents p{
838
+
839
+ border-bottom: 1px solid #eee;
840
+
841
+ text-align: center;
842
+
843
+ }
844
+
845
+
846
+
847
+ .TwitterSection{
848
+
849
+ margin-top: 10px;
850
+
851
+ }
852
+
853
+ .TwitterMethod{
854
+
855
+ text-align: center;
856
+
857
+ }
858
+
859
+
860
+
861
+
862
+
863
+
864
+
865
+
866
+
867
+
868
+
869
+
870
+
871
+
872
+
873
+
874
+
875
+
876
+
877
+ footer{
878
+
879
+ border-top: solid 1px #eee;
880
+
881
+ clear:both;
882
+
883
+ background-color: blue;
884
+
885
+ }
886
+
887
+
888
+
889
+ footer p {
890
+
891
+ font-size: 12px;
892
+
893
+ text-align: center;
894
+
895
+ }
896
+
897
+ footer a{
898
+
899
+ padding-bottom: 10px;
900
+
901
+ margin-left: 10px
902
+
903
+ }
904
+
905
+ .footerSeparate{
906
+
907
+ height:500px;
908
+
909
+ padding:10px 0 10px 0;
910
+
911
+ background-color: green;
912
+
913
+
914
+
915
+ }
916
+
917
+
918
+
919
+ .footerContents{
920
+
921
+ width:33%;
922
+
923
+ height:500px;
924
+
925
+ float:left;
926
+
927
+ border-right: 2px solid #eee;
928
+
929
+ }
930
+
931
+
932
+
933
+ ```
934
+
935
+ 階層図は以下の通りです
936
+
937
+ test(フォルダ)
938
+
939
+ |
940
+
941
+ html(フォルダ) css(フォルダ) picture(フォルダ)
942
+
943
+ |.................................|.................................
944
+
945
+ contents.html MainTest.css