回答編集履歴
5
修正
answer
CHANGED
@@ -44,7 +44,7 @@
|
|
44
44
|
}
|
45
45
|
```
|
46
46
|
|
47
|
-
また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。
|
47
|
+
また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。
|
48
48
|
```CSS
|
49
49
|
.card-lower {
|
50
50
|
flex: 1 1 0%;
|
4
修正しました。
answer
CHANGED
@@ -11,11 +11,17 @@
|
|
11
11
|
例えば、以下のような形で実装できるのでは、と思います。
|
12
12
|
|
13
13
|
```CSS
|
14
|
-
/*
|
14
|
+
/* 汎用的なクラス名をつけたほうがいいと思いますが、とりあえずベタ書きしています。 */
|
15
|
+
.avatar-placeholder,
|
16
|
+
.name-wrapper,
|
17
|
+
.date-wrapper,
|
15
18
|
.content-placeholder {
|
16
19
|
position: relative;
|
17
20
|
overflow: hidden;
|
18
21
|
}
|
22
|
+
.avatar-placeholder::before,
|
23
|
+
.name-wrapper::before,
|
24
|
+
.date-wrapper::before,
|
19
25
|
.content-placeholder::before {
|
20
26
|
content: "";
|
21
27
|
display: block;
|
@@ -43,8 +49,17 @@
|
|
43
49
|
.card-lower {
|
44
50
|
flex: 1 1 0%;
|
45
51
|
}
|
52
|
+
.avatar-placeholder {
|
53
|
+
background: #ddd;
|
54
|
+
}
|
55
|
+
.name-wrapper,
|
56
|
+
.date-wrapper {
|
57
|
+
margin-bottom: 1em;
|
58
|
+
height: 1em;
|
59
|
+
background: #ddd;
|
60
|
+
}
|
46
61
|
.content-placeholder {
|
47
|
-
margin: 1em
|
62
|
+
margin-bottom: 1em;
|
48
63
|
height: 1em;
|
49
64
|
background: #ddd;
|
50
65
|
}
|
3
修正
answer
CHANGED
@@ -46,6 +46,6 @@
|
|
46
46
|
.content-placeholder {
|
47
47
|
margin: 1em 0;
|
48
48
|
height: 1em;
|
49
|
-
background: #
|
49
|
+
background: #ddd;
|
50
50
|
}
|
51
51
|
```
|
2
修正しました。
answer
CHANGED
@@ -13,15 +13,15 @@
|
|
13
13
|
```CSS
|
14
14
|
/* 専用のクラス名をつけたほうがいいと思いますが、仮に「.content-placeholder」としています */
|
15
15
|
.content-placeholder {
|
16
|
-
position relative;
|
16
|
+
position: relative;
|
17
|
-
overflow hidden;
|
17
|
+
overflow: hidden;
|
18
18
|
}
|
19
19
|
.content-placeholder::before {
|
20
20
|
content: "";
|
21
21
|
display: block;
|
22
22
|
height: 100%;
|
23
23
|
width: 100%;
|
24
|
-
background: linear-gradient(90deg, transparent, rgba(
|
24
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
|
25
25
|
position: absolute;
|
26
26
|
top: 0;
|
27
27
|
left: 0;
|
@@ -36,4 +36,16 @@
|
|
36
36
|
transform: translateX(100%);
|
37
37
|
}
|
38
38
|
}
|
39
|
+
```
|
40
|
+
|
41
|
+
また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。この方法だけではないですが、
|
42
|
+
```CSS
|
43
|
+
.card-lower {
|
44
|
+
flex: 1 1 0%;
|
45
|
+
}
|
46
|
+
.content-placeholder {
|
47
|
+
margin: 1em 0;
|
48
|
+
height: 1em;
|
49
|
+
background: #eee;
|
50
|
+
}
|
39
51
|
```
|
1
修正
answer
CHANGED
@@ -16,7 +16,7 @@
|
|
16
16
|
position relative;
|
17
17
|
overflow hidden;
|
18
18
|
}
|
19
|
-
.content-placeholder
|
19
|
+
.content-placeholder::before {
|
20
20
|
content: "";
|
21
21
|
display: block;
|
22
22
|
height: 100%;
|