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

質問編集履歴

4

文法の修正

2020/09/18 09:58

投稿

mmmmtsr
mmmmtsr

スコア11

title CHANGED
File without changes
body CHANGED
@@ -27,6 +27,7 @@
27
27
  ```
28
28
 
29
29
  ```CSS
30
+
30
31
  .coment_pict{
31
32
  position: relative;
32
33
  }
@@ -118,4 +119,75 @@
118
119
  width: 130px;
119
120
  }
120
121
  }
122
+
123
+
124
+
125
+ .second-contents_wrap{
126
+ background-color: #F0F0E1;
127
+ }
128
+
129
+
130
+
131
+ .voice-student_2ndblock{
132
+ margin-top: 20px;
133
+
134
+ }
135
+
136
+ @media only screen and (min-width: 1024px){
137
+ .voice-student_2ndblock{
138
+ max-width: 1600px;
139
+ margin: 50px auto;
140
+ padding-left: 50px;
141
+ padding-right: 50px;
142
+ display: -webkit-flex;
143
+ display: flex;
144
+ justify-content: space-between;
145
+ }
146
+
147
+ }
148
+ .voice-student_2ndblock-comment{
149
+ padding: 20px;
150
+ }
151
+
152
+ .voice-student_2ndblock-comment p{
153
+ padding-top: 20px;
154
+ }
155
+
156
+
157
+ @media only screen and (min-width: 1024px){
158
+ .voice-student_2ndblock-comment{
159
+ padding: 30px 30px 30px 60px;
160
+ margin-bottom: 0px;
161
+ -webkit-box-flex: 0;
162
+ -ms-flex: 0 0 65.828%;
163
+ flex: 0 0 65.828%;
164
+ max-width: 65.828%;
165
+ }
166
+ }
167
+ .voice-student_2ndblock-img{
168
+ padding-top: 20px;
169
+ padding-left: 20px;
170
+ padding-right: 20px;
171
+
172
+
173
+ }
174
+ @media only screen and (min-width: 1024px){
175
+ .voice-student_2ndblock-img{
176
+ margin-bottom: 0px;
177
+ -webkit-box-flex: 0;
178
+ -ms-flex: 0 0 28.828%;
179
+ flex: 0 0 28.828%;
180
+ max-width: 28.828%;
181
+ padding:0;
182
+
183
+ }
184
+ }
185
+
186
+
187
+ .voice-student_2ndblock-img img{
188
+
189
+ height: 310px;
190
+ object-fit: cover;
191
+
192
+ }
121
193
  ```

3

誤字修正

2020/09/18 09:58

投稿

mmmmtsr
mmmmtsr

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- CSS レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
1
+ CSS レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
body CHANGED
File without changes

2

誤字修正

2020/09/18 09:54

投稿

mmmmtsr
mmmmtsr

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- CSS レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
1
+ CSS レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
 
7
7
  図のように黄色画像(pict_photo)の右上に赤画像(pict_photo08)を重ねます。
8
- 赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても左右上下に動いてしまいます。
8
+ 赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても図のように左右上下に動いてしまいます。
9
9
  親要素にはrelativeを子要素にはabsoluteを入れています。
10
10
  できればウインドウがどんなに可変しても黄色画像(pict_photo)の右上に赤画像(pict_photo08)を
11
11
  固定したいのですが方法が思いつきません。

1

文章をもっとわかりやすくしました

2020/09/18 09:51

投稿

mmmmtsr
mmmmtsr

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- レスポンシブ対応。position:absolute指定したなった画像が動いてまう
1
+ CSS レスポンシブ対応。position:absolute指定た画像を固定たい
body CHANGED
@@ -4,10 +4,12 @@
4
4
  ![イメージ説明](05de971370d9c1d2d51fa4f3d924ed12.jpeg)
5
5
 
6
6
 
7
- 図のように黄色画像(pict_photo)の右上に赤画像(pict_photo08)を重ねます。
7
+ 図のように黄色画像(pict_photo)の右上に赤画像(pict_photo08)を重ねます。
8
8
  赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても左右上下に動いてしまいます。
9
9
  親要素にはrelativeを子要素にはabsoluteを入れています。
10
+ できればウインドウがどんなに可変しても黄色画像(pict_photo)の右上に赤画像(pict_photo08)を
11
+ 固定したいのですが方法が思いつきません。
10
- それでも動いてしまうので、メディアクエリを入れてるのですがめちゃくちゃ細かくなってしました。
12
+ 行った対策はメディアクエリを入れてるのですがめちゃくちゃ細かくなってしました。
11
13
  何か別の方法があるのでは。と思っております。
12
14
  ご教示お願いいたします。
13
15