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

質問編集履歴

7

修正しました。

2021/12/03 13:36

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -282,6 +282,7 @@
282
282
  @import "../../Scss/layout/footer";
283
283
 
284
284
  ※こちらは。温泉のコンパイルするためのSCSS
285
- ファイルです。```
285
+ ファイルです。
286
+ ```
286
287
 
287
288
  ご教授頂けると幸いです

6

修正しました

2021/12/03 13:36

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -31,8 +31,8 @@
31
31
  overflow: hidden;
32
32
  }
33
33
 
34
-
34
+ ※色などの土台scss
35
-
35
+ desu
36
36
  ```
37
37
 
38
38
 
@@ -141,6 +141,8 @@
141
141
  margin: 0 auto;
142
142
  }
143
143
 
144
+ ※全体の共通項だけを抜き出したSCSSです
145
+
144
146
  ```
145
147
  ```@mixin jp-txt
146
148
  @mixin jp-txt($left) {
@@ -266,6 +268,7 @@
266
268
  ※貼り直しました
267
269
  ```
268
270
 
271
+
269
272
  ```@import
270
273
  @import "../../Scss/foundation/base";
271
274
  @import "../Scss/foundation/general";
@@ -277,6 +280,8 @@
277
280
  @import "../../Onsen/Scss/foundation/bread";
278
281
  @import "../../Onsen/Scss/contents/onsen-contents";
279
282
  @import "../../Scss/layout/footer";
280
- ```
281
283
 
284
+ ※こちらは。温泉のコンパイルするためのSCSS
285
+ ファイルです。```
286
+
282
287
  ご教授頂けると幸いです

5

修正しました

2021/12/03 08:31

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -266,4 +266,17 @@
266
266
  ※貼り直しました
267
267
  ```
268
268
 
269
+ ```@import
270
+ @import "../../Scss/foundation/base";
271
+ @import "../Scss/foundation/general";
272
+ @import "../../Scss/foundation/mixin";
273
+ @import "../../Scss/layout/header";
274
+ @import "../../Scss/layout/modal";
275
+ @import "../../Onsen/Scss/layout/fv";
276
+ @import "../../Scss/layout/sp";
277
+ @import "../../Onsen/Scss/foundation/bread";
278
+ @import "../../Onsen/Scss/contents/onsen-contents";
279
+ @import "../../Scss/layout/footer";
280
+ ```
281
+
269
282
  ご教授頂けると幸いです

4

修正しました

2021/12/03 08:21

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -115,6 +115,7 @@
115
115
  }
116
116
  }
117
117
 
118
+
118
119
  //共通リンク
119
120
  .cmn-link{
120
121
  background-color: $bg-white;
@@ -140,7 +141,9 @@
140
141
  margin: 0 auto;
141
142
  }
142
143
 
144
+ ```
145
+ ```@mixin jp-txt
143
- @mixin jp-txt ($left) {
146
+ @mixin jp-txt($left) {
144
147
  .jp-text{
145
148
  // display: flex;
146
149
  // align-items: center;
@@ -160,35 +163,107 @@
160
163
  }
161
164
 
162
165
  }
166
+
163
167
 
168
+ &-txt-left{
169
+ position: absolute;
170
+ top: 50%;
171
+ left: 0;
172
+ transform: translateY(-50%);
173
+ width: 810px;
174
+ height: 380px;
175
+ line-height: 1.5;
176
+ padding: 20px;
177
+ z-index: -2;
178
+ left: $left;
179
+
180
+ }
181
+
164
182
  }
165
-
166
183
  ```
167
184
 
168
185
  ```
186
+ //jp-text
187
+ &-item{
188
+ /* display: grid;
189
+ grid-template-columns: 2fr 1fr; */
190
+ position: relative;
191
+ margin-bottom: 290px;
192
+ @include tb{
193
+ display: flex;
194
+ flex-direction: column;
195
+ justify-content: center;
196
+ align-items: center;
197
+ margin-bottom: 550px;
198
+ }
199
+ &:nth-of-type(2){
200
+ position: relative;
201
+ margin-bottom: 290px;
202
+ display: flex;
203
+ flex-direction: row-reverse;
204
+ @include tb{
205
+ display: flex;
206
+ flex-direction: column;
207
+ justify-content: center;
208
+ align-items: center;
209
+ margin-bottom: 550px;
210
+ }
169
211
 
170
- @mixin jp-txt ($left) {
171
- .jp-text{
172
- // display: flex;
173
- // align-items: center;
174
- text-align: center;
175
- position: relative;
176
- top: 40%;
177
- left: $left;
178
- transform: translate(-40%, -50%);
179
- .ttl{
180
- padding: 30px 0px 50px;
181
- font-size: 2.4rem;
182
-
183
212
  }
213
+ &-img{
184
- .desc1{
214
+ img {
215
+ width: 525px;
185
- line-height: 2.0;
216
+ height: 300px;
186
-
217
+ }
218
+ @include tb{
219
+ margin-left: -350px;
220
+ }
221
+
187
222
  }
188
-
223
+ &-txt{
224
+ background-image: url(../../img/bg.png);
225
+ background-position: center;
226
+ background-size: cover;
227
+ @include tb{
228
+ width: 100%;
229
+ }
230
+ &.slide-up{
231
+ @include sp{
232
+ background-image: none;
233
+ transform: translateY();
234
+ z-index: 9999;
235
+
236
+ }
237
+ }
238
+
239
+
189
240
  }
190
-
241
+ &-txt-right{
242
+ position: absolute;
243
+ top: 50%;
244
+ right: 0;
245
+ transform: translateY(-50%);
246
+ width: 810px;
247
+ height: 380px;
248
+ line-height: 1.5;
249
+ padding: 20px;
250
+ z-index: -2;
251
+ @include jp-txt($left: 40%);
252
+
253
+ @include tb {
254
+
255
+ /* width: 90%;
256
+ top: 20%;
257
+ left: 0%;
258
+ margin-top: 300px;
259
+ margin-right: 450px;
260
+ transform: translate(-50%, 50%) */
261
+ display: grid;
262
+
191
- }
263
+ }
264
+ }
265
+
266
+ ※貼り直しました
192
267
  ```
193
268
 
194
269
  ご教授頂けると幸いです

3

追記しました

2021/12/03 08:11

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -19,8 +19,23 @@
19
19
 
20
20
 
21
21
  ### 該当のソースコード
22
+ ```asserts
23
+ //カラー
24
+ $bg-white: #ffffff;
25
+ $word-color: #000000;
22
26
 
27
+ $link-color: #978F10;
23
28
 
29
+
30
+ .body-wrapper{
31
+ overflow: hidden;
32
+ }
33
+
34
+
35
+
36
+ ```
37
+
38
+
24
39
  ```SCSS
25
40
  html{
26
41
  font-size: 62.5%;

2

追記しました

2021/12/03 06:57

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -22,8 +22,6 @@
22
22
 
23
23
 
24
24
  ```SCSS
25
-
26
- ```general.scss
27
25
  html{
28
26
  font-size: 62.5%;
29
27
 
@@ -149,8 +147,11 @@
149
147
  }
150
148
 
151
149
  }
150
+
152
151
  ```
153
152
 
153
+ ```
154
+
154
155
  @mixin jp-txt ($left) {
155
156
  .jp-text{
156
157
  // display: flex;

1

追記しました

2021/12/03 06:52

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -23,6 +23,110 @@
23
23
 
24
24
  ```SCSS
25
25
 
26
+ ```general.scss
27
+ html{
28
+ font-size: 62.5%;
29
+
30
+ }
31
+
32
+ body{
33
+ font-size: 1.6rem;
34
+ color: $word-color;
35
+ min-width: 100vw;
36
+
37
+ }
38
+
39
+ img{
40
+ width: 100%;
41
+ height: auto;
42
+ vertical-align: bottom;
43
+ }
44
+ a{
45
+ text-decoration: none;
46
+ }
47
+ li{
48
+ list-style: none;
49
+ }
50
+ section{
51
+ @include tb {
52
+ margin-top: 60px;
53
+ }
54
+ @include sp{
55
+ margin-top: 60px;
56
+ }
57
+ }
58
+
59
+ .inner{
60
+ max-width: 1180px;
61
+ margin: 0 auto;
62
+ -webkit-box-sizing: border-box;
63
+ box-sizing: border-box;
64
+ @include tb {
65
+ padding: 0 25px;
66
+ }
67
+ @include sp {
68
+ padding: 0 15px;
69
+ }
70
+ }
71
+ .wrapper{
72
+ width: 100%;
73
+ margin: 0 auto;
74
+ /* -webkit-box-sizing: content-box;
75
+ box-sizing: content-box; */
76
+ @include tb {
77
+ padding: 0px 20px;
78
+ }
79
+ @include sp {
80
+ padding: 0 20px;
81
+ }
82
+ }
83
+
84
+ //sec-theme
85
+ .sec-theme{
86
+ margin: 0 auto;
87
+ >img{
88
+ display: block;
89
+ width: 3.3%;
90
+ height: 5.1%;
91
+ margin: 0 auto;
92
+ padding-top: 60px;
93
+ padding-bottom: 20px;
94
+ }
95
+
96
+ .cmn-ttl{
97
+ display: block;
98
+ font-size: 3.6rem;
99
+ color: $word-color;
100
+ text-align: center;
101
+ margin: 0 auto;
102
+ }
103
+ }
104
+
105
+ //共通リンク
106
+ .cmn-link{
107
+ background-color: $bg-white;
108
+ width: 40%;
109
+ height: calc(54px/545px*100%);
110
+ border: 1px solid #707070;
111
+ font-size: 1.6rem;
112
+ text-align: center;
113
+ @include tb {
114
+ margin-top: 50px;
115
+ margin: 0 auto;
116
+
117
+ }
118
+ @include sp {
119
+ width: 100%;
120
+ margin-top: 35px;
121
+ margin: 0 auto;
122
+ }
123
+ }
124
+
125
+ .contents-inner{
126
+ max-width: 1180px;
127
+ margin: 0 auto;
128
+ }
129
+
26
130
  @mixin jp-txt ($left) {
27
131
  .jp-text{
28
132
  // display: flex;
@@ -47,4 +151,28 @@
47
151
  }
48
152
  ```
49
153
 
154
+ @mixin jp-txt ($left) {
155
+ .jp-text{
156
+ // display: flex;
157
+ // align-items: center;
158
+ text-align: center;
159
+ position: relative;
160
+ top: 40%;
161
+ left: $left;
162
+ transform: translate(-40%, -50%);
163
+ .ttl{
164
+ padding: 30px 0px 50px;
165
+ font-size: 2.4rem;
166
+
167
+ }
168
+ .desc1{
169
+ line-height: 2.0;
170
+
171
+ }
172
+
173
+ }
174
+
175
+ }
176
+ ```
177
+
50
178
  ご教授頂けると幸いです