回答編集履歴
1
クラス名を変更
answer
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
こんな感じですかね? クラス名は好きなように変更してください。
|
|
1
|
+
こんな感じですかね? もしクラス名は好きなように変更してください。
|
|
2
2
|
[https://codepen.io/new1ro/pen/jOPYQBp](https://codepen.io/new1ro/pen/jOPYQBp)
|
|
3
3
|
|
|
4
4
|
```HTML
|
|
5
|
-
<div class="
|
|
5
|
+
<div class="icon-close"></div>
|
|
6
6
|
```
|
|
7
7
|
|
|
8
8
|
```CSS
|
|
9
|
-
.
|
|
9
|
+
.icon-close {
|
|
10
10
|
position: relative;
|
|
11
11
|
width: 24px; /* ボタンのサイズ */
|
|
12
12
|
height: 24px; /* ボタンのサイズ */
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
.icon-close::before,
|
|
15
|
-
.
|
|
15
|
+
.icon-close::after {
|
|
16
16
|
content: "";
|
|
17
17
|
position: absolute;
|
|
18
18
|
top: 0;
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
height: 2px; /* 線の太さ */
|
|
25
25
|
background: #000; /* 線の色 */
|
|
26
26
|
}
|
|
27
|
-
.
|
|
27
|
+
.icon-close::before {
|
|
28
28
|
transform: rotate(45deg);
|
|
29
29
|
}
|
|
30
|
-
.
|
|
30
|
+
.icon-close::after {
|
|
31
31
|
transform: rotate(-45deg);
|
|
32
32
|
}
|
|
33
33
|
```
|