teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Web制作(Webサイト)のモバイルエラー

編集履歴

質問編集履歴

2

ソースコードと対応状況を更新

2020/06/01 15:13

投稿

rays
rays

スコア0

test CHANGED
File without changes
test CHANGED
@@ -26,11 +26,171 @@
26
26
 
27
27
 
28
28
 
29
+ 【2020/6/2追記】
30
+
31
+ JSをすべてコメントアウトしても同様のエラーが発生
32
+
33
+ キャッシュのクリア等は対応済
34
+
35
+ TOPに複数配置している画像をコメントアウトするとなおりました。
36
+
37
+ TOPの配置をそのままで、再読み込みエラーが発生しないようにしたいです。
38
+
39
+
40
+
29
41
  ### 該当のソースコード
30
42
 
31
-
43
+ 【2020/6/2追記】
44
+
32
-
45
+ ■TOPイメージはこの記述で120まで作成
46
+
47
+ <div class="top-animation"><img class="top-img-1" src="IMG/TOP_1.JPG" alt="資料作成例1"></div>
48
+
49
+ ■CSS　画像ごとにこんなものを指定
50
+
51
+ .top-img-25{
52
+
53
+ width:40%;
54
+
55
+ max-width:150px;
56
+
57
+ position:relative;
58
+
59
+ bottom:1800px;
60
+
61
+ left:350px;
62
+
63
+ }
64
+
65
+
66
+
67
+ モバイルでは不要の画像にはこんなものを指定
68
+
69
+ .top-img-24{
70
+
71
+ display:none;
72
+
73
+ }
74
+
75
+ ■CSS　アニメーションにはこんなものを指定
76
+
77
+ .top{
78
+
79
+ margin: 0 auto;
80
+
81
+ width:100%;
82
+
83
+ height: 100vh;
84
+
85
+ position: relative;
86
+
33
- N/A
87
+ z-index: 1;
88
+
89
+ background-color: #F2F2F2;
90
+
91
+ overflow: hidden;
92
+
93
+ }
94
+
95
+
96
+
97
+ .top-animation{
98
+
99
+ width:100%;
100
+
101
+ left:0px;
102
+
103
+ bottom:0px;
104
+
105
+ position: absolute;
106
+
107
+ -webkit-animation: Loop 60s linear infinite;
108
+
109
+ -ms-animation: Loop 60s linear infinite;
110
+
111
+ animation: Loop 60s linear infinite;
112
+
113
+ }
114
+
115
+
116
+
117
+ @keyframes Loop {
118
+
119
+ 0% {
120
+
121
+ transform:translate(-100%,100vh);
122
+
123
+ -webkit-transform:translate(-100%,100vh);
124
+
125
+ -ms-transform:translate(-100%,100vh);
126
+
127
+ }
128
+
129
+ to {
130
+
131
+ transform:translate(100%,-100vh);
132
+
133
+ -webkit-transform:translate(100%,-100vh);
134
+
135
+ -ms-transform:translate(100%,-100vh);
136
+
137
+ }
138
+
139
+ }
140
+
141
+
142
+
143
+ @-webkit-keyframes Loop {
144
+
145
+ 0% {
146
+
147
+ transform:translate(-100%,100vh);
148
+
149
+ -webkit-transform:translate(-100%,100vh);
150
+
151
+ -ms-transform:translate(-100%,100vh);
152
+
153
+ }
154
+
155
+ to {
156
+
157
+ transform:translate(100%,-100vh);
158
+
159
+ -webkit-transform:translate(100%,-100vh);
160
+
161
+ -ms-transform:translate(100%,-100vh);
162
+
163
+ }
164
+
165
+ }
166
+
167
+
168
+
169
+ @-ms-keyframes Loop {
170
+
171
+ 0% {
172
+
173
+ transform:translate(-100%,100vh);
174
+
175
+ -webkit-transform:translate(-100%,100vh);
176
+
177
+ -ms-transform:translate(-100%,100vh);
178
+
179
+ }
180
+
181
+ to {
182
+
183
+ transform:translate(100%,-100vh);
184
+
185
+ -webkit-transform:translate(100%,-100vh);
186
+
187
+ -ms-transform:translate(100%,-100vh);
188
+
189
+ }
190
+
191
+ }
192
+
193
+
34
194
 
35
195
 
36
196
 
@@ -46,6 +206,12 @@
46
206
 
47
207
  対策を調べましたが、わからず、ご教示いただけますと幸いです。
48
208
 
209
+ JSコメントアウト済　⇒　治らず
210
+
211
+ キャッシュ履歴　⇒治らず
212
+
213
+ TOP画像を全部コメントアウト　⇒治った
214
+
49
215
 
50
216
 
51
217
  ### 補足情報（FW/ツールのバージョンなど）

1

2020/06/01 15:13

投稿

rays
rays

スコア0

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- Iphone8のような少しまでのデバイスで閲覧した際に、
19
+ Iphone8のような少し前のデバイスで閲覧した際に、
20
20
 
21
21
  「問題が繰り返し起きました」
22
22