質問編集履歴

7

修正しました。

2021/12/03 13:36

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -566,7 +566,9 @@
566
566
 
567
567
  ※こちらは。温泉のコンパイルするためのSCSS
568
568
 
569
- ファイルです。```
569
+ ファイルです。
570
+
571
+ ```
570
572
 
571
573
 
572
574
 

6

修正しました

2021/12/03 13:36

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -64,9 +64,9 @@
64
64
 
65
65
 
66
66
 
67
-
67
+ ※色などの土台scss
68
+
68
-
69
+ desu
69
-
70
70
 
71
71
  ```
72
72
 
@@ -284,6 +284,10 @@
284
284
 
285
285
 
286
286
 
287
+ ※全体の共通項だけを抜き出したSCSSです
288
+
289
+
290
+
287
291
  ```
288
292
 
289
293
  ```@mixin jp-txt
@@ -534,6 +538,8 @@
534
538
 
535
539
 
536
540
 
541
+
542
+
537
543
  ```@import
538
544
 
539
545
  @import "../../Scss/foundation/base";
@@ -556,7 +562,11 @@
556
562
 
557
563
  @import "../../Scss/layout/footer";
558
564
 
565
+
566
+
567
+ ※こちらは。温泉のコンパイルするためのSCSS
568
+
559
- ```
569
+ ファイルです。```
560
570
 
561
571
 
562
572
 

5

修正しました

2021/12/03 08:31

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -534,4 +534,30 @@
534
534
 
535
535
 
536
536
 
537
+ ```@import
538
+
539
+ @import "../../Scss/foundation/base";
540
+
541
+ @import "../Scss/foundation/general";
542
+
543
+ @import "../../Scss/foundation/mixin";
544
+
545
+ @import "../../Scss/layout/header";
546
+
547
+ @import "../../Scss/layout/modal";
548
+
549
+ @import "../../Onsen/Scss/layout/fv";
550
+
551
+ @import "../../Scss/layout/sp";
552
+
553
+ @import "../../Onsen/Scss/foundation/bread";
554
+
555
+ @import "../../Onsen/Scss/contents/onsen-contents";
556
+
557
+ @import "../../Scss/layout/footer";
558
+
559
+ ```
560
+
561
+
562
+
537
563
  ご教授頂けると幸いです

4

修正しました

2021/12/03 08:21

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -232,6 +232,8 @@
232
232
 
233
233
 
234
234
 
235
+
236
+
235
237
  //共通リンク
236
238
 
237
239
  .cmn-link{
@@ -282,7 +284,11 @@
282
284
 
283
285
 
284
286
 
287
+ ```
288
+
289
+ ```@mixin jp-txt
290
+
285
- @mixin jp-txt ($left) {
291
+ @mixin jp-txt($left) {
286
292
 
287
293
  .jp-text{
288
294
 
@@ -322,60 +328,36 @@
322
328
 
323
329
  }
324
330
 
331
+
332
+
325
333
 
326
334
 
327
- }
328
-
329
-
330
-
331
- ```
332
-
333
-
334
-
335
- ```
336
-
337
-
338
-
339
- @mixin jp-txt ($left) {
335
+ &-txt-left{
340
-
341
- .jp-text{
336
+
342
-
343
- // display: flex;
344
-
345
- // align-items: center;
346
-
347
- text-align: center;
348
-
349
- position: relative;
337
+ position: absolute;
350
-
338
+
351
- top: 40%;
339
+ top: 50%;
340
+
341
+ left: 0;
342
+
343
+ transform: translateY(-50%);
344
+
345
+ width: 810px;
346
+
347
+ height: 380px;
348
+
349
+ line-height: 1.5;
350
+
351
+ padding: 20px;
352
+
353
+ z-index: -2;
352
354
 
353
355
  left: $left;
354
356
 
355
- transform: translate(-40%, -50%);
356
-
357
- .ttl{
358
-
359
- padding: 30px 0px 50px;
360
-
361
- font-size: 2.4rem;
362
-
363
357
 
364
358
 
365
359
  }
366
360
 
367
- .desc1{
368
-
369
- line-height: 2.0;
370
-
371
-
372
-
373
- }
374
-
375
-
376
-
377
- }
378
-
379
361
 
380
362
 
381
363
  }
@@ -384,4 +366,172 @@
384
366
 
385
367
 
386
368
 
369
+ ```
370
+
371
+ //jp-text
372
+
373
+ &-item{
374
+
375
+ /* display: grid;
376
+
377
+ grid-template-columns: 2fr 1fr; */
378
+
379
+ position: relative;
380
+
381
+ margin-bottom: 290px;
382
+
383
+ @include tb{
384
+
385
+ display: flex;
386
+
387
+ flex-direction: column;
388
+
389
+ justify-content: center;
390
+
391
+ align-items: center;
392
+
393
+ margin-bottom: 550px;
394
+
395
+ }
396
+
397
+ &:nth-of-type(2){
398
+
399
+ position: relative;
400
+
401
+ margin-bottom: 290px;
402
+
403
+ display: flex;
404
+
405
+ flex-direction: row-reverse;
406
+
407
+ @include tb{
408
+
409
+ display: flex;
410
+
411
+ flex-direction: column;
412
+
413
+ justify-content: center;
414
+
415
+ align-items: center;
416
+
417
+ margin-bottom: 550px;
418
+
419
+ }
420
+
421
+
422
+
423
+ }
424
+
425
+ &-img{
426
+
427
+ img {
428
+
429
+ width: 525px;
430
+
431
+ height: 300px;
432
+
433
+ }
434
+
435
+ @include tb{
436
+
437
+ margin-left: -350px;
438
+
439
+ }
440
+
441
+
442
+
443
+ }
444
+
445
+ &-txt{
446
+
447
+ background-image: url(../../img/bg.png);
448
+
449
+ background-position: center;
450
+
451
+ background-size: cover;
452
+
453
+ @include tb{
454
+
455
+ width: 100%;
456
+
457
+ }
458
+
459
+ &.slide-up{
460
+
461
+ @include sp{
462
+
463
+ background-image: none;
464
+
465
+ transform: translateY();
466
+
467
+ z-index: 9999;
468
+
469
+
470
+
471
+ }
472
+
473
+ }
474
+
475
+
476
+
477
+
478
+
479
+ }
480
+
481
+ &-txt-right{
482
+
483
+ position: absolute;
484
+
485
+ top: 50%;
486
+
487
+ right: 0;
488
+
489
+ transform: translateY(-50%);
490
+
491
+ width: 810px;
492
+
493
+ height: 380px;
494
+
495
+ line-height: 1.5;
496
+
497
+ padding: 20px;
498
+
499
+ z-index: -2;
500
+
501
+ @include jp-txt($left: 40%);
502
+
503
+
504
+
505
+ @include tb {
506
+
507
+
508
+
509
+ /* width: 90%;
510
+
511
+ top: 20%;
512
+
513
+ left: 0%;
514
+
515
+ margin-top: 300px;
516
+
517
+ margin-right: 450px;
518
+
519
+ transform: translate(-50%, 50%) */
520
+
521
+ display: grid;
522
+
523
+
524
+
525
+ }
526
+
527
+ }
528
+
529
+
530
+
531
+ ※貼り直しました
532
+
533
+ ```
534
+
535
+
536
+
387
537
  ご教授頂けると幸いです

3

追記しました

2021/12/03 08:11

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,36 @@
40
40
 
41
41
  ### 該当のソースコード
42
42
 
43
+ ```asserts
44
+
45
+ //カラー
46
+
47
+ $bg-white: #ffffff;
48
+
49
+ $word-color: #000000;
50
+
51
+
52
+
53
+ $link-color: #978F10;
54
+
55
+
56
+
57
+
58
+
59
+ .body-wrapper{
60
+
61
+ overflow: hidden;
62
+
63
+ }
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+ ```
72
+
43
73
 
44
74
 
45
75
 

2

追記しました

2021/12/03 06:57

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -46,10 +46,6 @@
46
46
 
47
47
  ```SCSS
48
48
 
49
-
50
-
51
- ```general.scss
52
-
53
49
  html{
54
50
 
55
51
  font-size: 62.5%;
@@ -300,6 +296,12 @@
300
296
 
301
297
  }
302
298
 
299
+
300
+
301
+ ```
302
+
303
+
304
+
303
305
  ```
304
306
 
305
307
 

1

追記しました

2021/12/03 06:52

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,214 @@
48
48
 
49
49
 
50
50
 
51
+ ```general.scss
52
+
53
+ html{
54
+
55
+ font-size: 62.5%;
56
+
57
+
58
+
59
+ }
60
+
61
+
62
+
63
+ body{
64
+
65
+ font-size: 1.6rem;
66
+
67
+ color: $word-color;
68
+
69
+ min-width: 100vw;
70
+
71
+
72
+
73
+ }
74
+
75
+
76
+
77
+ img{
78
+
79
+ width: 100%;
80
+
81
+ height: auto;
82
+
83
+ vertical-align: bottom;
84
+
85
+ }
86
+
87
+ a{
88
+
89
+ text-decoration: none;
90
+
91
+ }
92
+
93
+ li{
94
+
95
+ list-style: none;
96
+
97
+ }
98
+
99
+ section{
100
+
101
+ @include tb {
102
+
103
+ margin-top: 60px;
104
+
105
+ }
106
+
107
+ @include sp{
108
+
109
+ margin-top: 60px;
110
+
111
+ }
112
+
113
+ }
114
+
115
+
116
+
117
+ .inner{
118
+
119
+ max-width: 1180px;
120
+
121
+ margin: 0 auto;
122
+
123
+ -webkit-box-sizing: border-box;
124
+
125
+ box-sizing: border-box;
126
+
127
+ @include tb {
128
+
129
+ padding: 0 25px;
130
+
131
+ }
132
+
133
+ @include sp {
134
+
135
+ padding: 0 15px;
136
+
137
+ }
138
+
139
+ }
140
+
141
+ .wrapper{
142
+
143
+ width: 100%;
144
+
145
+ margin: 0 auto;
146
+
147
+ /* -webkit-box-sizing: content-box;
148
+
149
+ box-sizing: content-box; */
150
+
151
+ @include tb {
152
+
153
+ padding: 0px 20px;
154
+
155
+ }
156
+
157
+ @include sp {
158
+
159
+ padding: 0 20px;
160
+
161
+ }
162
+
163
+ }
164
+
165
+
166
+
167
+ //sec-theme
168
+
169
+ .sec-theme{
170
+
171
+ margin: 0 auto;
172
+
173
+ >img{
174
+
175
+ display: block;
176
+
177
+ width: 3.3%;
178
+
179
+ height: 5.1%;
180
+
181
+ margin: 0 auto;
182
+
183
+ padding-top: 60px;
184
+
185
+ padding-bottom: 20px;
186
+
187
+ }
188
+
189
+
190
+
191
+ .cmn-ttl{
192
+
193
+ display: block;
194
+
195
+ font-size: 3.6rem;
196
+
197
+ color: $word-color;
198
+
199
+ text-align: center;
200
+
201
+ margin: 0 auto;
202
+
203
+ }
204
+
205
+ }
206
+
207
+
208
+
209
+ //共通リンク
210
+
211
+ .cmn-link{
212
+
213
+ background-color: $bg-white;
214
+
215
+ width: 40%;
216
+
217
+ height: calc(54px/545px*100%);
218
+
219
+ border: 1px solid #707070;
220
+
221
+ font-size: 1.6rem;
222
+
223
+ text-align: center;
224
+
225
+ @include tb {
226
+
227
+ margin-top: 50px;
228
+
229
+ margin: 0 auto;
230
+
231
+
232
+
233
+ }
234
+
235
+ @include sp {
236
+
237
+ width: 100%;
238
+
239
+ margin-top: 35px;
240
+
241
+ margin: 0 auto;
242
+
243
+ }
244
+
245
+ }
246
+
247
+
248
+
249
+ .contents-inner{
250
+
251
+ max-width: 1180px;
252
+
253
+ margin: 0 auto;
254
+
255
+ }
256
+
257
+
258
+
51
259
  @mixin jp-txt ($left) {
52
260
 
53
261
  .jp-text{
@@ -96,4 +304,52 @@
96
304
 
97
305
 
98
306
 
307
+ @mixin jp-txt ($left) {
308
+
309
+ .jp-text{
310
+
311
+ // display: flex;
312
+
313
+ // align-items: center;
314
+
315
+ text-align: center;
316
+
317
+ position: relative;
318
+
319
+ top: 40%;
320
+
321
+ left: $left;
322
+
323
+ transform: translate(-40%, -50%);
324
+
325
+ .ttl{
326
+
327
+ padding: 30px 0px 50px;
328
+
329
+ font-size: 2.4rem;
330
+
331
+
332
+
333
+ }
334
+
335
+ .desc1{
336
+
337
+ line-height: 2.0;
338
+
339
+
340
+
341
+ }
342
+
343
+
344
+
345
+ }
346
+
347
+
348
+
349
+ }
350
+
351
+ ```
352
+
353
+
354
+
99
355
  ご教授頂けると幸いです