質問編集履歴

3

大体の構造を引っ張ってきました、別件でつまっていることのメモが書いてありますがそこは無視してください...

2020/01/22 08:35

投稿

Azami
Azami

スコア6

test CHANGED
File without changes
test CHANGED
@@ -696,46 +696,24 @@
696
696
 
697
697
  }
698
698
 
699
- .is-bg-beige{
699
+ .footer-center{
700
-
701
- background-color: #DFC392;
700
+
702
-
703
- color: #08415c;
704
-
705
- padding-bottom: 50%;
701
+ margin-top: 2rem;
706
702
 
707
703
  }
708
704
 
709
-
710
-
711
- .is-bg-navy{
705
+ .footer-right{
712
-
713
- background-color: #08415c;
706
+
714
-
715
- color: #DFC392;
716
-
717
- padding-bottom: 50%;
707
+ margin-top: 2rem;
718
708
 
719
709
  }
720
710
 
721
- .footer-center{
711
+ .copyright{
722
-
712
+
723
- margin-top: 2rem;
713
+ margin-top: 2rem;
724
714
 
725
715
  }
726
716
 
727
- .footer-right{
728
-
729
- margin-top: 2rem;
730
-
731
- }
732
-
733
- .copyright{
734
-
735
- margin-top: 2rem;
736
-
737
- }
738
-
739
717
  }
740
718
 
741
719
 

2

大体の全体構造を引っ張ってきました、よろしくお願いします

2020/01/22 08:35

投稿

Azami
Azami

スコア6

test CHANGED
File without changes
test CHANGED
@@ -4,65 +4,737 @@
4
4
 
5
5
  ```html
6
6
 
7
+ <!DOCTYPE html>
8
+
9
+ <html lang="ja">
10
+
11
+
12
+
13
+ <head>
14
+
15
+ <meta charset="UTF-8">
16
+
17
+ <!-- Bootstrap -->
18
+
19
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
20
+
21
+ integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
22
+
23
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
24
+
25
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
26
+
27
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
28
+
29
+
30
+
31
+ <!-- FontAwesome -->
32
+
33
+ <script src="https://kit.fontawesome.com/782b0a94e2.js" crossorigin="anonymous"></script>
34
+
35
+
36
+
37
+ <!-- Google Font -->
38
+
39
+ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400&display=swap&subset=japanese"
40
+
41
+ rel="stylesheet">
42
+
43
+ <!-- css -->
44
+
45
+ <link rel="stylesheet" href="style.css">
46
+
47
+ </head>
48
+
49
+
50
+
51
+ <body>
52
+
53
+ <!-- navigation -->
54
+
55
+ <div class="container-fruid sticky-top">
56
+
57
+ <nav class="navbar navbar-expand-md">
58
+
59
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
60
+
61
+ <i class="fas fa-bars"></i>
62
+
63
+ </button>
64
+
65
+ <a href="navbar-brand" hred="#"><img src="img/logo_demo_w.png" alt=""></a>
66
+
67
+ <div class="collapse navbar-collapse" id="navbarResponsive">
68
+
69
+ <ul class="navbar-nav ml-auto">
70
+
71
+ <li class="nav-item active"><a href="#" class="nav-link">コンテンツ</a></li>
72
+
73
+ <li class="nav-item"><a href="#" class="nav-link">コンテンツ</a></li>
74
+
75
+ <li class="nav-item"><a href="#" class="nav-link">コンテンツ</a></li>
76
+
77
+ </ul>
78
+
79
+ </div>
80
+
81
+ </nav>
82
+
83
+ </div>
84
+
85
+
86
+
87
+ <!-- hero -->
88
+
7
- <section class="footer padding">
89
+ <section id="showcase">
90
+
8
-
91
+ <div id="myCarousel" class="carousel slide" data-ride="carousel">
92
+
93
+ <ol class="carousel-indicators">
94
+
95
+ <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
96
+
97
+ <li data-target="#myCarousel" data-slide-to="1"></li>
98
+
99
+ <li data-target="#myCarousel" data-slide-to="2"></li>
100
+
101
+
102
+
103
+ </ol>
104
+
105
+ <div class="carousel-inner">
106
+
107
+ <!-- <div class="carousel-item carousel-image-1 active">
108
+
9
- <div class="container-fluid">
109
+ <div class="container">
110
+
10
-
111
+ </div>
112
+
113
+ </div> -->
114
+
115
+
116
+
11
- <div class="row">
117
+ <div class="carousel-item carousel-image-2 active">
12
-
118
+
13
- <div class="col-md-6">
119
+ <div class="container">
14
-
15
- <p><a class=text-decoration-none href="#">トップ</a></p>
120
+
16
-
17
- <p><a href="#">コンテンツ</a></p>
121
+ </div>
18
-
19
- <p><a href="#">コンテンツ</a></p>
20
-
21
- <p><a href="#">コンテンツ</a></p>
22
-
23
- <p><a href="#">コンテンツ</a></p>
24
122
 
25
123
  </div>
26
124
 
125
+
126
+
127
+ <div class="carousel-item carousel-image-3">
128
+
27
- <div class="col-md-6">
129
+ <div class="container">
28
-
130
+
29
- <p><a href="#">コンテンツ</a></p>
131
+ </div>
30
-
31
- <p><a href="#">コンテンツ</a></p>
32
-
33
- <p><a href="#">コンテンツ</a></p>
34
-
35
- <p><a href="#">コンテンツ</a></p>
36
132
 
37
133
  </div>
38
134
 
135
+ <div class="carousel-item carousel-image-4">
136
+
137
+ <div class="container">
138
+
139
+ </div>
140
+
141
+ </div>
142
+
143
+ </div>
144
+
145
+ <div class="caption">
146
+
147
+ <h1 class="display-3">コンテンツ</h1>
148
+
149
+ <a href="#" class="btn btn-lg">コンテンツ</a>
150
+
151
+ </div>
152
+
39
153
  </div>
40
154
 
41
- </section>
155
+ </section>
156
+
157
+ <section>
158
+
159
+ <div class="row justify-content-center">
160
+
161
+ <div class="col-6 col-md-5">
162
+
163
+ <div class="tile is-round is-bg-white">
164
+
165
+ <section class="tile-content">
166
+
167
+ <p class="text-center"> <img src="img/icon.png" width="30px"> 常に二枚</p>
168
+
169
+ <p>コンテンツ<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br></p>
170
+
171
+ </section>
172
+
173
+ </div>
174
+
175
+ </div>
176
+
177
+ <div class="col-6 col-md-5">
178
+
179
+ <div class="tile is-round is-bg-white">
180
+
181
+ <section class="tile-content">
182
+
183
+ <p class="text-center"><img src="img/icon.png" width="30px">常に二枚</p>
184
+
185
+ <p>コンテンツ<br>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
186
+
187
+ </section>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ </div>
194
+
195
+ </section>
196
+
197
+
198
+
199
+ <!-- footer -->
200
+
201
+ <section class="footer padding">
202
+
203
+ <div class="container-fluid">
204
+
205
+ <div class="row">
206
+
207
+ <div class="col-md-4 footer-left">
208
+
209
+ <div class="footer-img">
210
+
211
+ <img src="img/logo.png" alt="">
212
+
213
+ </div>
214
+
215
+ <hr class="light">
216
+
217
+ <div class="">
218
+
219
+ <p><a href="#"><i class="fab fa-twitter fa-lg"></i></a>コンテンツ</p>
220
+
221
+ </div>
222
+
223
+ <div class="">
224
+
225
+ <p><i class="fa fa-envelope"></i>コンテンツ</p>
226
+
227
+ </div>
228
+
229
+ </div>
230
+
231
+ <div class="col-md-4 footer-center">
232
+
233
+ <hr class="light">
234
+
235
+ <p><a class="text-decoration-none" href="#">コンテンツ</a></p>
236
+
237
+ <hr class="light">
238
+
239
+ <p><a href="#">コンテンツ</a></p>
240
+
241
+ <p><a href="#">コンテンツ</a></p>
242
+
243
+ <p><a href="#">コンテンツ</a></p>
244
+
245
+ <p><a href="#">コンテンツ</a></p>
246
+
247
+ <p><a href="#">コンテンツ</a></p>
248
+
249
+ <p><a href="#">コンテンツ</a></p>
250
+
251
+ </div>
252
+
253
+ <div class="col-md-4 footer-right">
254
+
255
+ <hr class="light">
256
+
257
+ <p>コンテンツ</p>
258
+
259
+ <hr class="light">
260
+
261
+ <p><a href="#">コンテンツ</a></p>
262
+
263
+ <p><a href="#">コンテンツ</a></p>
264
+
265
+ <p><a href="#">コンテンツ</a></p>
266
+
267
+ <p><a href="#">コンテンツ</a></p>
268
+
269
+ <p><a href="#">コンテンツ</a></p>
270
+
271
+ <p><a href="#">コンテンツ</a></p>
272
+
273
+ </div>
274
+
275
+ </div>
276
+
277
+ </div>
278
+
279
+ </section>
280
+
281
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
282
+
283
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
284
+
285
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
286
+
287
+ crossorigin="anonymous"></script>
288
+
289
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
290
+
291
+ integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
292
+
293
+ crossorigin="anonymous"></script>
294
+
295
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
296
+
297
+ integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
298
+
299
+ crossorigin="anonymous"></script>
300
+
301
+ </body>
302
+
303
+ <script>
304
+
305
+ $('.carousel').carousel({
306
+
307
+ interval: 6000,
308
+
309
+ pause: 'hover'
310
+
311
+ });
312
+
313
+ </script>
314
+
315
+
316
+
317
+ </html>
318
+
319
+
42
320
 
43
321
  ```
44
322
 
45
323
  ```css
46
324
 
325
+ body {
326
+
327
+ font-family: 'Noto Sans JP', sans-serif;
328
+
329
+ /* font-weight: lighter; */
330
+
331
+ background-color: white;
332
+
333
+ color: #000000;
334
+
335
+ }
336
+
337
+ a{
338
+
339
+ color: white;
340
+
341
+ }
342
+
47
343
  .footer{
48
344
 
345
+ background-color: #070707;
346
+
347
+ color: white;
348
+
349
+ }
350
+
351
+
352
+
353
+ .navbar {
354
+
355
+ background-color: #000000;
356
+
357
+ color: #FFFFFF;
358
+
359
+ }
360
+
361
+ .fa-bars{
362
+
363
+ color: white;
364
+
365
+ }
366
+
367
+ .nav-link{
368
+
369
+ color: #FFFFFF !important;
370
+
371
+ }
372
+
373
+
374
+
375
+ .padding {
376
+
377
+ padding-bottom: 2rem;
378
+
379
+ }
380
+
381
+
382
+
383
+ .carousel-item {
384
+
385
+ height: 600px;
386
+
387
+ position: relative;
388
+
389
+ }
390
+
391
+
392
+
393
+ .carousel-item h1 {
394
+
395
+ font-size: 500%;
396
+
397
+ text-shadow: 1px 1px 15px #000;
398
+
399
+ font-color: #000000;
400
+
401
+ }
402
+
403
+
404
+
405
+ .carousel-image-1 {
406
+
407
+ background-image: url('img/image1.jpg');
408
+
409
+ background-size: cover;
410
+
411
+ background-position: center center;
412
+
413
+ position: relative;
414
+
415
+ }
416
+
417
+
418
+
419
+ .carousel-image-2 {
420
+
421
+ background-image: url('img/image2.jpg');
422
+
423
+ background-size: cover;
424
+
425
+ background-position: top right;
426
+
427
+ position: relative;
428
+
429
+ }
430
+
431
+
432
+
433
+ .carousel-image-3 {
434
+
435
+ background-image: url('img/image3.jpg');
436
+
437
+ background-size: cover;
438
+
439
+ background-position: center center;
440
+
441
+ position: relative;
442
+
443
+ }
444
+
445
+
446
+
447
+ .carousel-image-4 {
448
+
449
+ background-image: url('img/image4.jpg');
450
+
451
+ background-size: cover;
452
+
453
+ background-position: center center;
454
+
455
+ position: relative;
456
+
457
+ }
458
+
459
+
460
+
461
+ .caption {
462
+
463
+ position: absolute;
464
+
465
+ top: 50%;
466
+
467
+ left: 50%;
468
+
469
+ -ms-transform: translate(-50%,-50%);
470
+
471
+ -webkit-transform: translate(-50%,-50%);
472
+
473
+ transform: translate(-50%,-50%);
474
+
475
+ text-align: center;
476
+
477
+ color: #000000;
478
+
479
+ margin:0;
480
+
481
+ padding:0;
482
+
483
+ }
484
+
485
+ .btn{
486
+
487
+ background-color: red;
488
+
489
+ color: white;
490
+
491
+ }
492
+
493
+ .tile{
494
+
495
+ margin:1em;
496
+
497
+ padding:1em;
498
+
499
+ display: flex;
500
+
501
+ flex-direction: column;
502
+
503
+ justify-content: flex-start;
504
+
505
+ flex-wrap: wrap;
506
+
507
+ align-items: center;
508
+
509
+ background-color: #accaa8;
510
+
511
+ }
512
+
513
+
514
+
515
+ .tile_title{
516
+
517
+ font-size: large;
518
+
519
+ text-align: center;
520
+
521
+ }
522
+
523
+
524
+
525
+ .tile_title1{
526
+
527
+ font-size: large;
528
+
529
+ text-align: center;
530
+
531
+ }
532
+
533
+
534
+
535
+ .tile_title2{
536
+
537
+ font-size: large;
538
+
539
+ text-align: center;
540
+
541
+ }
542
+
543
+
544
+
545
+ .is-round{
546
+
547
+ border-radius: 10px;
548
+
549
+ }
550
+
551
+
552
+
553
+ .test{
554
+
555
+ display: flex;
556
+
557
+ flex-wrap: wrap;
558
+
559
+ align-content: stretch;
560
+
561
+ }
562
+
563
+ .tile-content{
564
+
565
+
566
+
567
+ }
568
+
569
+ .footer{
570
+
571
+ text-align: left !important;
572
+
573
+ color: #ffffff;
574
+
575
+ padding-top: 2rem;
576
+
577
+ padding-left: 4rem;
578
+
579
+ display: inline-block;
580
+
581
+ vertical-align: top;
582
+
583
+ }
584
+
585
+
586
+
587
+ .footer a{
588
+
589
+ color: #ffffff !important;
590
+
591
+ display: inline-block;
592
+
593
+ text-decoration: none !important;
594
+
595
+ }
596
+
597
+ .footer-left i {
598
+
599
+ background-color: #33383b;
600
+
601
+ color: #ffffff;
602
+
603
+ width: 38px;
604
+
605
+ height: 38px;
606
+
607
+ border-radius: 50%;
608
+
609
+ text-align: center;
610
+
611
+ line-height: 42px;
612
+
613
+ margin: 10px 15px;
614
+
615
+ vertical-align: middle;
616
+
617
+ display: inline-block;
618
+
619
+ }
620
+
621
+ .footer-img{
622
+
623
+ margin-bottom: 1rem;
624
+
625
+ }
626
+
627
+ hr.light{
628
+
629
+ border-top: 1px solid #d5d5d5;
630
+
631
+ width: 100%;
632
+
633
+ margin-top: .8rem;
634
+
635
+ margin-bottom: 1rem;
636
+
637
+ display: inline-block;
638
+
639
+
640
+
641
+ }
642
+
643
+ .footer-center{
644
+
49
645
  text-align: center !important;
50
646
 
51
- color: #ffffff;
52
-
53
- padding-top: 2rem;
54
-
55
- }
647
+ }
56
-
57
-
58
-
648
+
59
- .footer a{
649
+ .footer-right{
60
-
61
- color: #ffffff !important;
650
+
62
-
63
- display: inline-block;
64
-
65
- text-decoration: none !important;
651
+ text-align: center !important;
652
+
653
+ }
654
+
655
+
656
+
657
+ @media(max-width: 768px) {
658
+
659
+ .caption h1 {
660
+
661
+ font-size: 350%;
662
+
663
+ }
664
+
665
+ .caption .btn {
666
+
667
+ font-size: 95%;
668
+
669
+ padding: 8px 14px;
670
+
671
+ }
672
+
673
+ }
674
+
675
+ @media(max-width: 544px){
676
+
677
+
678
+
679
+ .caption h1 {
680
+
681
+ font-size: 250%;
682
+
683
+ }
684
+
685
+ .caption .btn{
686
+
687
+ font-size: 90%;
688
+
689
+ padding: 4px 8px;
690
+
691
+ }
692
+
693
+ .carousel-indicators{
694
+
695
+ display: none;
696
+
697
+ }
698
+
699
+ .is-bg-beige{
700
+
701
+ background-color: #DFC392;
702
+
703
+ color: #08415c;
704
+
705
+ padding-bottom: 50%;
706
+
707
+ }
708
+
709
+
710
+
711
+ .is-bg-navy{
712
+
713
+ background-color: #08415c;
714
+
715
+ color: #DFC392;
716
+
717
+ padding-bottom: 50%;
718
+
719
+ }
720
+
721
+ .footer-center{
722
+
723
+ margin-top: 2rem;
724
+
725
+ }
726
+
727
+ .footer-right{
728
+
729
+ margin-top: 2rem;
730
+
731
+ }
732
+
733
+ .copyright{
734
+
735
+ margin-top: 2rem;
736
+
737
+ }
66
738
 
67
739
  }
68
740
 

1

タグを追加しました

2020/01/22 08:33

投稿

Azami
Azami

スコア6

test CHANGED
File without changes
test CHANGED
File without changes