回答編集履歴
3
修正
answer
CHANGED
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
}
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
`display: flex;`で子要素に`margin-top`を設定する..など工夫するよりも、
|
|
116
|
+
`display: flex;`で子要素に`margin-top`を設定する..など工夫するアプローチよりも、
|
|
117
|
-
計算
|
|
117
|
+
高さの計算として完全に同じ仕組みを用いることで「そもそもズレようがない」状態にできると考えます。
|
2
別案を追記しました。
answer
CHANGED
|
@@ -86,4 +86,32 @@
|
|
|
86
86
|
09あいうえお<br>
|
|
87
87
|
10あいうえお
|
|
88
88
|
</div>
|
|
89
|
-
```
|
|
89
|
+
```
|
|
90
|
+
---
|
|
91
|
+
案2として、別案を考えてみました。こちらのほうがズレは抑えられるのでは、と思います。
|
|
92
|
+
HTMLは共通、CSSの下記部分のみ書き換えてみてください。
|
|
93
|
+
|
|
94
|
+
[CodePenでの実装 - 案2](https://codepen.io/y-arakaki/pen/QWjEEjb)
|
|
95
|
+
|
|
96
|
+
```CSS
|
|
97
|
+
.line-group {
|
|
98
|
+
position: absolute;
|
|
99
|
+
top: 0;
|
|
100
|
+
left: 0;
|
|
101
|
+
right: 0;
|
|
102
|
+
pointer-events: none;
|
|
103
|
+
}
|
|
104
|
+
.line {
|
|
105
|
+
width: 100%;
|
|
106
|
+
box-shadow: 0 1px 0 0 green; /* 線の太さは変わらない */
|
|
107
|
+
}
|
|
108
|
+
.line::before {
|
|
109
|
+
content: " "; /* 全角スペース */
|
|
110
|
+
font-size: 3vw;
|
|
111
|
+
line-height: 1.5;
|
|
112
|
+
color: transparent;
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
`display: flex;`で子要素に`margin-top`を設定する..など工夫するよりも、
|
|
117
|
+
計算の方法を同じにすることで、ズレがなくなるのでは..と思います。
|
1
修正
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
backgroundでの実装だとブラウザごとのズレを解消するのはかなり難しいと思います。
|
|
2
2
|
(CSS2以前のプロパティでは、小数点の扱いがブラウザごとにマチマチ)
|
|
3
3
|
|
|
4
|
-
別案を思いついたので、もし切り替える場合があるならご参考ください。
|
|
4
|
+
JavaScript不要の別案を思いついたので、もし切り替える場合があるならご参考ください。
|
|
5
5
|
|
|
6
6
|
現状10行にしか対応していませんが、行数を増やす場合は50行くらい用意してoverflow: hidden;で隠す、
|
|
7
7
|
などすれば高さが増えても対応は可能と思われます。
|