質問編集履歴
2
コード変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
教えてください。
|
|
2
2
|
|
|
3
|
-
背景画像img-bg.jpgにネコの画像cat.pngを乗せて、ネコに目の画像catseye.pngを重ねてアニメーションanimated tadaを右目と左目で動かしたいのですが、きちんと目を定位置に重ねることができません。レスポンシブで画面の大きさを変えると
|
|
3
|
+
背景画像img-bg.jpgにネコの画像cat.pngを乗せて、ネコに目の画像catseye.pngを重ねてアニメーションanimated tadaを右目と左目で動かしたいのですが、きちんと目を定位置に重ねることができません。レスポンシブで画面の大きさを変えると微妙にずれてしまいます。
|
|
4
4
|
|
|
5
|
+
あと、目の大きさも画面の大きさに伴って拡大縮小されず、大きさが変わりません。
|
|
6
|
+
|
|
5
|
-
背景画像とネコ画像はキチンとレスポンシブ対応されているので目の画像を
|
|
7
|
+
背景画像とネコ画像はキチンとレスポンシブ対応されているので目の画像をきちんと重ねて、目の大きさもレスポンシブ対応になるようCSSコードの修正箇所を教えてください。
|
|
6
8
|
|
|
7
9
|
当方、初心者でググリながらコードをコピーしていますのでメチャクチャのコードだと思いますが、わかりやすく教えていただけると助かります。
|
|
8
10
|
|
|
@@ -44,19 +46,9 @@
|
|
|
44
46
|
|
|
45
47
|
```
|
|
46
48
|
|
|
47
|
-
CSS
|
|
49
|
+
**CSS**
|
|
48
50
|
|
|
49
51
|
```
|
|
50
|
-
|
|
51
|
-
.intro {
|
|
52
|
-
|
|
53
|
-
width:100%;
|
|
54
|
-
|
|
55
|
-
position:relative;
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
52
|
|
|
61
53
|
#intro{
|
|
62
54
|
|
|
@@ -68,8 +60,6 @@
|
|
|
68
60
|
|
|
69
61
|
background-size: contain;
|
|
70
62
|
|
|
71
|
-
background-position: ;
|
|
72
|
-
|
|
73
63
|
margin:25px 0 0 0;
|
|
74
64
|
|
|
75
65
|
z-index:1;
|
|
@@ -78,31 +68,47 @@
|
|
|
78
68
|
|
|
79
69
|
|
|
80
70
|
|
|
81
|
-
.cat
|
|
71
|
+
.cat{
|
|
82
72
|
|
|
73
|
+
position:relative;
|
|
74
|
+
|
|
83
|
-
width:
|
|
75
|
+
width:70%;
|
|
84
76
|
|
|
85
77
|
height:auto;
|
|
86
78
|
|
|
87
79
|
margin:0 auto;
|
|
88
80
|
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
.cat img{
|
|
86
|
+
|
|
87
|
+
position:relative;
|
|
88
|
+
|
|
89
|
+
width:100%;
|
|
90
|
+
|
|
91
|
+
height:auto;
|
|
92
|
+
|
|
89
|
-
|
|
93
|
+
margin:0 auto;
|
|
94
|
+
|
|
95
|
+
z-index:2;
|
|
90
96
|
|
|
91
97
|
}
|
|
92
98
|
|
|
93
99
|
|
|
94
100
|
|
|
95
|
-
#catseye-l
|
|
101
|
+
#catseye-l{
|
|
96
102
|
|
|
97
103
|
position:absolute;
|
|
98
104
|
|
|
99
|
-
max-width:
|
|
105
|
+
max-width:100%;
|
|
100
106
|
|
|
101
107
|
height:auto;
|
|
102
108
|
|
|
103
|
-
left:
|
|
109
|
+
left:24%;
|
|
104
110
|
|
|
105
|
-
top:
|
|
111
|
+
top:8%;
|
|
106
112
|
|
|
107
113
|
}
|
|
108
114
|
|
|
@@ -112,41 +118,17 @@
|
|
|
112
118
|
|
|
113
119
|
position:absolute;
|
|
114
120
|
|
|
115
|
-
max-width:
|
|
121
|
+
max-width:100%;
|
|
122
|
+
|
|
123
|
+
height:auto;
|
|
116
124
|
|
|
117
125
|
left:50%;
|
|
118
126
|
|
|
119
|
-
top:
|
|
127
|
+
top:7%;
|
|
120
128
|
|
|
121
129
|
}
|
|
122
130
|
|
|
123
131
|
|
|
124
|
-
|
|
125
|
-
@media(min-width:767px) {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
.intro {
|
|
130
|
-
|
|
131
|
-
height: 100%;
|
|
132
|
-
|
|
133
|
-
padding: 70px;
|
|
134
|
-
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
@media (max-width:768px) {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
.intro {
|
|
144
|
-
|
|
145
|
-
padding:170px 0;
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
}
|
|
150
132
|
|
|
151
133
|
|
|
152
134
|
|
1
コードを記述し直しました。このコードに対しての解決方法を教えていただけたらと思います。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,35 +12,33 @@
|
|
|
12
12
|
|
|
13
13
|
**HTML**
|
|
14
14
|
|
|
15
|
-
```<!-- Section: intro -->
|
|
15
|
+
``` <!-- Section: intro -->
|
|
16
16
|
|
|
17
|
-
<section id="intro" class="intro">
|
|
17
|
+
<section id="intro" class="intro">
|
|
18
18
|
|
|
19
|
-
<div class="cat"></
|
|
19
|
+
<div class="cat"><img src="img/cat.png">
|
|
20
20
|
|
|
21
|
-
<div id="catseye-l" class="animated tada"></div>
|
|
21
|
+
<div id="catseye-l" class="animated tada"><img src="img/catseye.png"></div>
|
|
22
22
|
|
|
23
|
-
<div id="catseye-r" class="animated tada"></div>
|
|
23
|
+
<div id="catseye-r" class="animated tada"><img src="img/catseye.png"></div>
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
</div>
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
<div class="slogan">
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
<h1><div class="animated pulse"><img src="img/job-like-logo500.png"></div></h1>
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
<p>アイウエオカキクケコ</p>
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
<a href="#about" class="btn btn-skin scroll">くわしくはコチラ</a>
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
</div>
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
|
|
38
38
|
|
|
39
|
-
</section>
|
|
39
|
+
</section>
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
<!-- /Section: intro -->
|
|
42
|
-
|
|
43
|
-
|
|
44
42
|
|
|
45
43
|
コード
|
|
46
44
|
|
|
@@ -80,17 +78,15 @@
|
|
|
80
78
|
|
|
81
79
|
|
|
82
80
|
|
|
83
|
-
.cat{
|
|
81
|
+
.cat img{
|
|
84
82
|
|
|
85
|
-
content: url(../img/cat.png);
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
width:85%;
|
|
88
84
|
|
|
89
85
|
height:auto;
|
|
90
86
|
|
|
91
87
|
margin:0 auto;
|
|
92
88
|
|
|
93
|
-
|
|
89
|
+
padding-left:15%;
|
|
94
90
|
|
|
95
91
|
}
|
|
96
92
|
|
|
@@ -98,19 +94,15 @@
|
|
|
98
94
|
|
|
99
95
|
#catseye-l {
|
|
100
96
|
|
|
101
|
-
content: url(../img/catseye.png);
|
|
102
|
-
|
|
103
97
|
position:absolute;
|
|
104
|
-
|
|
105
|
-
left:33%;
|
|
106
|
-
|
|
107
|
-
top:28%;
|
|
108
98
|
|
|
109
99
|
max-width:70%;
|
|
110
100
|
|
|
111
101
|
height:auto;
|
|
112
102
|
|
|
113
|
-
|
|
103
|
+
left:32%;
|
|
104
|
+
|
|
105
|
+
top:32%;
|
|
114
106
|
|
|
115
107
|
}
|
|
116
108
|
|
|
@@ -118,19 +110,13 @@
|
|
|
118
110
|
|
|
119
111
|
#catseye-r {
|
|
120
112
|
|
|
121
|
-
|
|
113
|
+
position:absolute;
|
|
122
114
|
|
|
123
|
-
|
|
115
|
+
max-width:70%;
|
|
124
116
|
|
|
125
117
|
left:50%;
|
|
126
118
|
|
|
127
|
-
top:
|
|
119
|
+
top:30%;
|
|
128
|
-
|
|
129
|
-
max-width:70%;
|
|
130
|
-
|
|
131
|
-
height:auto;
|
|
132
|
-
|
|
133
|
-
margin:0 auto;
|
|
134
120
|
|
|
135
121
|
}
|
|
136
122
|
|
|
@@ -164,24 +150,6 @@
|
|
|
164
150
|
|
|
165
151
|
|
|
166
152
|
|
|
167
|
-
@media (max-width:480px) {
|
|
168
|
-
|
|
169
|
-
.cat {
|
|
170
|
-
|
|
171
|
-
overflow: scroll;
|
|
172
|
-
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
#catseye-l {
|
|
176
|
-
|
|
177
|
-
width: 100%;
|
|
178
|
-
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
153
|
コード
|
|
186
154
|
|
|
187
155
|
```
|