質問編集履歴

3

コード追加します

2020/02/14 14:17

投稿

DaisukeMori
DaisukeMori

スコア226

test CHANGED
File without changes
test CHANGED
@@ -41,3 +41,377 @@
41
41
 
42
42
 
43
43
  ![イメージ説明](ca8061e8bac0e554c209284d661342b5.png)
44
+
45
+
46
+
47
+ App.vue
48
+
49
+ ```vue
50
+
51
+ <template>
52
+
53
+ <div id="app">
54
+
55
+ <div class="header">
56
+
57
+ <router-link to="/">
58
+
59
+ <div class="logo-title">
60
+
61
+ <div class="font-12">Designer</div>
62
+
63
+ <div class="font-20">Daisuke Mori</div>
64
+
65
+ </div>
66
+
67
+ </router-link>
68
+
69
+ <ul class="font-15">
70
+
71
+ <li><router-link to="/">Top</router-link></li>
72
+
73
+ <li><router-link to="/product">Works</router-link></li>
74
+
75
+ </ul>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ <router-view />
82
+
83
+ <Form />
84
+
85
+
86
+
87
+ <div class="footer">
88
+
89
+ <p id="page-top"><a href="#wrap"><img src="@/assets/img/pagetop.png"></a></p>
90
+
91
+ <div class="detail">
92
+
93
+ <div class="font-20">Detail</div>
94
+
95
+ <div class="font-13">Adobe Illustrator / Photoshop / Indesign / XD / AfterEffects</div>
96
+
97
+ <div class="font-13">Web HTML / CSS / PHP / Laravel / CakePHP / Javascript / Vue / React</div>
98
+
99
+ <div class="font-13">Mobile React Native</div>
100
+
101
+ </div>
102
+
103
+ Copyright© 2020 Dai Portfolio All rights reserved.
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ </template>
110
+
111
+
112
+
113
+ <script>
114
+
115
+ // 認証関連
116
+
117
+ import firebase from 'firebase'
118
+
119
+ import Form from '@/components/Form.vue'
120
+
121
+
122
+
123
+ export default {
124
+
125
+ name: 'App',
126
+
127
+ components: { Form },
128
+
129
+ mounted: function() {
130
+
131
+ // fadein
132
+
133
+ $(window).scroll(function (){
134
+
135
+ $('.fadein').each(function(){
136
+
137
+ let targetElement = $(this).offset().top;
138
+
139
+ let scroll = $(window).scrollTop();
140
+
141
+ let windowHeight = $(window).height();
142
+
143
+ if (scroll > targetElement - windowHeight + 200){
144
+
145
+ $(this).css('opacity','1');
146
+
147
+ $(this).css('transform','translateY(0)');
148
+
149
+ }
150
+
151
+ });
152
+
153
+ });
154
+
155
+ // ページTOPに戻る
156
+
157
+ let topBtn = $('#page-top');
158
+
159
+ topBtn.hide();
160
+
161
+ //スクロールが100に達したらボタン表示
162
+
163
+ $(window).scroll(function () {
164
+
165
+ if ($(this).scrollTop() > 100) {
166
+
167
+ topBtn.fadeIn();
168
+
169
+ } else {
170
+
171
+ topBtn.fadeOut();
172
+
173
+ }
174
+
175
+ });
176
+
177
+ //スクロールしてトップ
178
+
179
+ topBtn.click(function () {
180
+
181
+ $('body,html').animate({
182
+
183
+ scrollTop: 0
184
+
185
+ }, 500);
186
+
187
+ return false;
188
+
189
+ });
190
+
191
+ }
192
+
193
+ }
194
+
195
+ </script>
196
+
197
+
198
+
199
+ <style>
200
+
201
+ @import url('https://fonts.googleapis.com/css?family=Parisienne&display=swap');
202
+
203
+ @import url('https://fonts.googleapis.com/css?family=PT+Serif:400i|Parisienne&display=swap');
204
+
205
+ /* font-family: 'Parisienne', cursive; */
206
+
207
+ /* font-family: 'PT Serif', serif; */
208
+
209
+ * {
210
+
211
+ font-family: 'PT Serif', serif;
212
+
213
+ margin: 0;
214
+
215
+ padding: 0;
216
+
217
+ box-sizing: border-box;
218
+
219
+ }
220
+
221
+ body, html {
222
+
223
+ background: #F4EFE7;
224
+
225
+ }
226
+
227
+ /* フォントサイズ定義 */
228
+
229
+ .font-12 {
230
+
231
+ font-size: 12px;
232
+
233
+ }
234
+
235
+ .font-13 {
236
+
237
+ font-size: 13px;
238
+
239
+ }
240
+
241
+ .font-15 {
242
+
243
+ font-size: 15px;
244
+
245
+ }
246
+
247
+ .font-18 {
248
+
249
+ font-size: 18px;
250
+
251
+ }
252
+
253
+ .font-20 {
254
+
255
+ font-size: 20px;
256
+
257
+ }
258
+
259
+ .font-23 {
260
+
261
+ font-size: 23px;
262
+
263
+ }
264
+
265
+ .font-25 {
266
+
267
+ font-size: 25px;
268
+
269
+ }
270
+
271
+ .font-30 {
272
+
273
+ font-size: 30px;
274
+
275
+ }
276
+
277
+ .fadein {
278
+
279
+ opacity : 0;
280
+
281
+ transform: translateY(20px);
282
+
283
+ transition: all 1s;
284
+
285
+ }
286
+
287
+ #page-top img {
288
+
289
+ display: block;
290
+
291
+ width: 50px;
292
+
293
+ height: 50px;
294
+
295
+ font-size: 15px;
296
+
297
+ color: #fff;
298
+
299
+ text-align: center;
300
+
301
+ text-decoration: none;
302
+
303
+ transition: .5s;
304
+
305
+ right: 50px;
306
+
307
+ bottom: 50px;
308
+
309
+ position: fixed;
310
+
311
+ }
312
+
313
+ #page-top a:hover {
314
+
315
+ opacity: .5;
316
+
317
+ }
318
+
319
+ h1, h2 {
320
+
321
+ font-family: 'Parisienne', cursive;
322
+
323
+ font-weight: normal;
324
+
325
+ margin: 0 0 15px 0;
326
+
327
+ }
328
+
329
+ a {
330
+
331
+ text-decoration: none;
332
+
333
+ color: #312312;
334
+
335
+ }
336
+
337
+ ul li {
338
+
339
+ list-style: none;
340
+
341
+ }
342
+
343
+ .header {
344
+
345
+ display: flex;
346
+
347
+ align-items: center;
348
+
349
+ justify-content: space-between;
350
+
351
+ width: 80%;
352
+
353
+ height: 90px;
354
+
355
+ margin: 0 auto;
356
+
357
+ padding: 30px;
358
+
359
+ background: #D6C6B4;
360
+
361
+ }
362
+
363
+ .header .logo-title {
364
+
365
+ line-height: 1.25em;
366
+
367
+ }
368
+
369
+ .error {
370
+
371
+ color: #ff7bb6;
372
+
373
+ }
374
+
375
+ .header ul li {
376
+
377
+ display: inline-block;
378
+
379
+ margin: 15px 0 0 10px;
380
+
381
+ }
382
+
383
+ .router-link-exact-active {
384
+
385
+ color: #312312;
386
+
387
+ }
388
+
389
+ .container {
390
+
391
+ text-align: center;
392
+
393
+ width: 100%;
394
+
395
+ margin: 75px auto 50px;
396
+
397
+ }
398
+
399
+ .footer {
400
+
401
+ text-align: center;
402
+
403
+ font-size: 10px;
404
+
405
+ margin: 0 0 30px 0;
406
+
407
+ }
408
+
409
+ .footer .detail {
410
+
411
+ margin: 0 0 30px 0;
412
+
413
+ }
414
+
415
+ </style>
416
+
417
+ ```

2

修正依頼があったので画像を変更しました。

2020/02/14 14:17

投稿

DaisukeMori
DaisukeMori

スコア226

test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,8 @@
36
36
 
37
37
  不明: 「#F4EFE7」の方のスタイルより#fffのbodyスタイルが後に読み込まれてしまっている
38
38
 
39
+ あと<a>タグのスタイルも変わってしまっています。
39
40
 
40
41
 
42
+
41
- ![イメージ説明](83a7d4f8443b74f186ae836913bbe378.png)
43
+ ![イメージ説明](ca8061e8bac0e554c209284d661342b5.png)

1

要点をわかりやすく記入しました。

2020/02/14 08:54

投稿

DaisukeMori
DaisukeMori

スコア226

test CHANGED
@@ -1 +1 @@
1
- [Vue] Build後、ローカル環境時と一部スタイル現象が起こる原因が分からない
1
+ [Vue] Build後、bodyのbackground-color#fffになってしま
test CHANGED
@@ -1,25 +1,41 @@
1
- 現在、Vueでサイトを作っているのですが
1
+ # 環境
2
2
 
3
- ローカル環境(Vue CLI 2x)ではバックグラウンドに色をつけているのですが
3
+ Vue CLI 2x
4
-
5
- npm run buildでビルドしてfirebaseにデプロイしてみたら、バックグラウンド色が#fff(白)になってしまいます。CSSをみてもどこにも#fffの指定をしていないのになぜこのような現象が起こるか不明です。
6
4
 
7
5
 
8
6
 
9
- これは何かしらのバグなのでしょうか?検索しても同じような現象が起こっている記事がないのでどうすることもできません。知っている方教えていただけますでしょうか?
7
+ # 現象
10
8
 
9
+ ### npm run dev時
11
10
 
11
+ ```vue
12
+
13
+ body{ background: #F4EFE7; }
14
+
15
+ ```
12
16
 
13
17
  ローカル環境
14
18
 
15
19
  ![イメージ説明](f9b8ad999336a53c40853fecaaaf1481.png)
16
20
 
17
- body{ background: #F4EFE7; }
18
21
 
19
22
 
20
23
 
24
+
21
- firebaseデプロイ
25
+ ### npm run build時(firebaseデプロイ
26
+
27
+
28
+
29
+ ```vue
30
+
31
+ body{ background-color: #fff; }
32
+
33
+ ```
34
+
35
+
36
+
37
+ 不明: 「#F4EFE7」の方のスタイルより#fffのbodyスタイルが後に読み込まれてしまっている
38
+
39
+
22
40
 
23
41
  ![イメージ説明](83a7d4f8443b74f186ae836913bbe378.png)
24
-
25
- body{ background-color: #fff; }