回答編集履歴
5
修正
answer
CHANGED
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
}
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
下線の表現は、以下のようにbox-shadowにまとめても良さそうです。
|
|
19
|
+
`box-shadow: 0 -5px 0 0 #ebb94d inset, 0 5px 0 0 #ebb94d;`
|
|
18
20
|
|
|
19
21
|
---
|
|
20
22
|
(ソースコードがないときの回答です)
|
4
訂正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
font-weight: bold;
|
|
7
7
|
/* border-bottom: 10px solid #ebb94d; */
|
|
8
8
|
border-bottom: 5px solid #ebb94d; /* 合計が10pxになるよう、数値は調整してください。 */
|
|
9
|
-
box-shadow: 0 -5px 0 0 #ebb94d; /* 合計が10pxになるよう、数値は調整してください */
|
|
9
|
+
box-shadow: 0 -5px 0 0 #ebb94d inset; /* 合計が10pxになるよう、数値は調整してください */
|
|
10
10
|
|
|
11
11
|
/* 追加 */
|
|
12
12
|
line-height: 1;
|
3
修正
answer
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
border-bottomだけだと、完全にくっつけることは難しいかもしれません。
|
|
2
2
|
|
|
3
|
-
↓以下のようにすると、くっつけることができる
|
|
3
|
+
↓以下のようにすると、くっつけることができるかも..と思います。
|
|
4
|
+
```CSS
|
|
4
5
|
span {
|
|
5
6
|
font-weight: bold;
|
|
6
7
|
/* border-bottom: 10px solid #ebb94d; */
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
padding-bottom: 0;
|
|
13
14
|
display: inline-block;
|
|
14
15
|
}
|
|
16
|
+
```
|
|
15
17
|
|
|
16
18
|
|
|
17
19
|
---
|
2
ソースコードをいただけたので、追記します！
answer
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
border-bottomだけだと、完全にくっつけることは難しいかもしれません。
|
|
2
|
+
|
|
3
|
+
↓以下のようにすると、くっつけることができるのでは..と思います。
|
|
4
|
+
span {
|
|
5
|
+
font-weight: bold;
|
|
6
|
+
/* border-bottom: 10px solid #ebb94d; */
|
|
7
|
+
border-bottom: 5px solid #ebb94d; /* 合計が10pxになるよう、数値は調整してください。 */
|
|
8
|
+
box-shadow: 0 -5px 0 0 #ebb94d; /* 合計が10pxになるよう、数値は調整してください */
|
|
9
|
+
|
|
10
|
+
/* 追加 */
|
|
11
|
+
line-height: 1;
|
|
12
|
+
padding-bottom: 0;
|
|
13
|
+
display: inline-block;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
(ソースコードがないときの回答です)
|
|
1
19
|
勘で答えてみます。
|
|
2
20
|
|
|
3
21
|
「???」の部分は、「稼ぐ力」を囲っている要素です。お手元のソースコードの該当箇所に合わせて変更してください。
|
1
修正
answer
CHANGED
|
@@ -4,10 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
**「稼ぐ力」の下の線がborderやbox-shadowでつくられている場合**
|
|
6
6
|
```CSS
|
|
7
|
+
/* パターン1 */
|
|
7
8
|
.??? {
|
|
8
9
|
line-height: 1;
|
|
9
10
|
padding-bottom: 0;
|
|
10
|
-
|
|
11
|
+
height: 1em; /* 不要かもしれません */
|
|
11
12
|
```
|
|
12
13
|
|
|
13
14
|
---
|