teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

5

修正

2020/04/13 22:31

投稿

new1ro
new1ro

スコア4528

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

修正しました。

2020/04/13 22:31

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -11,11 +11,17 @@
11
11
  例えば、以下のような形で実装できるのでは、と思います。
12
12
 
13
13
  ```CSS
14
- /* クラス名をつけたほうがいいと思いますが、仮に「.content-placeholder」としています */
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 0;
62
+ margin-bottom: 1em;
48
63
  height: 1em;
49
64
  background: #ddd;
50
65
  }

3

修正

2020/04/13 22:30

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -46,6 +46,6 @@
46
46
  .content-placeholder {
47
47
  margin: 1em 0;
48
48
  height: 1em;
49
- background: #eee;
49
+ background: #ddd;
50
50
  }
51
51
  ```

2

修正しました。

2020/04/13 22:20

投稿

new1ro
new1ro

スコア4528

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(#fff, 0.5), transparent);
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

修正

2020/04/13 22:19

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -16,7 +16,7 @@
16
16
  position relative;
17
17
  overflow hidden;
18
18
  }
19
- .content-placeholder&::before {
19
+ .content-placeholder::before {
20
20
  content: "";
21
21
  display: block;
22
22
  height: 100%;