質問編集履歴

2

修正

2020/08/08 15:04

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,48 +1,32 @@
1
- コードで、footer-rightが上下中央じゃない気がするのですが
1
+ 載箇所誤ったため修正】
2
2
 
3
+
4
+
3
- 原因分かりません・・・flexboxを使用した上下中央揃えです。
5
+ 下記コードで、半円の中の要素上下左右ちゃんと真ん中にきません・・・
6
+
7
+ なぜ上側にくっついてしますのかわかりません。
8
+
9
+ ![イメージ説明](7a57965fb130fc68055802452aa60dc4.png)
4
10
 
5
11
 
6
12
 
7
13
  ```HTML
8
14
 
9
- <footer>
15
+ <div class="circle-wrapper">
10
16
 
11
- <div class="container">
17
+ <div class="circle">
12
18
 
13
- <div class="footer-left">
19
+ <a href="#">
14
20
 
15
- <ul>
21
+ <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
16
22
 
17
- <li><a href="#">top</a></li>
23
+ <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
18
24
 
19
- <li><a href="#">design</a></li>
20
-
21
- <li><a href="#">about</a></li>
22
-
23
- <li><a href="#">skills</a></li>
24
-
25
- </ul>
25
+ </a>
26
-
27
- </div>
28
-
29
-
30
-
31
- <div class="footer-right">
32
-
33
- <p>Copyright © aaa All rights reserved.</p>
34
26
 
35
27
  </div>
36
28
 
37
29
  </div>
38
-
39
- </footer>
40
-
41
-
42
-
43
- </body>
44
-
45
- </html>
46
30
 
47
31
  ```
48
32
 
@@ -52,13 +36,17 @@
52
36
 
53
37
 
54
38
 
55
- footer{
39
+ .circle {
56
40
 
57
- height:100px;
41
+ width:50px;
58
42
 
59
- background-color: #9CB7BD;
43
+ height:25px;
60
44
 
45
+ border-radius:25px 25px 0 0;
46
+
47
+ background-color:#9CB7BD;
48
+
61
- color: white;
49
+ margin: 0 auto;
62
50
 
63
51
  display: flex;
64
52
 
@@ -70,85 +58,9 @@
70
58
 
71
59
 
72
60
 
73
- .footer-left li {
74
-
75
- float: left;
76
-
77
- padding-right: 40px;
78
-
79
- }
80
-
81
-
82
-
83
- .footer-left li a{
61
+ .circle a{
84
62
 
85
63
  color: white;
86
-
87
- float: left;
88
-
89
- font-size: 16px;
90
-
91
- font-weight: lighter;
92
-
93
- position: relative;
94
-
95
- display: inline-block;
96
-
97
- text-decoration: none;
98
-
99
- letter-spacing: 2px;
100
-
101
- line-height: 160%;
102
-
103
- }
104
-
105
-
106
-
107
-
108
-
109
- .footer-left li a::after{
110
-
111
- position: absolute;
112
-
113
- bottom: -4px;
114
-
115
- left: 0;
116
-
117
- content: '';
118
-
119
- width: 100%;
120
-
121
- height: 1px;
122
-
123
- background: white;
124
-
125
- transform: scale(0, 1);
126
-
127
- transform-origin: center top;
128
-
129
- transition: transform .3s;
130
-
131
- }
132
-
133
-
134
-
135
- .footer-left a:hover::after {
136
-
137
- transform: scale(1, 1);
138
-
139
- }
140
-
141
-
142
-
143
-
144
-
145
- .footer-right{
146
-
147
- float: right;
148
-
149
- font-size:12px;
150
-
151
- font-weight: lighter;
152
64
 
153
65
  }
154
66
 

1

修正

2020/08/08 15:04

投稿

_arukuneko
_arukuneko

スコア19

test CHANGED
File without changes
test CHANGED
@@ -49,6 +49,8 @@
49
49
 
50
50
 
51
51
  ```CSS
52
+
53
+
52
54
 
53
55
  footer{
54
56
 
@@ -150,4 +152,8 @@
150
152
 
151
153
  }
152
154
 
155
+
156
+
157
+
158
+
153
159
  ```