回答編集履歴
3
修正
test
CHANGED
|
@@ -228,6 +228,6 @@
|
|
|
228
228
|
|
|
229
229
|
|
|
230
230
|
|
|
231
|
-
`display: flex;`で子要素に`margin-top`を設定する..など工夫するよりも、
|
|
231
|
+
`display: flex;`で子要素に`margin-top`を設定する..など工夫するアプローチよりも、
|
|
232
|
-
|
|
232
|
+
|
|
233
|
-
計算
|
|
233
|
+
高さの計算として完全に同じ仕組みを用いることで「そもそもズレようがない」状態にできると考えます。
|
2
別案を追記しました。
test
CHANGED
|
@@ -175,3 +175,59 @@
|
|
|
175
175
|
</div>
|
|
176
176
|
|
|
177
177
|
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
案2として、別案を考えてみました。こちらのほうがズレは抑えられるのでは、と思います。
|
|
182
|
+
|
|
183
|
+
HTMLは共通、CSSの下記部分のみ書き換えてみてください。
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
[CodePenでの実装 - 案2](https://codepen.io/y-arakaki/pen/QWjEEjb)
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
```CSS
|
|
192
|
+
|
|
193
|
+
.line-group {
|
|
194
|
+
|
|
195
|
+
position: absolute;
|
|
196
|
+
|
|
197
|
+
top: 0;
|
|
198
|
+
|
|
199
|
+
left: 0;
|
|
200
|
+
|
|
201
|
+
right: 0;
|
|
202
|
+
|
|
203
|
+
pointer-events: none;
|
|
204
|
+
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.line {
|
|
208
|
+
|
|
209
|
+
width: 100%;
|
|
210
|
+
|
|
211
|
+
box-shadow: 0 1px 0 0 green; /* 線の太さは変わらない */
|
|
212
|
+
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.line::before {
|
|
216
|
+
|
|
217
|
+
content: " "; /* 全角スペース */
|
|
218
|
+
|
|
219
|
+
font-size: 3vw;
|
|
220
|
+
|
|
221
|
+
line-height: 1.5;
|
|
222
|
+
|
|
223
|
+
color: transparent;
|
|
224
|
+
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
`display: flex;`で子要素に`margin-top`を設定する..など工夫するよりも、
|
|
232
|
+
|
|
233
|
+
計算の方法を同じにすることで、ズレがなくなるのでは..と思います。
|
1
修正
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
別案を思いついたので、もし切り替える場合があるならご参考ください。
|
|
7
|
+
JavaScript不要の別案を思いついたので、もし切り替える場合があるならご参考ください。
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|