回答編集履歴
5
修正
test
CHANGED
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
|
|
93
|
-
また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。
|
|
93
|
+
また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。
|
|
94
94
|
|
|
95
95
|
```CSS
|
|
96
96
|
|
4
修正しました。
test
CHANGED
|
@@ -24,7 +24,13 @@
|
|
|
24
24
|
|
|
25
25
|
```CSS
|
|
26
26
|
|
|
27
|
-
/*
|
|
27
|
+
/* 汎用的なクラス名をつけたほうがいいと思いますが、とりあえずベタ書きしています。 */
|
|
28
|
+
|
|
29
|
+
.avatar-placeholder,
|
|
30
|
+
|
|
31
|
+
.name-wrapper,
|
|
32
|
+
|
|
33
|
+
.date-wrapper,
|
|
28
34
|
|
|
29
35
|
.content-placeholder {
|
|
30
36
|
|
|
@@ -33,6 +39,12 @@
|
|
|
33
39
|
overflow: hidden;
|
|
34
40
|
|
|
35
41
|
}
|
|
42
|
+
|
|
43
|
+
.avatar-placeholder::before,
|
|
44
|
+
|
|
45
|
+
.name-wrapper::before,
|
|
46
|
+
|
|
47
|
+
.date-wrapper::before,
|
|
36
48
|
|
|
37
49
|
.content-placeholder::before {
|
|
38
50
|
|
|
@@ -88,9 +100,27 @@
|
|
|
88
100
|
|
|
89
101
|
}
|
|
90
102
|
|
|
103
|
+
.avatar-placeholder {
|
|
104
|
+
|
|
105
|
+
background: #ddd;
|
|
106
|
+
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.name-wrapper,
|
|
110
|
+
|
|
111
|
+
.date-wrapper {
|
|
112
|
+
|
|
113
|
+
margin-bottom: 1em;
|
|
114
|
+
|
|
115
|
+
height: 1em;
|
|
116
|
+
|
|
117
|
+
background: #ddd;
|
|
118
|
+
|
|
119
|
+
}
|
|
120
|
+
|
|
91
121
|
.content-placeholder {
|
|
92
122
|
|
|
93
|
-
margin: 1em
|
|
123
|
+
margin-bottom: 1em;
|
|
94
124
|
|
|
95
125
|
height: 1em;
|
|
96
126
|
|
3
修正
test
CHANGED
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
|
|
95
95
|
height: 1em;
|
|
96
96
|
|
|
97
|
-
background: #
|
|
97
|
+
background: #ddd;
|
|
98
98
|
|
|
99
99
|
}
|
|
100
100
|
|
2
修正しました。
test
CHANGED
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
|
|
29
29
|
.content-placeholder {
|
|
30
30
|
|
|
31
|
-
position relative;
|
|
31
|
+
position: relative;
|
|
32
32
|
|
|
33
|
-
overflow hidden;
|
|
33
|
+
overflow: hidden;
|
|
34
34
|
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
width: 100%;
|
|
46
46
|
|
|
47
|
-
background: linear-gradient(90deg, transparent, rgba(
|
|
47
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
|
|
48
48
|
|
|
49
49
|
position: absolute;
|
|
50
50
|
|
|
@@ -75,3 +75,27 @@
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
```
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。この方法だけではないですが、
|
|
82
|
+
|
|
83
|
+
```CSS
|
|
84
|
+
|
|
85
|
+
.card-lower {
|
|
86
|
+
|
|
87
|
+
flex: 1 1 0%;
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.content-placeholder {
|
|
92
|
+
|
|
93
|
+
margin: 1em 0;
|
|
94
|
+
|
|
95
|
+
height: 1em;
|
|
96
|
+
|
|
97
|
+
background: #eee;
|
|
98
|
+
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
```
|
1
修正
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.content-placeholder
|
|
37
|
+
.content-placeholder::before {
|
|
38
38
|
|
|
39
39
|
content: "";
|
|
40
40
|
|