質問編集履歴
2
margin:-192px 55px 0px 45px; の.circleへの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
background: #fff;/*背景色*/
|
|
57
57
|
border: 6px solid #121212; /*枠の設定*/
|
|
58
58
|
margin-top: -192px;
|
|
59
|
+
margin:-192px 55px 0px 45px;
|
|
59
60
|
|
|
60
61
|
}
|
|
61
62
|
|
1
コード修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,8 +8,10 @@
|
|
|
8
8
|
中央寄せになったまま768のギリギリまで縮まっていくにはどうすればいいでしょうか？
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<ul class="f-menu">
|
|
12
11
|
|
|
12
|
+
<footer class="footer">
|
|
13
|
+
<ul class="f-menu">
|
|
14
|
+
|
|
13
15
|
<li class="f-list">
|
|
14
16
|
<div class="circle">
|
|
15
17
|
<i class="fas fa-dumbbell fa-6x" data-fa-transform="down-9.5 right-7.5"></i>
|
|
@@ -34,6 +36,9 @@
|
|
|
34
36
|
<p class="t-2">はひふへほ</p>
|
|
35
37
|
</div></li>
|
|
36
38
|
</ul>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
</footer>
|
|
37
42
|
```
|
|
38
43
|
|
|
39
44
|
```css
|
|
@@ -41,32 +46,31 @@
|
|
|
41
46
|
height: 230px;
|
|
42
47
|
background-color: black;
|
|
43
48
|
display: flex;
|
|
49
|
+
|
|
44
50
|
}
|
|
45
51
|
|
|
46
52
|
.circle {
|
|
47
53
|
width: 225px;
|
|
48
54
|
height: 225px;
|
|
49
55
|
border-radius: 50%;
|
|
50
|
-
background: #fff;
|
|
56
|
+
background: #fff;/*背景色*/
|
|
51
|
-
border: 6px solid #121212;
|
|
57
|
+
border: 6px solid #121212; /*枠の設定*/
|
|
52
|
-
margin:-192px 55px 0px 45px;
|
|
53
58
|
margin-top: -192px;
|
|
54
59
|
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
.f-menu{
|
|
58
|
-
display: flex;
|
|
63
|
+
display: flex; //3つのアイコンを横並びにするために設定
|
|
59
|
-
|
|
64
|
+
justify-content: space-between;
|
|
60
65
|
margin: 0 auto;
|
|
61
|
-
|
|
62
|
-
|
|
66
|
+
|
|
63
67
|
}
|
|
64
68
|
|
|
65
69
|
.f-list{
|
|
66
|
-
|
|
70
|
+
|
|
67
71
|
z-index: 5;
|
|
68
|
-
|
|
72
|
+
|
|
69
|
-
|
|
73
|
+
width: auto;
|
|
70
74
|
}
|
|
71
75
|
.t-1{
|
|
72
76
|
color: #fff;
|
|
@@ -82,4 +86,5 @@
|
|
|
82
86
|
font-weight: bold;
|
|
83
87
|
}
|
|
84
88
|
|
|
89
|
+
|
|
85
90
|
```
|