回答編集履歴
1
コード追記
answer
CHANGED
|
@@ -36,4 +36,26 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
蛇足
|
|
42
|
+
---
|
|
43
|
+
疑似チェックボックスの配置ですが、現状は `position: absolute;` と `transform` で位置決めしてますが、flex を使うとシンプルにできます。
|
|
44
|
+
|
|
45
|
+
```scss
|
|
46
|
+
span {
|
|
47
|
+
font-size: 1.6rem;
|
|
48
|
+
font-weight: normal;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
display: inline-flex; /*横並び*/
|
|
51
|
+
align-items: center; /*垂直位置中央配置*/
|
|
52
|
+
&::before {
|
|
53
|
+
content: "";
|
|
54
|
+
width: 28px;
|
|
55
|
+
height: 28px;
|
|
56
|
+
background: #fff;
|
|
57
|
+
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
58
|
+
border-radius: 2px;
|
|
59
|
+
margin-right: 10px; /*a要素との間隔調整*/
|
|
60
|
+
}
|
|
39
61
|
```
|