質問編集履歴

1

情報の訂正,情報の追加

2020/05/17 07:18

投稿

cafe1111
cafe1111

スコア62

test CHANGED
File without changes
test CHANGED
@@ -76,159 +76,339 @@
76
76
 
77
77
  ```
78
78
 
79
+ ```scss
80
+
81
+ .main-images{
82
+
83
+ text-align: center;
84
+
85
+ .main-images__img{
86
+
87
+ display: block;
88
+
89
+ img{
90
+
91
+ width: 98%;
92
+
93
+ }
94
+
95
+ &:not(:last-child){
96
+
97
+ margin-bottom: 20px;
98
+
99
+ }
100
+
101
+ &:last-child{
102
+
103
+ margin-bottom: 30px;
104
+
105
+ }
106
+
107
+ }
108
+
109
+ .main-images__2{
110
+
111
+ background-image: url();
112
+
113
+ width:98%;
114
+
115
+ margin: 0 auto;
116
+
117
+ height: 300px;
118
+
119
+ background-size: cover;
120
+
121
+ margin-bottom: 30px;
122
+
123
+ position: relative;
124
+
125
+ .main-images__texts{
126
+
127
+ position: absolute;
128
+
129
+ bottom: 10%;
130
+
131
+ left: 15%;
132
+
133
+ font-size: 20px;
134
+
135
+ .main-images__title{
136
+
137
+ margin-bottom: 10px;
138
+
139
+ .border{
140
+
141
+ border: 1px solid;
142
+
143
+ }
144
+
145
+ }
146
+
147
+ .main-images__wrapper{
148
+
149
+ display: flex;
150
+
151
+ .main-images__text{
152
+
153
+ margin-right: 10px;
154
+
155
+ .main-images__price{
156
+
157
+ .large{
158
+
159
+ font-size: 30px;
160
+
161
+ }
162
+
163
+ }
164
+
165
+ .main-images__oneday{
166
+
167
+ display: inline-block;
168
+
169
+ color: $images-color;
170
+
171
+ background-color: $images-back;
172
+
173
+ border-radius: 20px;
174
+
175
+ padding: 10px;
176
+
177
+ }
178
+
179
+
180
+
181
+ }
182
+
183
+
184
+
185
+ .main-images__btn{
186
+
187
+ p{
188
+
189
+ margin-left: 10px;
190
+
191
+
192
+
193
+ a{
194
+
195
+ display: inline-block;
196
+
197
+ padding: 30px;
198
+
199
+ background:linear-gradient($images-btn1,$images-btn2) ;
200
+
201
+ text-decoration: none;
202
+
203
+ color:$images-btn__color;
204
+
205
+ border-radius: 5px;
206
+
207
+ opacity: 0.8;
208
+
209
+ transition: all ease 0.8s;
210
+
211
+ &:hover{
212
+
213
+ opacity: 1;
214
+
215
+ }
216
+
217
+
218
+
219
+ }
220
+
221
+ }
222
+
223
+ }
224
+
225
+ }
226
+
227
+ }
228
+
229
+ }
230
+
231
+ }
232
+
233
+ ```
234
+
79
235
  ```css
80
236
 
81
- .main-images{
82
-
83
- text-align: center;
84
-
85
- .main-images__img{
86
-
87
- display: block;
88
-
89
- img{
90
-
91
- width: 98%;
92
-
93
- }
94
-
95
- &:not(:last-child){
96
-
97
- margin-bottom: 20px;
98
-
99
- }
100
-
101
- &:last-child{
102
-
103
- margin-bottom: 30px;
104
-
105
- }
106
-
107
- }
108
-
109
- .main-images__2{
110
-
111
- background-image: url();
112
-
113
- width:98%;
114
-
115
- margin: 0 auto;
116
-
117
- height: 300px;
118
-
119
- background-size: cover;
120
-
121
- margin-bottom: 30px;
122
-
123
- position: relative;
124
-
125
- .main-images__texts{
126
-
127
- position: absolute;
128
-
129
- bottom: 10%;
130
-
131
- left: 15%;
132
-
133
- font-size: 20px;
134
-
135
- .main-images__title{
136
-
137
- margin-bottom: 10px;
138
-
139
- .border{
140
-
141
- border: 1px solid;
142
-
143
- }
144
-
145
- }
146
-
147
- .main-images__wrapper{
148
-
149
- display: flex;
150
-
151
- .main-images__text{
152
-
153
- margin-right: 10px;
154
-
155
- .main-images__price{
156
-
157
- .large{
158
-
159
- font-size: 30px;
160
-
161
- }
162
-
163
- }
164
-
165
- .main-images__oneday{
166
-
167
- display: inline-block;
168
-
169
- color: $images-color;
170
-
171
- background-color: $images-back;
172
-
173
- border-radius: 20px;
174
-
175
- padding: 10px;
176
-
177
- }
178
-
179
-
180
-
181
- }
182
-
183
-
184
-
185
- .main-images__btn{
186
-
187
- p{
188
-
189
- margin-left: 10px;
190
-
191
-
192
-
193
- a{
194
-
195
- display: inline-block;
196
-
197
- padding: 30px;
198
-
199
- background:linear-gradient($images-btn1,$images-btn2) ;
200
-
201
- text-decoration: none;
202
-
203
- color:$images-btn__color;
204
-
205
- border-radius: 5px;
206
-
207
- opacity: 0.8;
208
-
209
- transition: all ease 0.8s;
210
-
211
- &:hover{
212
-
213
- opacity: 1;
214
-
215
- }
216
-
217
-
218
-
219
- }
220
-
221
- }
222
-
223
- }
224
-
225
- }
226
-
227
- }
228
-
229
- }
230
-
231
- }
237
+ .main-images {
238
+
239
+ text-align: center;
240
+
241
+ }
242
+
243
+
244
+
245
+ .main-images .main-images__img {
246
+
247
+ display: block;
248
+
249
+ }
250
+
251
+
252
+
253
+ .main-images .main-images__img img {
254
+
255
+ width: 98%;
256
+
257
+ }
258
+
259
+
260
+
261
+ .main-images .main-images__img:not(:last-child) {
262
+
263
+ margin-bottom: 20px;
264
+
265
+ }
266
+
267
+
268
+
269
+ .main-images .main-images__img:last-child {
270
+
271
+ margin-bottom: 30px;
272
+
273
+ }
274
+
275
+
276
+
277
+ .main-images .main-images__2 {
278
+
279
+ background-image: url(../../image/jp_top_herobanner_father_n360.png);
280
+
281
+ width: 98%;
282
+
283
+ margin: 0 auto;
284
+
285
+ height: 300px;
286
+
287
+ background-size: cover;
288
+
289
+ margin-bottom: 30px;
290
+
291
+ position: relative;
292
+
293
+ }
294
+
295
+
296
+
297
+ .page-main .main-images .main-images__2 .main-images__texts {
298
+
299
+ position: absolute;
300
+
301
+ bottom: 10%;
302
+
303
+ left: 15%;
304
+
305
+ font-size: 20px;
306
+
307
+ }
308
+
309
+
310
+
311
+ .main-images .main-images__2 .main-images__texts .main-images__title {
312
+
313
+ margin-bottom: 10px;
314
+
315
+ }
316
+
317
+
318
+
319
+ .page-main .main-images .main-images__2 .main-images__texts .main-images__title .border {
320
+
321
+ border: 1px solid;
322
+
323
+ }
324
+
325
+
326
+
327
+ .page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper {
328
+
329
+ display: -webkit-box;
330
+
331
+ display: -ms-flexbox;
332
+
333
+ display: flex;
334
+
335
+ }
336
+
337
+
338
+
339
+ .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__text {
340
+
341
+ margin-right: 10px;
342
+
343
+ }
344
+
345
+
346
+
347
+ .page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__text .main-images__price .large {
348
+
349
+ font-size: 30px;
350
+
351
+ }
352
+
353
+
354
+
355
+ .page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__text .main-images__oneday {
356
+
357
+ display: inline-block;
358
+
359
+ color: red;
360
+
361
+ background-color: #fff;
362
+
363
+ border-radius: 20px;
364
+
365
+ padding: 10px;
366
+
367
+ }
368
+
369
+
370
+
371
+ .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__btn p {
372
+
373
+ margin-left: 10px;
374
+
375
+ }
376
+
377
+
378
+
379
+ .page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__btn p a {
380
+
381
+ display: inline-block;
382
+
383
+ padding: 30px;
384
+
385
+ background: -webkit-gradient(linear, left top, left bottom, from(#119103), to(#006c13));
386
+
387
+ background: linear-gradient(#119103, #006c13);
388
+
389
+ text-decoration: none;
390
+
391
+ color: #fff;
392
+
393
+ border-radius: 5px;
394
+
395
+ opacity: 0.8;
396
+
397
+ -webkit-transition: all ease 0.8s;
398
+
399
+ transition: all ease 0.8s;
400
+
401
+ }
402
+
403
+
404
+
405
+ .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__btn p a:hover {
406
+
407
+ opacity: 1;
408
+
409
+ }
410
+
411
+
232
412
 
233
413
  ```
234
414