質問編集履歴

5

背景画像のCSS変更

2021/08/13 13:23

投稿

_rei_J
_rei_J

スコア4

test CHANGED
File without changes
test CHANGED
@@ -78,14 +78,34 @@
78
78
 
79
79
  <div class="promptlyrespond">
80
80
 
81
-
81
+ <div class="promptlyrespond">
82
-
82
+
83
- <img src="大人数シルエット.png" width="1294" height="249" alt=""/>
83
+ <style type="text/css">
84
+
85
+ .promptlyrespond {
86
+
87
+ background:center;
88
+
89
+ background-image: url("大人数シルエット.png");
90
+
91
+ background-position: top 30%;
92
+
93
+ background-repeat: no-repeat;
94
+
95
+ }
96
+
97
+ </style>
98
+
99
+
100
+
101
+
84
102
 
85
103
  </div>
86
104
 
87
105
 
88
106
 
107
+
108
+
89
109
  <p><strong class="marker">迅速対応!</strong></p>
90
110
 
91
111
 
@@ -238,14 +258,98 @@
238
258
 
239
259
 
240
260
 
261
+
262
+
263
+
264
+
265
+ .promptlyrespond img {
266
+
267
+ width: 100%;
268
+
269
+ height: auto;
270
+
271
+ }
272
+
273
+
274
+
275
+ .promptlyrespond p{
276
+
277
+ position: absolute;
278
+
279
+
280
+
281
+ }
282
+
283
+
284
+
285
+ .text {
286
+
287
+ text-align: center;
288
+
289
+ }
290
+
291
+
292
+
293
+ .marker {
294
+
295
+ font-size: 5vw;
296
+
297
+ background:linear-gradient(transparent 60%, #ffff00 0%);
298
+
299
+ }
300
+
301
+
302
+
303
+
304
+
305
+ .icon img{
306
+
307
+ width: 100%;
308
+
309
+ }
310
+
311
+
312
+
313
+ .fadeup{
314
+
315
+ animation: fadeIn 1s ease 1s 1 normal backwards;
316
+
317
+ }
318
+
319
+ @keyframes fadeIn {/*animation-nameで設定した値を書く*/
320
+
321
+ from{
322
+
323
+ opacity: 0;/*アニメーション開始時は不透明度0%*/
324
+
325
+ transform: translateY(20px);
326
+
327
+ }
328
+
329
+ to{
330
+
331
+ opacity: 1;/*アニメーション終了時は不透明度100%*/
332
+
333
+ transform: translateY(0);
334
+
335
+ }
336
+
337
+ }
338
+
339
+
340
+
341
+
342
+
343
+ /*--迅速対応--*/
344
+
345
+
346
+
241
347
  .promptlyrespond {
242
348
 
243
349
  background-position: 100%;
244
350
 
245
351
  margin-top: 20px;
246
352
 
247
- position: relative;
248
-
249
353
  }
250
354
 
251
355
 
@@ -264,8 +368,6 @@
264
368
 
265
369
  position: absolute;
266
370
 
267
-
268
-
269
371
  }
270
372
 
271
373
 
@@ -290,94 +392,4 @@
290
392
 
291
393
 
292
394
 
293
- .icon img{
294
-
295
- width: 100%;
296
-
297
- }
298
-
299
-
300
-
301
- .fadeup{
302
-
303
- animation: fadeIn 1s ease 1s 1 normal backwards;
304
-
305
- }
306
-
307
- @keyframes fadeIn {/*animation-nameで設定した値を書く*/
308
-
309
- from{
310
-
311
- opacity: 0;/*アニメーション開始時は不透明度0%*/
312
-
313
- transform: translateY(20px);
314
-
315
- }
316
-
317
- to{
318
-
319
- opacity: 1;/*アニメーション終了時は不透明度100%*/
320
-
321
- transform: translateY(0);
322
-
323
- }
324
-
325
- }
326
-
327
-
328
-
329
-
330
-
331
- /*--迅速対応--*/
332
-
333
-
334
-
335
- .promptlyrespond {
336
-
337
- background-position: 100%;
338
-
339
- margin-top: 20px;
340
-
341
- }
342
-
343
-
344
-
345
- .promptlyrespond img {
346
-
347
- width: 100%;
348
-
349
- height: auto;
350
-
351
- }
352
-
353
-
354
-
355
- .promptlyrespond p{
356
-
357
- position: absolute;
358
-
359
- }
360
-
361
-
362
-
363
- .text {
364
-
365
- text-align: center;
366
-
367
- }
368
-
369
-
370
-
371
- .marker {
372
-
373
- font-size: 5vw;
374
-
375
- background:linear-gradient(transparent 60%, #ffff00 0%);
376
-
377
- }
378
-
379
-
380
-
381
-
382
-
383
395
  ```

4

親要素にrelative、pタグにabsolute入れた

2021/08/13 13:22

投稿

_rei_J
_rei_J

スコア4

test CHANGED
File without changes
test CHANGED
@@ -244,6 +244,8 @@
244
244
 
245
245
  margin-top: 20px;
246
246
 
247
+ position: relative;
248
+
247
249
  }
248
250
 
249
251
 
@@ -262,6 +264,8 @@
262
264
 
263
265
  position: absolute;
264
266
 
267
+
268
+
265
269
  }
266
270
 
267
271
 
@@ -286,4 +290,94 @@
286
290
 
287
291
 
288
292
 
293
+ .icon img{
294
+
295
+ width: 100%;
296
+
297
+ }
298
+
299
+
300
+
301
+ .fadeup{
302
+
303
+ animation: fadeIn 1s ease 1s 1 normal backwards;
304
+
305
+ }
306
+
307
+ @keyframes fadeIn {/*animation-nameで設定した値を書く*/
308
+
309
+ from{
310
+
311
+ opacity: 0;/*アニメーション開始時は不透明度0%*/
312
+
313
+ transform: translateY(20px);
314
+
315
+ }
316
+
317
+ to{
318
+
319
+ opacity: 1;/*アニメーション終了時は不透明度100%*/
320
+
321
+ transform: translateY(0);
322
+
323
+ }
324
+
325
+ }
326
+
327
+
328
+
329
+
330
+
331
+ /*--迅速対応--*/
332
+
333
+
334
+
335
+ .promptlyrespond {
336
+
337
+ background-position: 100%;
338
+
339
+ margin-top: 20px;
340
+
341
+ }
342
+
343
+
344
+
345
+ .promptlyrespond img {
346
+
347
+ width: 100%;
348
+
349
+ height: auto;
350
+
351
+ }
352
+
353
+
354
+
355
+ .promptlyrespond p{
356
+
357
+ position: absolute;
358
+
359
+ }
360
+
361
+
362
+
363
+ .text {
364
+
365
+ text-align: center;
366
+
367
+ }
368
+
369
+
370
+
371
+ .marker {
372
+
373
+ font-size: 5vw;
374
+
375
+ background:linear-gradient(transparent 60%, #ffff00 0%);
376
+
377
+ }
378
+
379
+
380
+
381
+
382
+
289
383
  ```

3

テキストをdivで囲んでセンターに配置

2021/08/13 12:36

投稿

_rei_J
_rei_J

スコア4

test CHANGED
File without changes
test CHANGED
@@ -262,9 +262,17 @@
262
262
 
263
263
  position: absolute;
264
264
 
265
- top: 10px;
266
-
267
- }
265
+ }
266
+
267
+
268
+
269
+ .text {
270
+
271
+ text-align: center;
272
+
273
+ }
274
+
275
+
268
276
 
269
277
  .marker {
270
278
 
@@ -278,6 +286,4 @@
278
286
 
279
287
 
280
288
 
281
-
282
-
283
289
  ```

2

背景画像に余白入れた

2021/08/13 12:28

投稿

_rei_J
_rei_J

スコア4

test CHANGED
File without changes
test CHANGED
@@ -242,7 +242,7 @@
242
242
 
243
243
  background-position: 100%;
244
244
 
245
-
245
+ margin-top: 20px;
246
246
 
247
247
  }
248
248
 

1

下にする画像を背景画像にしてみた。

2021/08/13 12:17

投稿

_rei_J
_rei_J

スコア4

test CHANGED
File without changes
test CHANGED
@@ -238,45 +238,31 @@
238
238
 
239
239
 
240
240
 
241
- .promptlyrespond{
241
+ .promptlyrespond {
242
+
243
+ background-position: 100%;
244
+
245
+
246
+
247
+ }
248
+
249
+
250
+
251
+ .promptlyrespond img {
242
252
 
243
253
  width: 100%;
244
254
 
255
+ height: auto;
256
+
257
+ }
258
+
259
+
260
+
261
+ .promptlyrespond p{
262
+
245
263
  position: absolute;
246
264
 
247
- display: flex;
248
-
249
- justify-content: center;
250
-
251
- }
252
-
253
-
254
-
255
- .promptlyrespond img {
256
-
257
- width: 100%;
265
+ top: 10px;
258
-
259
- height: auto;
260
-
261
- }
262
-
263
- .resizeimsge2 img{
264
-
265
- mwidth: 100%;
266
-
267
- max-width: 100%;
268
-
269
- }
270
-
271
-
272
-
273
- .promptlyrespond p{
274
-
275
- max-width: 100%;
276
-
277
- width: 100%;
278
-
279
- text-align: center;
280
266
 
281
267
  }
282
268
 
@@ -290,4 +276,8 @@
290
276
 
291
277
 
292
278
 
279
+
280
+
281
+
282
+
293
283
  ```