質問編集履歴
2
試したことの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -57,19 +57,55 @@
|
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
### 試したこと
|
|
60
|
-
aを```.readmore-btn```にしても同様に動きませんでした。
|
|
60
|
+
下記のコードおよび、aを```.readmore-btn```にしても同様に動きませんでした。
|
|
61
61
|
```css
|
|
62
|
+
#about {
|
|
63
|
+
padding: 125px 6.67% 77px;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
p {
|
|
66
|
+
margin-top: 70px;
|
|
67
|
+
padding: 0 2%;
|
|
68
|
+
}
|
|
62
69
|
.wrapper {
|
|
63
70
|
display: block;
|
|
71
|
+
margin: 70px auto 0;
|
|
72
|
+
width: 100%;
|
|
64
73
|
a {
|
|
65
74
|
display: flex;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
align-items: center;
|
|
77
|
+
width: 100%;
|
|
78
|
+
height: 89px;
|
|
79
|
+
font-family: "Futura Midium", sans-serif;
|
|
80
|
+
letter-spacing: 0.15em;
|
|
66
81
|
&::after {
|
|
67
82
|
content: "";
|
|
83
|
+
margin-left: 20px;
|
|
68
|
-
background: url(../
|
|
84
|
+
background: url(../imgs/top/down_arrow.png);
|
|
69
85
|
background-size: contain;
|
|
86
|
+
width: 10px;
|
|
87
|
+
height: 10px;
|
|
70
88
|
}
|
|
71
89
|
.is-active::after{
|
|
72
90
|
transform: rotate(180deg);
|
|
73
91
|
}
|
|
92
|
+
@media (max-width:700px) {
|
|
93
|
+
#about {
|
|
94
|
+
padding: calc(125px * 0.9) 6.67% calc(77px * 0.9);
|
|
95
|
+
p {
|
|
96
|
+
margin-top: calc(70px * 0.9);
|
|
74
97
|
}
|
|
98
|
+
.wrapper {
|
|
99
|
+
margin: calc(70px * 0.9) auto 0;
|
|
100
|
+
a {
|
|
101
|
+
height: calc(89px * 0.9);
|
|
102
|
+
&::after {
|
|
103
|
+
margin-left: calc(20px * 0.9);
|
|
104
|
+
width: calc(10px * 0.9);
|
|
105
|
+
height: calc(10px * 0.9);
|
|
106
|
+
}
|
|
107
|
+
.is-active::after {
|
|
108
|
+
transform: rotate(180deg);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
75
111
|
```
|
1
試したことの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -54,4 +54,22 @@
|
|
|
54
54
|
READ MORE
|
|
55
55
|
</a>
|
|
56
56
|
<div class="content">
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 試したこと
|
|
60
|
+
aを```.readmore-btn```にしても同様に動きませんでした。
|
|
61
|
+
```css
|
|
62
|
+
.wrapper {
|
|
63
|
+
display: block;
|
|
64
|
+
a {
|
|
65
|
+
display: flex;
|
|
66
|
+
&::after {
|
|
67
|
+
content: "";
|
|
68
|
+
background: url(../img/arrow.png);
|
|
69
|
+
background-size: contain;
|
|
70
|
+
}
|
|
71
|
+
.is-active::after{
|
|
72
|
+
transform: rotate(180deg);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
57
75
|
```
|