質問編集履歴

1

自分のコードを追加しました。footerのなかにdiv class="profile" があります。何かありましたらまたコメントお願いします。

2020/05/01 10:33

投稿

Eee7
Eee7

スコア2

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,17 @@
16
16
 
17
17
  ```ここに言語名を入力
18
18
 
19
+
20
+
21
+
22
+
23
+
24
+
25
+ <footer>
26
+
27
+ <div class="footer-main">
28
+
19
- <div class="profile">
29
+ <div class="profile">
20
30
 
21
31
  <img src="profile-m.png" alt="">
22
32
 
@@ -50,16 +60,620 @@
50
60
 
51
61
  </div>
52
62
 
63
+ <aside class="aside-1">
64
+
65
+ <h2>フッター右</h2>
66
+
67
+ <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
68
+
69
+ </aside>
70
+
71
+ <aside class="aside-2">
72
+
73
+ <h2>最近の投稿</h2>
74
+
75
+ <ul>
76
+
77
+ <li>
78
+
79
+ <a href="">
80
+
81
+ 書くためのテーマ
82
+
83
+ </a>
84
+
85
+ <p>
86
+
87
+ 2018年9月1日
88
+
89
+ </p>
90
+
91
+ </li>
92
+
93
+ <li>
94
+
95
+ <a href="">
96
+
97
+ 画像付きの投稿
98
+
99
+ </a>
100
+
101
+ <p>
102
+
103
+ 2018年3月5日
104
+
105
+ </p>
106
+
107
+ </li>
108
+
109
+ <li>
110
+
111
+ <a href="">
112
+
113
+ 引用付きの投稿
114
+
115
+ </a>
116
+
117
+ <p>
118
+
119
+ 2018年3月5日
120
+
121
+ </p>
122
+
123
+ </li>
124
+
125
+ </ul>
126
+
127
+ </aside>
128
+
129
+ <aside class="aside-3">
130
+
131
+ <h2>カテゴリー</h2>
132
+
133
+ <ul>
134
+
135
+ <li>
136
+
137
+ <a href="">
138
+
139
+ サンプル投稿
140
+
141
+ </a>
142
+
143
+ </li>
144
+
145
+ <li>
146
+
147
+ <a href="">
148
+
149
+ 投稿フォーマット
150
+
151
+ </a>
152
+
153
+ </li>
154
+
155
+ <li>
156
+
157
+ <a href="">
158
+
159
+ 普通の投稿
160
+
161
+ </a>
162
+
163
+ </li>
164
+
165
+ </ul>
166
+
167
+ </aside>
168
+
169
+ <div>
170
+
171
+ <input type="text" value="検索..." >
172
+
173
+ </div>
174
+
175
+ </div>
176
+
177
+ <div class="copyright">
178
+
179
+ <a class="fa fa-twitter" href=""></a>
180
+
181
+ <a class="fa fa-facebook" href=""></a>
182
+
183
+ <a class="fa fa-instagram" href=""></a>
184
+
185
+ Powered by WordPress | Theme: Write by Themegraphy
186
+
187
+
188
+
189
+ </div>
190
+
191
+
192
+
193
+
194
+
195
+ </footer>
196
+
197
+ </body>
198
+
199
+ </html>
200
+
53
201
  ```
54
202
 
55
203
  ```ここに言語を入力
56
204
 
57
- .profile{
205
+ body{
58
-
206
+
59
- width:100%;
207
+ padding:60px 100px;
208
+
209
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif ;
60
210
 
61
211
  }
62
212
 
213
+ header{
214
+
215
+ display: flex;
216
+
217
+ padding-bottom: 85px;
218
+
219
+ .header-title{
220
+
221
+ a{
222
+
223
+ font-size: 36px;
224
+
225
+ font-weight: 700;
226
+
227
+ line-height: 43px;
228
+
229
+ color: #111111;
230
+
231
+ text-decoration: none;
232
+
233
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
234
+
235
+ }
236
+
237
+ p{
238
+
239
+ font-size: 16px;
240
+
241
+ line-height: 25px;
242
+
243
+ color: #777777;
244
+
245
+ }
246
+
247
+
248
+
249
+ }
250
+
251
+ .header-menu {
252
+
253
+ margin: 0 auto;
254
+
255
+ padding-top: 30px;
256
+
257
+ li{
258
+
259
+ list-style: none;
260
+
261
+ display: inline-block;
262
+
263
+ padding: 0 20px;
264
+
265
+
266
+
267
+ a{
268
+
269
+ text-decoration: none;
270
+
271
+ font-size: 17px;
272
+
273
+ line-height: 52px;
274
+
275
+ color: #777777;
276
+
277
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
278
+
279
+ &:hover{
280
+
281
+ color: #c49029;
282
+
283
+ }
284
+
285
+ }
286
+
287
+ }
288
+
289
+
290
+
291
+
292
+
293
+ }
294
+
295
+ }
296
+
297
+ .contents-wrapper{
298
+
299
+ padding-bottom: 50px;
300
+
301
+ border-bottom: #e6e6e6 1px solid;
302
+
303
+
304
+
305
+
306
+
307
+ .top-wrapper{
308
+
309
+ h2{
310
+
311
+ font-size: 27px;
312
+
313
+ color: #777777;
314
+
315
+ line-height: 49px;
316
+
317
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
318
+
319
+ font-weight: normal;
320
+
321
+ padding:90px 0;
322
+
323
+ }
324
+
325
+ }
326
+
327
+ .main-wrapper{
328
+
329
+ .article{
330
+
331
+ display: flex;
332
+
333
+ justify-content: space-between;
334
+
335
+ padding-bottom: 80px;
336
+
337
+
338
+
339
+ p{
340
+
341
+
342
+
343
+ a{
344
+
345
+ color: #444444;
346
+
347
+ font-size: 17px;
348
+
349
+ line-height: 30px;
350
+
351
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
352
+
353
+ text-decoration: none;
354
+
355
+ display: block;
356
+
357
+ width: 150px;
358
+
359
+
360
+
361
+
362
+
363
+
364
+
365
+ }
366
+
367
+ }
368
+
369
+ .article-right{
370
+
371
+ padding-left: 200px;
372
+
373
+
374
+
375
+
376
+
377
+ h1{
378
+
379
+ a{
380
+
381
+ text-decoration: none;
382
+
383
+ color: #111111;
384
+
385
+ font-size: 22px;
386
+
387
+ line-height: 29px;
388
+
389
+ font-weight: 700;
390
+
391
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
392
+
393
+ }
394
+
395
+ }
396
+
397
+
398
+
399
+
400
+
401
+ .article-text{
402
+
403
+ color: #666666;
404
+
405
+ font-size: 17px;
406
+
407
+ line-height: 30px;
408
+
409
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
410
+
411
+
412
+
413
+
414
+
415
+ }
416
+
417
+ }
418
+
419
+ }
420
+
421
+
422
+
423
+ }
424
+
425
+ .btn-wrapper{
426
+
427
+ text-align: center;
428
+
429
+ span{
430
+
431
+ display: inline-block;
432
+
433
+ padding: 15px ;
434
+
435
+ border: #ddd solid 1px;
436
+
437
+ background-color: #e6e6e6;
438
+
439
+ }
440
+
441
+ a{
442
+
443
+ text-decoration: none;
444
+
445
+ border: #ddd solid 1px;
446
+
447
+ padding: 10px 15px;
448
+
449
+ color: #ddd;
450
+
451
+ }
452
+
453
+ }
454
+
455
+ }
456
+
457
+ footer{
458
+
459
+ padding-top: 100px;
460
+
461
+ .footer-main{
462
+
463
+ display: flex;
464
+
465
+ .profile{
466
+
467
+ position: relative;
468
+
469
+ width: 55%;
470
+
471
+
472
+
473
+
474
+
475
+
476
+
477
+
478
+
479
+ img{
480
+
481
+ border-radius: 50%;
482
+
483
+ width: 100px;
484
+
485
+
486
+
487
+
488
+
489
+ }
490
+
491
+ strong{
492
+
493
+ font-size: 19px;
494
+
495
+ line-height: 34px;
496
+
497
+ color: #333333;
498
+
499
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
500
+
501
+ font-weight: 600;
502
+
503
+ position: absolute;
504
+
505
+ top: 25px;
506
+
507
+ left: 130px;
508
+
509
+ }
510
+
511
+ .footer-icon{
512
+
513
+ position: absolute;
514
+
515
+ top: 50px;
516
+
517
+ left: 130px;
518
+
519
+ margin-top: 15px;
520
+
521
+
522
+
523
+ .fa{
524
+
525
+ vertical-align: mi;
526
+
527
+ display: inline-block;
528
+
529
+ color: #999;
530
+
531
+ text-decoration: none;
532
+
533
+ font-size: 24px;
534
+
535
+ line-height: 30px;
536
+
537
+ font: normal;
538
+
539
+ padding-right: 10px;
540
+
541
+
542
+
543
+
544
+
545
+ }
546
+
547
+ }
548
+
549
+ p{
550
+
551
+ font-size: 17px;
552
+
553
+ line-height: 30px;
554
+
555
+ color: #666666;
556
+
557
+ }
558
+
559
+
560
+
561
+
562
+
563
+ }
564
+
565
+ .aside-1{
566
+
567
+ margin-left: 70px;
568
+
569
+ width: 50%;
570
+
571
+ h2{
572
+
573
+ color: #333333;
574
+
575
+ font-size: 14px;
576
+
577
+ line-height: 20px;
578
+
579
+ margin-bottom: 20px;
580
+
581
+ }
582
+
583
+ p{
584
+
585
+ font-size: 16px;
586
+
587
+ line-height: 29px;
588
+
589
+ color: #666666;
590
+
591
+ }
592
+
593
+ }
594
+
595
+ .aside-2{
596
+
597
+ h2{
598
+
599
+ color: #333333;
600
+
601
+ font-size: 14px;
602
+
603
+ line-height: 20px;
604
+
605
+ }
606
+
607
+ a{
608
+
609
+ font-size: 17px;
610
+
611
+ line-height: 30px;
612
+
613
+ color: #666666;
614
+
615
+ }
616
+
617
+ p{
618
+
619
+ font-size: 15px;
620
+
621
+ line-height: 26px;
622
+
623
+ color: #999999;
624
+
625
+
626
+
627
+ }
628
+
629
+
630
+
631
+ }
632
+
633
+ .aside-3{
634
+
635
+ h2{
636
+
637
+ color: #333333;
638
+
639
+ font-size: 14px;
640
+
641
+ line-height: 20px;
642
+
643
+ }
644
+
645
+ a{
646
+
647
+ font-size: 17px;
648
+
649
+ line-height: 30px;
650
+
651
+ color: #666666;
652
+
653
+ }
654
+
655
+ p{
656
+
657
+ font-size: 15px;
658
+
659
+ line-height: 26px;
660
+
661
+ color: #999999;
662
+
663
+
664
+
665
+ }
666
+
667
+ }
668
+
669
+ }
670
+
671
+
672
+
673
+ }
674
+
675
+
676
+
63
677
  ```
64
678
 
65
679
 
@@ -84,4 +698,4 @@
84
698
 
85
699
  よろしくお願いします。
86
700
 
87
- これだけじゃコードが足りなくてわからないなどありましたら追加しますのでコメントでお願いします
701
+ これだけじゃコードが足りなくてわからないなどありましたら追加しますのでコメントでお願いします